第1节——react 介绍及手脚架安装

React是一个用于构建用户界面的JavaScript库。它采用组件化的方式，使开发者可以将应用程序拆分为独立且可复用的部分，从而提高开发效率和代码可维护性。React还使用虚拟DOM（Virtual DOM）来管理界面的更新，通过只更新变化的部分，减少了对真实DOM的操作，提高了性能。

要安装React，首先你需要在电脑上安装Node.js和npm（Node包管理器）。然后，你可以使用create-react-app来快速搭建一个React应用的起始模板。执行以下命令来安装create-react-app:

npx create-react-app my-app

上述命令会创建一个名为"my-app"的文件夹，并在其中安装React的初始文件和依赖项。安装完成后，执行以下命令进入应用目录：

cd my-app

然后，你可以使用以下命令运行React应用：

npm start

上述命令会启动开发服务器，并在浏览器中打开应用。现在，你就可以开始编写React组件和构建你的应用了。

官方文档： https://beta.reactjs.org/
一、介绍
React由Facebook（现在叫 meta） 的软件工程师Jordan Walke创建。2013年的时候在社区开源。那么react是什么呢？React是一个把数据渲染为HTML视图的开源JavaScript 库 [ 视图层框架 ] 。React为程序员提供了一种子组件不能直接影响外层组件的模型 [ 单向数据流 ]，数据改变时会对HTML文档进行有效的更新。
二、特点
声明式
React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React 能高效更新并渲染合适的组件。以声明式编写 UI，可以让你的代码更加可靠，且方便调试。
组件化
构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。由于组件逻辑使用 JavaScript 编写而非模板，因此你可以轻松地在应用中传递数据，并保持状态与 DOM 分离。
跨平台
无论你现在使用什么技术栈，在无需重写现有代码的前提下，通过引入 React 来开发新功能。
React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用
三、安装
基于react脚手架
1、全局安装react 脚手架 create-react-app
npm install create-react-app -g
2、使用create-react-app 创建 react应用，如果直接使用npx则无需执行这一步，直接执行第3步
create-react-app my-app
3、进入刚创建的目录，然后启动项目，即可看到第一个react页面

进入创建的目录

cd my-app

启动react

npm run start
4、目录介绍
my-app/
README.md

项目第三方依赖包

node_modules/

package.json

一般用来存放静态依赖

public/
index.html
favicon.ico

存放项目源代码，注意只有放在scr目录下的文件才会被webpack打包

src/
App.css
App.js
App.test.js
index.css
# 入口文件
index.js
logo.svg
5、个别文件说明
web vitals, 谷歌推的，统一测试指标

四、基于create-react-app二次封装webpack（了解）
实际项目中，如果非必要，尽量不要使用eject暴漏配置文件
1、暴露出config目录
在根目录下执行
npm run eject
执行后，会在项目的根目录下出现一个config目录这个目录就是create-react-app脚手架的配置目录

2、webpack.config目录介绍
五、配置路径别名@
在webpack.config中添加
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
‘react-native’: ‘react-native-web’,
// Allows for better profiling with ReactDevTools
…(isEnvProductionProfile && {
‘react-dom$’: ‘react-dom/profiling’,
‘scheduler/tracing’: ‘scheduler/tracing-profiling’,
}),
…(modules.webpackAliases || {}),
// 添加路径
‘@’: path.resolve(__dirname, ‘…/src’)
},

官方文档： https://beta.reactjs.org/
一、介绍
React由Facebook（现在叫 meta） 的软件工程师Jordan Walke创建。2013年的时候在社区开源。那么react是什么呢？React是一个把数据渲染为HTML视图的开源JavaScript 库 [ 视图层框架 ] 。React为程序员提供了一种子组件不能直接影响外层组件的模型 [ 单向数据流 ]，数据改变时会对HTML文档进行有效的更新。
二、特点
声明式
React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React 能高效更新并渲染合适的组件。以声明式编写 UI，可以让你的代码更加可靠，且方便调试。
组件化
构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。由于组件逻辑使用 JavaScript 编写而非模板，因此你可以轻松地在应用中传递数据，并保持状态与 DOM 分离。
跨平台
无论你现在使用什么技术栈，在无需重写现有代码的前提下，通过引入 React 来开发新功能。
React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用
三、安装
基于react脚手架
1、全局安装react 脚手架 create-react-app
npm install create-react-app -g
2、使用create-react-app 创建 react应用，如果直接使用npx则无需执行这一步，直接执行第3步
create-react-app my-app
3、进入刚创建的目录，然后启动项目，即可看到第一个react页面

进入创建的目录

cd my-app

启动react

npm run start
4、目录介绍
my-app/
README.md

项目第三方依赖包

node_modules/

package.json

一般用来存放静态依赖

public/
index.html
favicon.ico

存放项目源代码，注意只有放在scr目录下的文件才会被webpack打包

src/
App.css
App.js
App.test.js
index.css
# 入口文件
index.js
logo.svg
5、个别文件说明
web vitals, 谷歌推的，统一测试指标

四、基于create-react-app二次封装webpack（了解）
实际项目中，如果非必要，尽量不要使用eject暴漏配置文件
1、暴露出config目录
在根目录下执行
npm run eject
执行后，会在项目的根目录下出现一个config目录这个目录就是create-react-app脚手架的配置目录

2、webpack.config目录介绍
五、配置路径别名@
在webpack.config中添加
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
‘react-native’: ‘react-native-web’,
// Allows for better profiling with ReactDevTools
…(isEnvProductionProfile && {
‘react-dom$’: ‘react-dom/profiling’,
‘scheduler/tracing’: ‘scheduler/tracing-profiling’,
}),
…(modules.webpackAliases || {}),
// 添加路径
‘@’: path.resolve(__dirname, ‘…/src’)
},