介绍
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 项目就创建好,所需的一些库给添加上去了。