react项目的基本搭建

搭建react项目

首先具备安装node

1. 创建一个文件夹 react

2. 在文件夹中初始化 npm init -y

3. 创建src目录 在目录下面创建两个文件 一个 index.html mina.js

4. 安装 cnpm i webpack webpack-cli webpack-dev-server -D

5. 在package.json中的scripts 中 添加 “dev”: “webpack-dev-server”

6. // 安装jsx 语法解析器以及react 还有reactdom
   cnpm i react react-dom -S
   cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
   cnpm i babel-preset-env babel-preset-stage-0 babel-preset-react -D
   
   

7. 在根目录创建webpack.config.js

   const path = require('path')
   const htmlW = require('html-webpack-plugin')
   const Html = new htmlW({
       template:path.join(__dirname,"./src/index.html"),
       filename:'index.html'
   })
   module.exports = {
       mode:'development',
       module:{
           rules:[
               {test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/}
           ]
         
       },
       plugins:[Html]
   }
   

8. 在根目录中创建.balbelrc文件

   {
       "presets": ["env", "stage-1", "stage-0", "react"],
       "plugins": ["transform-runtime"]
   }
   

9. 在index.js中直接导入react react-dom

   import React from 'react'
   import ReactDom from 'react-dom'
   
   function Div () {
       return <h1> 3333333333333 </h1>
   }
   ReactDom.render(<div>
       <Div></Div>
   </div>,document.getElementById("app"))
   
   
   

10. 直接npm run dev 就可以正常启