Difference between revisions of "React Setup"
Jump to navigation
Jump to search
| Line 56: | Line 56: | ||
} | } | ||
</pre> | </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-dev-server --open --hot --mode development", | |||
"build": "webpack --mode production" | |||
}, | |||
</pre> | |||
npx create-react-app my-app # this does not install it globally | npx create-react-app my-app # this does not install it globally | ||
cd my-app | cd my-app | ||
Revision as of 21:22, 10 February 2021
- 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 webpack webpack-cli webpack-dev-server
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