How to create a React App without create-react-app
create-react-app has been always a lightweight way to bootstrap any React project especially for beginners, however, if you have dived into react, you may need to set-up your app from scratch. So, in this tutorial, we will be guiding you to properly configure it.
Prerequisites:
- npm or yarn
So for a pretty minimal setup, you’d want to :
- Initialize a folder
mkdir foldercd /foldernpm init -y
2. Create index.html under /dist folder
<!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>3. Then you’d want to
npm install react react-dom
yarn add react react-dom//Dev_Dependenciesnpm install --save-dev @babel/preset-env react-hot-loader webpack webpack-cli webpack-dev-server @babel/core @babel/preset-react babel-loaderyarn add --save-dev react-hot-loader webpack webpack-cli webpack-dev-server @babel/core @babel/preset-react @babel/preset-env babel-loader
Package.json
4. Create .babelrc
{"presets": ["@babel/preset-env","@babel/preset-react"
]}
5. Create webpack.config.js
6. Build your root component
Create a src/ folder and then create your app.jsx:
7. Write your ReactDOM renderer in src/index.js (note .js, not jsx - webpack won't find the file otherwise, without more configurations):
The easiest way to handle an incoming update is by self-accepting it from the changed module. This will cause webpack to execute the new version of the module. All we need to add module.hot.accept();
And congratulations, your react application has been created and configured.
To start the application : npm start
I hope this has been a fruitful read for you. For any questions, ask in the comments below.
Happy coding!
This has been developed by myself at eDonec
