react创建项目一般流程

weixin_heye

已于 2023-04-18 15:45:08 修改

阅读量618

点赞数

文章标签： react.js javascript 前端

于 2023-04-18 15:02:23 首次发布

本文链接：https://blog.csdn.net/weixin_45835723/article/details/130218881

版权

一、创建

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配置。