Difference between revisions of "React Setup"

From rbachwiki
Jump to navigation Jump to search
 
(15 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 --
=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 webpack webpack-cli webpack-dev-server
  npm install --save-dev webpack webpack-dev-server webpack-cli
 
'''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 />


code . # will open visual studio code in that directory
=initialize babel and webpack files=
''' Create a 'src' folder '''
# on the root dir create a file
''' create an 'index.html and index.js' in the src folder '''
.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"
                    }
                ]
            }


npx create-react-app my-app # this does not install it globally
        ]
cd my-app
 
npm start
    },
    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"


Check if npm is installed
  },
npm --version
</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

  1. 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"

  },
Retrieved from "https://www.r512.com/index.php?title=React_Setup&oldid=2035"