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

介绍

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 等。

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

npx create-react-app

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

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

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

React DevTools

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

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

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

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

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

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

webpack

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

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

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

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

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

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 的文件夹

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

插件

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

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

相关推荐
慧一居士21 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead23 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409198 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app