React Setup
- Install Node
- React dev tools for Chrome (optional)
Setting up a react project
npm init -y # npm install react react-dom npm install @babel/core babel-loader @babel/preset-env @babel/preset-react npm install --save-dev webpack webpack-dev-server webpack-cli
code . # will open visual studio code in that directory
Create a 'src' folder in the project folder
mkdir src
create an 'index.html and index.js' in the src folder
initialize babel and webpack files
- on the root dir create a file
.bablerc and wepback.config.js
Edit the .bablerc file
{
"presets":["@babel/preset-env", "@babel/react"]
}
Install some webpack helpers
npm install html-loader html-webpack-plugin
Edit the webpack.config.js file
const HtmlWebPackPlugin = require("html-webpack-plugin")
module.exports = {
module:{
rules:[
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use:{
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
}
]
},
plugins:[
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
}
Edit index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React App</title>
</head>
<body>
<div id="root"> </div>
</body>
</html>
Edit the index.js file
Modify the package.json to run the server script to view the page
I only modified the script section
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --open --hot --mode development",
"build": "webpack --mode production"
},
npx create-react-app my-app # this does not install it globally cd my-app npm start
Check if npm is installed
npm --version