Difference between revisions of "React Setup"

From rbachwiki
Jump to navigation Jump to search
Line 25: Line 25:
<pre>
<pre>
  const HtmlWebPackPlugin = require("html-webpack-plugin")
  const HtmlWebPackPlugin = require("html-webpack-plugin")
module.exports = {
module.exports = {
     module:{
     module:{
         rules:[
         rules:[
Line 43: Line 43:
                 ]
                 ]
             }
             }
         ]
         ]
     }
     }
}
 
}
</pre>
</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

Revision as of 20:12, 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

  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"
                    }
                ]
            }

        ]

    }

}
npx create-react-app my-app # this does not install it globally
cd my-app
npm start

Check if npm is installed

npm --version