react创建项目一般流程_vscode创建react项目

一、创建

1.npm create react-app 项目名称

2.cd 项目  code . 使用vscode打开项目 

3.将src下的所有文件删除   创建一个index.js  和  一个App.js

(index.js中保持简洁  在App.js中写渲染  然后在index.js中引入App.js就好)

4.测试是否可以正常使用：

     旧的写法：使用React-dom来渲染  

     但在react18.0版本中 React不在支持使用ReactDom.render，推荐使用createRoot写法

具体写法如下：App.js中写入以下代码  然后npm run start  查看是否可以正常显示

import { Component } from 'react';
import {
    createRoot
} from 'react-dom/client';
 
class App extends Component {
    render() {
        return (
            <div>hello  world</div>
        )
    }
}
 
const container = document.getElementById('root');
const root = createRoot(container);
root.render( <App/> )

项目跑起来后是可以正常显示页面的

二、目录结构：手动添加部分文件夹

src下添加静态文件夹assets--images和css，views，components等

三、初始化样式（不同浏览器的默认样式不同）

 使用Normalize.css    http://necolas.github.io/normalize.css/

在终端中安装Normalize.css

npm install normalize.css

在index.js中引入即可

import 'normalize.css'

四、配置less（css预编译，方便我们写样式时使用嵌套写法）

（vscode安装有easy less插件的  会自动生成css文件  也可引入css文件）

做法：安装less----》  提交代码到远程仓库---》解包---》webpack中配置less

1.安装less

npm install less@3.11.3 less-loader@6.1.3 -D

2.提交代码（注意：解包前一定要先进行提交代码，因为git会拦截解包过程）

git add .  ---》git commit -m '解包前提交代码'

3.解包：package.json里scripts下的eject就是解包   

解包过程不可逆 解包时会在终端询问是否确认解包 输入y确认解包

npm run eject

4.解包完成后会生成一个config文件夹

4.1 找到webpack.config.js文件

4.2 找到const cssRegex = /\.css$/;这个正则

4.3 在这些style的正则表达式后面追加一项less的正则

// 添加这一项
const lessModuleRegex = /\.less$/;

 结果图：

 4.4 继续在该文件中搜索 sass-loader

 找到后在添加一项less-load

// less加载器 
{
    test: lessModuleRegex,
    use: getStyleLoaders(
        {
            //暂不配置
        },
        'less-loader'
    ),
},

结果图：

 保存  -----》npm run start 重新跑起项目

这样引入样式文件就可以直接less文件了

解包后会出现

Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` environment varia

解决方法：

方法1 直接删除package.json里面的babel配置。

方法2 直接删除package.json里面的eslintConfig配置。