Difference between revisions of "React Setup"
Jump to navigation
Jump to search
| (18 intermediate revisions 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) | ||
=Setting up a react project= | |||
npm init -y # | npm init -y # | ||
npm install react react-dom | npm install react react-dom | ||
npm install @babel/core babel-loader @babel/preset-env @babel/preset-react | npm install @babel/core babel-loader @babel/preset-env @babel/preset-react | ||
npm install --save-dev webpack webpack-dev-server webpack-cli | |||
npm start | '''code . # will open visual studio code in that directory''' <br /> | ||
''' Create a 'src' folder in the project folder''' <br /> | |||
mkdir src | |||
''' create an 'index.html and index.js' in the src folder ''' <br /> | |||
=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"] | |||
} | |||
<br /> | |||
== Install some webpack helpers == | |||
npm install html-loader html-webpack-plugin | |||
=== Edit the webpack.config.js file === | |||
<pre> | |||
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" | |||
}) | |||
] | |||
} | |||
</pre> | |||
== Edit index.html file == | |||
<pre> | |||
<!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> | |||
</pre> | |||
==Edit the index.js file== | |||
<pre> | |||
</pre> | |||
== Modify the package.json to run the server script to view the page== | |||
'''I only modified the script section''' | |||
<pre> | |||
"scripts": { | |||
"test": "echo \"Error: no test specified\" && exit 1", | |||
"start": "webpack serve", | |||
"build": "webpack --mode production" | |||
}, | |||
</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"
},