Why this post?
It's very easy to create react app with terminal by following these commands.
npx create-react-app my-app
cd my-app
npm start
easy right? However, there is a possibility that we don't no what is running behind the scene. What components are required in order to get our react app working. So that's what we see in this post. How you can make a react app from scratch.
In order to get this going, we need npm installed in your system
Steps
Create a directory in your system
mkdir my-app
go to the directory
cd my-app
create package.json file
npm init -y
npm init will create new package.json file
Flag -y will tell npm to use all default config option while creating package.json
install react and react-dom
npm install react react-dom
Use: it will add react and react-dom under dependencies in package.json file as well as it create node_modules directory with all other dependent libraries in it.
create gitIgnore to avoid pushing unnecessary code to github
vim .gitignore
possible items you need in your gitignore file are
node_modules
.DS_Store -- If you're on mac machine
dist
dist (Distribution folder)-- is a build directory which is generated by webpack and babel when we build our code. So we dont want this folder to go along as it generates on the by compilers for the production app.
create app folder
mkdir app
create two files within it.
touch index.js index.css
Start writing your hello world react application
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
class App extends React.Component{
render(){
return(
<div>Hello World</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'))
So when you try to run this code in the browser it will give an error as the our code is written in JSX and browser does not understand it.
So this is the point where Babel and Webpack comes into play.
To install all required dependency for these two run following command from your terminal.
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader html-webpack-plugin
Flag --save-dev : we use this flag to differentiate out build dependencies than our app dependencies
You can check your package.json file in order to see how this flag differentiate in that.
Webpack configurations
Webpack is module bundler. So currently we only have on module. However, as our app expands we will have more modules. So webpack intelligently bind all those modules together and creates one single file which serves all these.
touch webpack.config.js
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry : './app/index.js',
output : {
path : path.resolve(__dirname , 'dist'),
filename: 'index_bundle.js'
},
module : {
rules : [
{test : /\.(js)$/, use:'babel-loader'},
{test : /\.css$/, use:['style-loader', 'css-loader']}
]
},
mode:'development',
plugins : [
new HtmlWebpackPlugin ({
template : 'app/index.html'
})
]
}
How to configure webpack check out my previous post
in conjuction with out babel-loader works we have to add babel preset config to our package.json file
"main": "index.js",
"babel":{
"presets" : [
"@babel/preset-env",
"@babel/preset-react"
]
}
To run the build we have to add webpack to our script tag in our package.json
"main": "index.js",
"babel":{
"presets" : [
"@babel/preset-env",
"@babel/preset-react"
]
},
"scripts": {
"create": "webpack"
},
So when i run npm run create from terminal it will run the webpack which will create the dist folder and our bundle file with index.html file.
It's hassle to run webpack every time. So you can start a webpack dev server. so it will start build your code as soon as you run it. modify your script in package.json with following
"scripts": {
"start": "webpack-dev-server --open"
}
Now when you run npm run start it will start the dev server and open your app in the browser.
Final directory structure will look like this
Gist
conclusion
we create our simple app component, render that app component in element which has id as 'app'. Webpack takes all the modules in our application starts from index.html, run through all the transformations. like babel-loader, css-loader, styles-loader. Babel loader uses env and react presets to support older browsers and spit the entire code out in dist folder which we can use it to deploy in the production environment.
Top comments (24)
Thank you, thank you, thank you. I was using the create react app npm module and it's too much for what I currently need in my react learning path. I also I like to have a certain degree of control over my app structure.
Glad you find it useful
I'm still new to managing npm modules/packages. I've been thinking about the package.json - One thing I wonder is: Should edits to the package.json be mainly automated through installations and other configuration options invoked or is a lot of time spent manually editing packages.json for config in some cases?
in my opinion, I would not do that. I will install the libraries as i needed and add --save or --dev-save flags accordingly. So it will added automatically to the package.json file. I am sure you're aware of it. For sure you can add manage it manually if needed. I am not doing it so far as my workflows concerned.
Yeah, just by scrolling through it I got the vibe that it's not common to manually edit. Thanks for replying. :D
Good job! Really useful!
I have a question though, how can I access the app from another machine? I know that while using create-react-app it is possible to access is from a adress, but it does not seem to work at the same way when installing webpack manually...
Awesome step-by-step guide! I bookmarked it a few months ago and came back to it many times since.
There's only one thing missing (no big deal). You don't mention the creation of index.html at any point in the guide (it's listed below with all the files below though).
thanks .. it's awesome
I think you forgot add html-loader to webpack.config.js. it was didn't loading template without html-loader.
Thanks for this post! I've used create-react-app as a crutch for far too long. I finally built a react app using your article as a guide. Keep at it!
Glad it helps
Hi,
Very good, may I ask how to make it works in IE11?
I tried to use polyfill but I have no success.
Got this error in IE11: " Object doesn't support property or method 'entries'"
Any idea?
Thanks
Yes, creation of index.html step is not mentioned as well as If you're using webpack-cli 4 or webpack 5, change webpack-dev-server to webpack serve. Otherwise, was great intro to react for me. thanks
thanks. this article helped me recap all this react.js stuff!
Wonderful post, you rock dude!!
Excellent
Thanks, I always have to remove eslint when ever I use the npx create
Well explained ! Gonna go try this way right now.
Awesome...thankx for sharing...but i have a question: why did put the "dist" folder in your .gitignore file ?
I think every time when you create build it will generate this dist folder automatically.
Thx for this post!