react项目demo:纯零搭建react项目（不用create-react-app脚手架）
新建目录react-node-demo
react-node-demo下新建package.json文件
终端初始化，执行命令npm init
安装webpack相关依赖webpack webpack-cli webpack-dev-serve
npm i webpack webpack-cli webpack-dev-serve -save-dev
安装react依赖react react-dom
npm i react react-dom
项目下新建src目录
在src目录下新建App.jsx main.js index.html文件
App.jsx文件
import React from "react"export default function App(props){return(hello)
}
main.js文件
import React from "react";
import ReactDOM from 'react-dom/client';import App from './App.jsx';ReactDOM.createRoot(document.getElementById('app')
).render(index.html文件
Document
package.json文件配置
{"name": "react-node-demo","version": "1.0.0","description": "","scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "webpack-dev-server --hot --open --mode development","build": "webpack --config webpack.config.js"},"author": "","license": "ISC","dependencies": {"react": "^18.2.0","react-dom": "^18.2.0"},"devDependencies": {"@babel/core": "^7.20.2","@babel/preset-env": "^7.20.2","@babel/preset-react": "^7.18.6","babel-loader": "^9.1.0","cross-env": "^7.0.3","html-loader": "^4.2.0","html-webpack-plugin": "^5.5.0","webpack": "^5.75.0","webpack-cli": "^5.0.0","webpack-dev-server": "^4.11.1"}
}webpack.config.js文件配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {entry: path.resolve(__dirname,'./src/main.js'), //入口文件mode: 'development',output: {filename: 'bundle.js', //出口文件path: path.resolve(__dirname, 'dist')//打包输出目录},devServer: {port: 9000,//指定端口},module: {rules: [{test: /\.(js|jsx)$/,exclude: /node_modules/,use: {loader: 'babel-loader',}},{test: /\.html$/,use: [{loader: 'html-loader'}]}]},plugins:[new HtmlWebpackPlugin({template: './index.html',filename: './index.html'})]
}错误解决
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: E:\目录\react-node-demo\src\main.js: Support for the experimental syntax ‘jsx’ isn’t currently enabled (8:10):
6 | ReactDOM.createRoot(
7 | document.getElementById(‘app’)
8 | ).render();
在项目目录下新建.babelrc.js文件
module.exports ={presets: [["@babel/preset-react",{development: process.env.BABEL_ENV === "development",},],],
}
详细见babel:https://babeljs.io/docs/en/babel-preset-react.html
目录结构
|-- react-node-demo
|-- .babelrc.js
|-- index.html
|-- package-lock.json
|-- package.json
|-- REMADE.md
|-- webpack.config.js
|-- yarn-error.log
|-- src
|-- App.jsx
|-- main.js
react项目中使用css
安装依赖
npm i style-loader css-loader --save-dev
webpack.config.js配置
module: {rules: [{test: /\.css$/,use: ['style-loader','css-loader']}]},