利用脚手架搭建 react 项目的过程

Minfai
350 阅读4分钟

介绍

React 最早是由 facebook 发起的，是用于构建用户界面的JavaScript库，采用声明范式、虚拟 DOM、使用 JSX、可以进行组件开发、单向数据流等特点。

创建应用

npm install -g create-react-app

首先 cmd 使用 npm install -g create-react-app 命令全局安装 create-react-app 脚手架，可以用于快速搭建 react 项目。

安装的时候可以看到 脚手架会自动帮你安装 react-dom、react-scripts等工具包。

  • react-dom 是 React 的一个扩展库，它提供了操作 DOM 的方法，使得 React 可以将虚拟 DOM 渲染到实际的DOM上。
  • react-scripts 是 React 项目的脚本集合，它包含了一些常用的脚本命令，例如 npm start、npm test和npm run build 等。

image.png

安装完可以使用 create-react-app -V 命令查看是否安装成功，出来的是安装的版本号，证明安装成功了。

image.png

npx create-react-app

接下来就是正式创建 react 项目了

  • npx create-react-app [项目名] 命令创建
  • cd [项目名] 切换到创建的项目目录
  • npm start 运行 react 应用

运行成功后浏览器就会弹出这样一个页面：

image.png

React DevTools

这个时候我们点开控制台会发现这样的提示：

Download the React DevTools for a better development experience:https://reactjs.org/link/react-devtools

image.png 它的意思就是使用 React DevTools，能让你的开发体验更好，那就安装呗。

在 Chrome 浏览器右上方有 三点的图标 →

如果有插件的文件可以直接加载进去： 选择 管理扩展程序 → 打开 开发者模式 → 加载已解压的扩展程序

或者去到应用商店搜索安装。

image.png

image.png

webpack

在我们查看项目目录的好像没看到 webpack、vite这些构建工具的配置文件。

其实在创建项目 npx create-react-app 的时候自动帮我们生成了 node_modules 这个文件夹，点进去看会找到 webpack 的影子。

image.png

是因为 create reacrt app 会将一些复杂的工具封装了起来，例如 webpack，但是有些时候我们想去修改 webpack 中的配置该怎么办。

react 给我们提供了 npm run eject 命令，执行命令来释放 webpack 的配置文件，但是这个操作是不可逆的。

除了eject 我们还可以通过利用react-app-rewired修改或覆盖配置。

路径别名

const lessPlugin = require("craco-less");
const path = require("path")

module.exports = {
  webpack:{
      alias:{
          //__dirname是全局变量.代表获取当前这个文件的绝对路径
          //__dirname=c/desktop/web34/react-mall  + src
          "@":path.resolve(__dirname,"src"), // src 等于 @，写路径为 @/views/home/index
          "@comp":path.resolve(__dirname,"src/components")
      }
  },
  // 插件
  plugins: [
    {
      plugin: lessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            javascriptEnabled: true
          }
        }
      }
    }
  ],
}

Redux

Redux 是一个用于在 React 应用中管理状态的第三方库，它能够使你的 React 组件从 store中读取数据，并且向 store 分发actions 来更新数据，去进行多个组件共享状态。

npm install --save redux

React-Redux

当我们使用 Redux 时，还需要使用 react-redux 来辅助它，React-Redux 是Redux 的官方React绑定库，用于react 连接 Redux。

npm install --save react-redux

react-router-dom 路由

现在的页面大多都是单页面应用，像 vue 就可以使用组件去构建页面的每个部分，切换页面的时候由路由的更换达到切换对应的组件。

而在 react 项目开发中也有着路由的使用，路由其实就是让 URL路径 与 组件 建立连接。

使用npm i react-router-dom 命令安装。

React 打包

当我们做完项目需要打包就可以执行 npm run build。

打包成功会看到根目录出现一个名叫 build 的文件夹

image.png

但是又想观看页面效果，可以执行 npm install -g serve 安装 serve 模块。安装完成后执行 serve -s build 观看效果。

image.png

使用 less

craco

安装 craco 用于修改 webpack 配置， npm i @craco/craco

安装 less npm i less craco-less

package.json 文件修改命令

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

配置 craco.config.js 文件

const lessPlugin = require("craco-less");

module.exports = {
  // 插件
  plugins: [
    {
      plugin: lessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            javascriptEnabled: true
          }
        }
      }
    }
  ],
}

Echarts

npm install echarts --save

// 导入使用 echarts
import * as echarts from 'echarts'

// 初始化Echarts实例，将其挂载到id为main的dom元素上展示 
// let myChart = echarts.init(document.getElementById("main"));
const timerChart = useRef()
let myChart = echarts.init(timerChart.current);
let option = {}
myChart.setOption(option)

<div ref={timerChart} id='timer' className="timer"></div>

插件

当我们使用的编辑器是 vscode 时，可以安装下面的插件，该插件可以在编写 ES6、React 、Redux 以及 React 周边的技术等等的时候有代码提示，能够提高我们的开发效率。

image.png

最后这么一个简单的 react 项目就创建好，所需的一些库给添加上去了。

avatar
文章
阅读
粉丝