How to manually configure a minimal setup for React without create-react-app?
Preqrequisites:
- Node.js (npm) or yarn installed on your computer or as executable file
So for a pretty minimal setup you'd want to...
- Initialize a folder
cd path/to/my/foldernpm init
- Create an index.html
<!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>- Then you'd want to
npm install --save...
- react
- react-dom
- webpack
- webpack-cli
- @babel/core
- babel-loader
- @babel/preset-react
npm install --save react react-domnpm install --save-dev webpack webpack-cli @babel/core babel-loader @babel/preset-react
- Create
.babelrc
{ "presets": ["@babel/preset-react"]}- Create webpack.config.js
module.exports = { module: { rules: [ { test: /\.jsx?$/, exclude: /node_modules/, use: { loader: "babel-loader" } } ] }};- Edit
package.jsonscripts to build
"scripts": { "build": "webpack --mode development" },- Write your root component
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> ); }}- Write your ReactDOM renderer in
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"));- Build:
npm run build - Open your
path/to/my/folder/index.htmlin a modern browser
And 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- Edit
.babelrcand add @babel/preset-env to your presets:
{ "presets": ["@babel/preset-env", "@babel/preset-react"]}