导读
本教程适合初学者入门，以及很久没有开发过react项目的同学温故知新。由于本人所在公司，大多数同学原来多数是vue技术栈， 在一次项目组会上分享上面，分享了react的项目，因为大厂基本都用react，所以为了提升组员的竞争力。打算写了react从入门到整个项目开发的流程，用来当做培训资源。看官网有点零散，为了节约时间，就出这个教程了。
为什么要学？学了提升自己，说白了，工资高，进大厂必备。各大厂都在用，例如：BAT、字节、美团、银行、拼多多、滴滴。
这个系列教程，都是围绕每天的学习量来，这样轻松，时间多的话，看你个人时间。就当作小白学习笔记，每个案例、步骤都应该敲一下。
学习目标
react是什么react的特点熟练掌握react的基本用法 ★ ★什么是 jsx？jsx如何创建 react 元素 ★ ★jsx中如何使用javascript表达式 {} ★ ★ ★ ★ ★jsx中条件渲染和列表渲染如何编写 ★ ★ ★ ★ ★jsx中如何添加样式 ★ ★ ★ ★ ★
react是什么
React是用于构建用户界面的JavaScript库， [1] 起源于Facebook的内部项目，该公司对市场上所有 JavaScript MVC框架都不满意，决定自行开发一套，用于架设Instagram的网站。于2013年5月开源。
官网：https://zh-hans.reactjs.org/
react特点
声明式设计
以声明式编写 UI，可以让你的代码更加可靠，且方便调试。
const element =
Hello, world!
;组件化
构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。
组件是react里面非常重要内容单个功能可以视为一个组件多个组件组合在一起，构建单个页面的内容或者一个完整web的应用通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中
示例：
图示例不同框框可以看作不同的组件，最后组合在一起
一次学习，跨平台编写
无论你现在使用什么技术栈，在无需重写现有代码的前提下，通过引入React 来开发新功能。 React ，或使用 React Native 开发原生移动应用。
使用 react可以开发Web应用，包括PC端、移动端、混合式 APP、还可以使用 Node 进行服务器渲染使用 react可以开发移动端原生应用（react-native）RN安卓 和 ios应用 （flutter也是可以开发安卓和IOS，不过使用dart语言写）
开发环境及工具介绍
开发环境
Node.js
在开发 React 应用前，需要先安装 Node.js。Node.js 的官方下载地址为 https://nodejs.org 。本书使用的 Node.js 的版本号为 v16.13.1，建议 Node >= 14.0.0 和 npm >= 5.6。安装好 Node.js 自带安装 npm。
安装 React项目依赖，通常需要 npm install xxx 安装相关依赖模块，进行项目开发。
Yarn (可选)
Yarn 是 Facebook, Google, Exponent 和 Tilde 开发的一款新的 JavaScript 包管理工具，相类似 npm 包管理工具。国内下载地址 https://www.yarnpkg.cn ， npm 和yarn 对比，我就不一一叙述了，不过个人喜欢用yarn，因为在国内比较快，看个人喜欢。
举个例子： 我想安装一个模块叫 xxx，用 npm 安装方式命令 npm install xxx，用 yarn 安装方式 yarn add xxx。
开发工具介绍
VS Code 编辑器：Visual Studio Code（简称“VS Code” ）是微软出得一款免费编辑器，不过对小白有一点麻烦就是需要什么功能就要安装对应的插件。
webstrom：JetBrains公司的编辑器，很好很强大，功能非常齐全，不需要我们再安装什么插件。开箱即用，就是有一个麻烦，就是要钱！！！
本教程使用 VS code 来开发
React脚手架（cli）
什么是脚手架？例如在家里建房子，建高楼层的时候，都需要建起一些架子在外围，方便施工。那我们开发应用的时候，脚手架相当于为开发项目而搭的基础设施。盖楼的脚手架，工人可以站起来拧螺丝，可以坐着抽烟，躺着睡觉、等等，那 React 的脚手架，在前端项目里面功能可大了
React 的脚手架作用：
各种开发、生产环境的依赖工具：webpack、babel、eslint、sass/less/postcss 等等开发阶段、项目发布，配置不同
项目开始前，帮你搭好架子，省去繁琐的 webpack 配置项目开发时，热更新、格式化代码、git 提交时自动校验代码格式等项目发布时，一键自动打包，包括：代码压缩、优化、按需加载等。 反正一句话，脚手架开箱即用，非常方便开发，日后开发随着业务和项目变大变多，我们再拓展脚手架功能，但是普通项目的开发是目前官方的足够用。
脚手架安装
配置环境完成后，执行下面命令
npx create-react-app my-app
cd my-app
npm start
命令：npx create-react-app my-app
npx create-react-app 是固定命令，create-react-app 是 React 官方脚手架的名称my-app 表示项目名称，自主命名，随便修改都行 启动项目：yarn start or npm startnpx 是 npm v5.2 版本新添加的命令，用来简化 npm 中工具包的使用。
原来过程：1、 全局安装npm i -g create-react-app 2、 在通过脚手架的命令来创建 React 项目现在：npx 调用最新的 create-react-app 直接创建 React 项目反正就是为了方便我们开发。更多这个npx命令了解
脚手架调整
当前脚手架项目结构
my-app/
README.md
node_modules/
package.json
.gitignore
public/
favicon.ico
index.html
manifest.json
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
脚手架说明与调整
src目录是我们项目开发的文件夹，删除原有src文件里面的文件删掉src里面的文件后，创建index.js作为项目的入口查看 package.json 两个核心库：react、react-dom（脚手架自带，我们直接用）
React基本使用
基本步骤
创建index.js文件导入react和react-dom
react: React 的核心库react-dom: 提供与 DOM 相关的功能 // 导入react和react-dom
import React from 'react'
// import ReactDOM from 'react-dom' // react v18.0版本前，这样引入的
// react v18.0版本前
import ReactDOM from 'react-dom/client';
创建react元素
// 创建 react元素， 表示创建了一个h1标签，属性为null，文本叫 Hello World!
// 这是 命令式！
const text = React.createElement('h1', null, 'Hello World!')
// 这是 声明式！与上面表示一样的意思，这种是JSX写法
// const text =
hello world!
渲染 react 元素到页面上
// 渲染 react 元素到页面上
// ReactDOM.render(text, document.getElementById('root')) // react v18.0版本前写法
// react v18.0版本
ReactDOM.createRoot(document.getElementById('root')).render(text);
//
ReactDOM.createRoot ，表示以 root 为一个根节点 ，然后把 text内容渲染到这个根目录上，root在哪里能找到呢？ 其实在 public -> index.html上面就有 id 为 root。开发时候脚手架自动把入口文件内容渲染到这个 index.html 页面里面
打开浏览器 http://localhost:3000/ 就会输出：
Hello World!
总结：在简单小例子中，我们看到了命令式和JSX声明式表示同样的意思，明显就是声明式更方便阅读，也是我们熟悉的 html 写法 **
JSX语法糖
JSX的基本使用
createElement的问题
使用react中的createElement创建react元素，有以下问题。
繁琐不简洁不直观，无法一眼看出所描述的结构，看起来好乱，多了的情况下，都无法入手改动。开发体验非常不好
JSX简介
JSX是JavaScript XML的简写，表示了在Javascript代码中写XML(HTML)风格的代码
推荐使用 JSX，优点：
声明式语法更加直观，与HTML结构相同，降低学习成本，提高开发效率 ！！！JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化它是类型安全的，在编译过程中就能发现错误使用 JSX 编写模板更加简单快速…
JSX语法对使用React来说并不是必需的，实际上，JSX语法只是React.createElement(component,props, …children)的语法糖，所有的JSX语法最终都会被转换成对这个方法的调用，，JSX语法对使用React来说并不是必需的，实际上，JSX语法只是React.createElement(component,props, …children)的语法糖，所有的JSX语法最终都会被转换成对这个方法的调用
示例： 使用jsx语法糖 创建react元素 ，同样的意思，不同的写法，jsx写法更直观，简单
// 1、第一种写法 createElement 这是 命令式！
const text = React.createElement('h1', null, 'Hello World!')
// 1、第二种写法，JSX写法。最后经过babel转换后，变成了第一种写法给浏览器识别。
// 我们无需关心怎么转换，我们直接写 JSX语法就行了
const text =
hello world!
JSX是react的核心内容
注意：JSX 不是标准的 JS 语法，是 JS 的语法扩展。脚手架中内置的 @babel/plugin-transform-react-jsx 包，用来解析该语法。
什么意思？就是说 JSX 不是 js 的标准语法，不能说 JSX 是 JavaScript，而是js的语法拓展，需要使用到babel插件转化成为标准的 JavaScript 语法。
简单描述就是，我们在 js 文件写 JSX 语法，脚手架的构建工具以及 babel 自动帮我们转换为标准的JavaScript ，这样浏览器才能识别。
重新改一下例子：
创建index.js文件导入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom/client';
创建react元素
// 这是声明式！JSX写法
const text =
hello world!
渲染 react 元素到页面上
ReactDOM.createRoot(document.getElementById('root')).render(text);
JSX 注意点
由于 JSX 就是 JavaScript拓展，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代，React DOM 使用 className 和 htmlFor 来做对应的属性。
class =====> classNamefor ========> htmlFor 项目里只能在脚手架中才能使用 jsx 语法，因为普通浏览器不认识 JSX 语法糖，需要 bable 转换才认识，我们脚手架默认自带了 babel没有子节点的元素可以使用/>结束JSX可以换行，如果JSX有多行，推荐使用()包裹JSX，防止自动插入分号的bugJSX必须要有一个根节点， <>
使用 prettier 插件格式化react代码
首先安装vscode的插件prettier-vscode 安装成功后，编辑器默认的格式化处理就会被prettier代替， 默认快捷键是alt + shift + f
想更多写代码的方便，格式化的内容，可以百度一下 prettier 配置。
JSX 中嵌入 JavaScript 表达式
我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中
基本用法
const obj = {
name: '程序员米粉',
age: 18
};
const text =
姓名: {obj.name}, 年龄：{obj.age}
;加减运算
const text =
{ 1 + 1}
;三元运算符
在 JSX 中不能使用 if else 语句
const obj = {
name: '程序员米粉',
age: 18
};
const text =
程序员米粉年龄是否大于18：{obj.age > 18 ? '是' : '否'}
;JSX注释语句
{/* 这是jsx中的注释 */}
条件渲染
在react中，一切都是javascript，所以条件渲染都可以js来控制的
通过判断if/else控制
const isLoding = false;
const loadData = () => {
if (isLoding) {
return
} else {
return
}
}
const title =
通过三元运算符控制
const isLoding = false;
const loadData = () => {
return isLoding ? (
) : (
)
}
逻辑运算符
const isLoding = false;
const loadData = () => {
return isLoding &&
}
const title =
数组渲染
普通渲染
const arr = [
程序员米粉
,JSX 666
]
const text =
ReactDOM.createRoot(document.getElementById('root')).render(text);
使用map进行数组渲染
const list = ['程序员米粉', '哈喽', '老鼠爱大米']
const li = list.map(item =>
const text =
- {li}
ReactDOM.createRoot(document.getElementById('root')).render(text);
使用JSX渲染
const list = ['程序员米粉', '哈喽', '老鼠爱大米']
const text =
- {list.map(item =>
- {item} )}
ReactDOM.createRoot(document.getElementById('root')).render(text);
使用key
const list = [ '程序员米粉', '哈喽', '老鼠爱大米' ];
const text =
- {
- {item} )
list.map((item) =>
}
ReactDOM.createRoot(document.getElementById('root')).render(text);
注意：列表渲染时应该给重复渲染的元素添加key属性，key属性的值要保证唯一
注意：key值避免使用index下标，因为下标会发生改变
样式处理
行内样式
const myStyle = {
fontSize: 100,
color: '#FF0000'
};
const text =
ReactDOM.createRoot(document.getElementById('root')).render(text);
// 或者， 注意不是单个{}，是双，一个{}表示表达式，一个是表示对象{}
const text =
ReactDOM.createRoot(document.getElementById('root')).render(text);
外部样式 + 类名
// 在index.js引入 css
import './base.css'
const arr = [
程序员米粉
,JSX 666
]
const text =
// base.css样式
.box-name {
color: red;
text-align: center;
background-color: pink;
}
结语
希望看完这篇文章对你有帮助
文中如有错误，欢迎在评论区指正，如果这篇文章帮助到了你，欢迎点赞和关注，后续会输出更好的分享。
欢迎关注公众号：【程序员米粉】 公众号分享开发编程、职场晋升、大厂面试经验