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

导读

本教程适合初学者入门，以及很久没有开发过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.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 = <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;
} 

结语

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

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

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