Difference between revisions of "React Setup"
Jump to navigation
Jump to search
| (One intermediate revision by the same user not shown) | |||
| Line 1: | Line 1: | ||
= Create a react app with all the dependency needed = | |||
''' This is the easy way to start a react project automatically without setting up all the pieces''' | |||
npx create-react-app my-app # this does not install it globally | |||
cd my-app | |||
npm start | |||
Check if npm is installed | |||
npm --version | |||
= Manual setup of a React App= | |||
* Install Node | * Install Node | ||
* React dev tools for Chrome (optional) | * React dev tools for Chrome (optional) | ||
| Line 86: | Line 98: | ||
}, | }, | ||
</pre> | </pre> | ||
Latest revision as of 17:37, 15 February 2021
Create a react app with all the dependency needed
This is the easy way to start a react project automatically without setting up all the pieces
npx create-react-app my-app # this does not install it globally cd my-app npm start
Check if npm is installed
npm --version
Manual setup of a React App
- 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 serve",
"build": "webpack --mode production"
},