Menu
I do not want to use create-react-app. So how can I configure a minimal working dev environment for a simple react app?
Note: I know I could likely just include everything at runtime as JS (that is well documented), but I do not want this, as I still want a version that is usable for production!
I do not want:
I do want:
Basically, I just want to use React. Without all the fancy other stuff that comes around it!*
I am just asking this, because the official React docs do not mention that possibility.
Attention: Reasoning following for those that wonder, why I'd wanted this.
* Actually, it sounds crazy too dismiss these convenient dev features etc. But I claim there are legitimate reasons/use cases for this. My is e.g. that all of this just is not usaable for me/breaks things, as I am trying to build a browser extension with React.
Yes I saw this very similar question, but unfortunately the user there is one step ahead of me and the answers are just very specific ones to their problem. I want to know the general things first, i.e. what do I need and how to setup?
378
So for a pretty minimal setup you'd want to...
cd path/to/my/foldernpm init<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<div id="root"></div>
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="./dist/main.js"></script>
</body>
</html>
npm install --save ...npm install --save react react-domnpm install --save-dev webpack webpack-cli @babel/core babel-loader @babel/preset-react
.babelrc
{
"presets": ["@babel/preset-react"]
}
module.exports = {
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
package.json scripts to build"scripts": {
"build": "webpack --mode development"
},
Create a src/components folder and then create your src/components/app.jsx:
(Edit 2021: use functions, not classes!)
import * as React from "react";
export class App extends React.Component {
render() {
return (
<div>
Hello, world!
</div>
);
}
}
src/index.js (note .js, not jsx - webpack wont find the file otherwise, without more configurations):import ReactDOM from "react-dom";
import { App } from "./components/app.jsx";
ReactDOM.render(
<App />,
document.getElementById("root")
);
npm run build
path/to/my/folder/index.html in a modern browserAnd you're done! You can now add any convenient add-ons you wish without any undesirable bloat. I recommend TypeScript.
For anyone reading that need to support older browsers, simply follow these two steps:
npm install @babel/preset-env.babelrc and add @babel/preset-env to your presets:{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
