导读

本教程适合初学者入门，以及很久没有开发过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 = <h1>Hello, world!</h1>;

组件化

构建管理自身状态的封装组件，然后对其组合以构成复杂的 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 start
npx 是 npm v5.2 版本新添加的命令，用来简化 npm 中工具包的使用。
- 原来过程：1、全局安装npm i -g create-react-app 2、在通过脚手架的命令来创建 React 项目
- 现在：npx 调用最新的 create-react-app 直接创建 React 项目
- 反正就是为了方便我们开发。更多这个npx命令了解

脚手架调整

当前脚手架项目结构

my-app/README.mdnode_modules/package.json.gitignorepublic/favicon.icoindex.htmlmanifest.jsonsrc/App.cssApp.jsApp.test.jsindex.cssindex.jslogo.svg

脚手架说明与调整
- src目录是我们项目开发的文件夹，删除原有src文件里面的文件
- 删掉src里面的文件后，创建index.js作为项目的入口
- 查看 package.json 两个核心库：react、react-dom（脚手架自带，我们直接用）

React基本使用

基本步骤

创建index.js文件导入react和react-dom

react: React 的核心库
react-dom: 提供与 DOM 相关的功能

  // 导入react和react-domimport 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 = <h1>hello world!</h1>

渲染 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 = <h1>hello world!</h1>

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 = <h1>hello world!</h1>

渲染 react 元素到页面上

  ReactDOM.createRoot(document.getElementById('root')).render(text);

JSX 注意点

由于 JSX 就是 JavaScript拓展，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代，React DOM 使用 className 和 htmlFor 来做对应的属性。
- class =====> className
- for ========> htmlFor
项目里只能在脚手架中才能使用 jsx 语法，因为普通浏览器不认识 JSX 语法糖，需要 bable 转换才认识，我们脚手架默认自带了 babel
没有子节点的元素可以使用/>结束
JSX可以换行，如果JSX有多行，推荐使用()包裹JSX，防止自动插入分号的bug
JSX必须要有一个根节点， <></>

使用 prettier 插件格式化react代码

首先安装vscode的插件prettier-vscode
安装成功后，编辑器默认的格式化处理就会被prettier代替，默认快捷键是alt + shift + f

想更多写代码的方便，格式化的内容，可以百度一下 prettier 配置。

JSX 中嵌入 JavaScript 表达式

我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中

基本用法

const obj = {name: '程序员米粉',age: 18
};const text = <h1>姓名: {obj.name}, 年龄：{obj.age}</h1>;

加减运算

const text = <h1>{ 1 + 1}</h1>;

三元运算符

在 JSX 中不能使用 if else 语句

const obj = {name: '程序员米粉',age: 18
};
const text = <h1>程序员米粉年龄是否大于18：{obj.age > 18 ? '是' : '否'}</h1>;

JSX注释语句

{/* 这是jsx中的注释 */}

条件渲染

在react中，一切都是javascript，所以条件渲染都可以js来控制的

通过判断if/else控制

const isLoding = false;
const loadData = () => {if (isLoding) {return <div>加载中.....</div>} else {return <div>加载完成，xxx</div>}
}const title = <div>条件渲染：{loadData()}</div>

通过三元运算符控制

const isLoding = false;
const loadData = () => {return isLoding ? (<div>加载中.....</div>) : (<div>加载完成，xxx</div>)
}

逻辑运算符

const isLoding = false;
const loadData = () => {return isLoding && <div>加载中...</div>
}const title = <div>条件渲染：{loadData()}</div>

数组渲染

普通渲染

const arr = [<h1>程序员米粉</h1>,<p>JSX 666</p>
]
const text = <div>{arr}</div>
ReactDOM.createRoot(document.getElementById('root')).render(text);

使用map进行数组渲染

const list = ['程序员米粉', '哈喽', '老鼠爱大米']
const li = list.map(item => <li>{item}</li>)
const text = <ul className="box-name">{li}</ul>
ReactDOM.createRoot(document.getElementById('root')).render(text);

使用JSX渲染

const list = ['程序员米粉', '哈喽', '老鼠爱大米']
const text = <ul className="box-name">{list.map(item => <li>{item}</li>)}</ul>
ReactDOM.createRoot(document.getElementById('root')).render(text);

使用key

const list = [ '程序员米粉', '哈喽', '老鼠爱大米' ];
const text = <ul className="box-name">{list.map((item) => <li key={item}>{item}</li>)}</ul>;
ReactDOM.createRoot(document.getElementById('root')).render(text);

注意：列表渲染时应该给重复渲染的元素添加key属性，key属性的值要保证唯一

注意：key值避免使用index下标，因为下标会发生改变

样式处理

行内样式

const myStyle = {fontSize: 100,color: '#FF0000'
};
const text = <div style={myStyle}>{arr}</div>;
ReactDOM.createRoot(document.getElementById('root')).render(text);// 或者， 注意不是单个{}，是双，一个{}表示表达式，一个是表示对象{}
const text = <div style={{ fontSize: 100, color: '#FF0000' }}>{arr}</div>;
ReactDOM.createRoot(document.getElementById('root')).render(text);

外部样式 + 类名

// 在index.js引入 css
import './base.css'
const arr = [<h1>程序员米粉</h1>,<p>JSX 666</p>
]
const text = <div className="box-name">{arr}</div>

// base.css样式
.box-name {color: red;text-align: center;background-color: pink;
}

结语

希望看完这篇文章对你有帮助

文中如有错误，欢迎在评论区指正，如果这篇文章帮助到了你，欢迎点赞和关注，后续会输出更好的分享。

欢迎关注公众号：【程序员米粉】
公众号分享开发编程、职场晋升、大厂面试经验

【一起进大厂】7天掌握react基础系列（1）相关推荐

[React 基础系列] 受控表单 vs 不受控表单
[React 基础系列] 受控表单 vs 不受控表单受控表单 refs 不受控表单不受控组件总结之前的学习部分带了一些表单内容的使用--之前的案例基本上是用的都是 input,接下来就学习一下 ...
前端年后面试真题，会80%直接进大厂
前端基础 javascript 原型链(点击这里查看) 继承作用域闭包变量提升 this的指向立即执行函数 instanceof原理 bind的实现 apply和call 柯里化 v8垃圾回收 ...
精通Zookeeper系列开篇：进大厂不得不学的分布式协同利器！
最近,有很多小伙伴让我更新一些Zookeeper的文章,正好也趁着清明假期把之前自己工作过程当中总结的Zookeeper知识点梳理了一番,打算写一个[精通Zookeeper系列],希望能够帮助小伙伴们 ...
编程入门到进大厂，你需要这套学习架构
我相信大多数学习编程的同学都有着对大公司的憧憬.技术.声望.薪资.福利,这些都足以成为吸引你进入大厂的理由. 但是,如何进入大厂呢? 对于很多同学来说,通往大厂的道路并不明朗,不知道是否有希望,也不知 ...
《我想进大厂》之mysql夺命连环13问
想进大厂,mysql不会那可不行,来接受mysql面试挑战吧,看看你能坚持到哪里? 1. 能说下myisam 和 innodb的区别吗? myisam引擎是5.1版本之前的默认引擎,支持全文检索.压缩 ...
没有项目经验也能进大厂？？
一年一度的秋招要开始了,又有人开始慌了. 前段时间在技术沙龙群里跟同学们聊天,大家集体吐槽今年求职内卷的严重. 因此,很多人陷入了一个死循环: 大厂校招需要岗位经历 → 我没有岗位经历,要找实习来获得 ...
程序员，你想不想进大厂？
文章转载自公众号大飞码字 , 作者大飞码字 "怎样才能进大厂?" "我是一个二本计算机专业的学生,怎样才能进大厂?" "我是一个非计算机专业的学 ...
小牛想要进大厂，距离拿百万高薪，进入AI行业你还缺哪些？
本文由小文聊AI原创,有需要的可转发分享对于很多打工人来说,想要拿百万年薪仿佛是天方夜谭,但其实了解AI行业的从业者都知道,有了核心求职能力,以及对职场的认知,再加上对AI技术资源的掌握,进入到一些 ...
高薪进大厂 | 面试指南
大家好,我是Alex,最近各大公司都已经开启了抢人大战,各种宣讲会扑面而来,看着别人秀着大厂的offer,sp offer, ssp offer,心里好生羡慕,谁还没有个大厂梦呢:"我也可以 ...

【一起进大厂】7天掌握react基础系列（1）

导读