react 学习入门指南

在学习react 之前我们需要知道的JavaScript前置知识

• 变量
• 箭头函数
• 使用拓展运算符处理对象和数组
• 对象和数组的解构
• 模板字符串
• 回调函数
• es模块化

你不需要成为专家，但是希望您能对以上内容有很好的了解，如果不是很了解可以点击链接

为什么要学习react？

主要因为以下原因

1. React 应用广泛，您很有可能将来会接触到React 项目，众多公司也都在使用，减少您未来接轨成本。
2. 现在很多使用的工具也都是由eact 开发，github社区也有众多优秀的React开源项目。
3. 作为一名前端工程师，现在面试里面必不可少的部分也有React的问题

如何安装React

请先确保您有Node.js 环境如果没有请点击安装链接（npm 是和node 是一起安装的）

React 有多种不同的安装方法。
这里使用官方推荐工具：create-react-app，你无需安装或配置 Webpack 或 Babel 等工具。
它们是预先配置好并且隐藏的，因此你可以专注于代码。
只需创建一个项目，就可以了。参考文档

create-react-app 是一个命令行工具，上面我们进行了Node.js安装，现在您可以直接使用npx命令，从5.2版本的npm 开始增加了npx 命令。
如果您不能无法确定npm 版本信息，那么执行npm -v 命令来检查您的npm是否需要更新。

然后输入

npx create-react-app my-app

my-app 改为自己想要的项目名就可以了
执行完毕后会显示如下内容，国内的小伙伴可能会网络出现波动，可以自行搜索解决。

create-react-app 会在您指定的目录下创建项目文件，打开package.json它在文件中添加了几个命令

我们进入项目路径下 运行 npm start 命令来启动app

浏览器打开localhost:3000的端口就能看到页面啦。

休息一下！！！！

React组件

刚才我们已经创建了React 应用。
在我们的项目目录下大部分文件都是配置文件，我们打开app src 目录下的app.js文件，这是一个组件
我们简化一下这个组件

可以看到页面使用 import 导入了一些东西，并且导出了app函数。

官方刚才的列子，return 返回了一些奇怪的东西 类似html 里面有包含了js 代码这个就是react 的jsx ，构建组件时候的特殊语法，除了返回jsx组件还有一些其他特征。

一个组件可以有自己的状态（state），state 可以封装一些其他组件无法访问的私有属性，除非他自己暴露给其他组件使用。

组件也可以接收其他组件传递过来的数据，这些数据我们统称为props。

后面会详细介绍jsx、state、props，现在先了解概念。

jsx简介

学习React 肯定要先知道jsx 的那么我们开始吧 go go go

刚才我们简化了app.js里面的代码删除掉了return 部分，现在我们来重点看看这部分代码

return 括号内所有的内容都是jsx，这些代码看起来是html 但是又多了一些奇怪的东西，这种写法看着也不太像js 代码，但是没关系在后台react 会处理jsx，他最后会转换为浏览器可以识别的JavaScript。

所有我们编写完jsx 以后还需要一个转换步骤，使他可被JavaScript解析器识别。

react发明jsx 是为了让我们能更加轻松的开发ui 界面，当然你也需要学习他的语法。

JSX构建 UI

在React组件中，你可以导入其他组件，然后将他们嵌入到当前组件以展示他们，类似堆积木。

一般情况下一个页面就是一个React 组件，这让我们可以非常容易组件之间复用，通过导入的方式。

但是也没有明确规定一个文件只能有一个组件，页面也可以定义多个组件，这些组件只在当前页面用到。

如果您觉得文件中代码行数过多时，我们就可以进行拆分，放在单独的文件中。

我们选择自己适合的方式开发就好了。

为了学习我们app.js页面再创建一个组件

function Welcome (){
	return <h1> Hello React </h1>;
}

这就是一个简单的函数，返回jsx 里面 h1 标签以及内容。

我们将这个函数添加到 app.js 文件中。

将<Welcome /> 添加到app组件中 ，以这种标签嵌套函数名字的书写格式，就可以在ui中展示这个组件

注意： 组件名称必须以大写字母开头。 React 会将以小写字母开头的组件视为原生 DOM 标签。
例如,<div /> 代表 HTML的 div 标签，而 <Welcome /> 则代表一个组件，并且需在作用域内使用 Welcome。
你可以在深入 JSX中了解更多关于此规范的原因。

下面是页面效果，可以看到我们写的 hello react 啦。

这里 Welcome 就是子组件了，app 就是父组件了，大家都这么叫。
我们想html 标签一样添加 <Welcome /> 组件。
是不是感觉到了jsx 的快乐。

JSX 和 HTML 的区别

请逐行阅读一下app 函数的jsx 代码。

html 我们最常用的属性就是class 属性，用于给html添加css 样式，但是这里有个问题，我们在JavaScript中编写 UI 代码，而class 是JavaScript的关键字，这就意味着不能使用它，他有特殊的作用（定义JavaScript中的类）。

由于这个问题React 作者不得不选择其他的名称，所以我们看到app组件的jsx 代码使用的是className属性，作者用 className 代替了 class

我们如果将一些html 文件改写为jsx 时候需要注意这一点

如果我们忘记了修改class 系统也会给出相应的提示，看浏览器控制台是一门非常重要的编程技能。
在编写html 的时候如果出现标签忘记闭合的情况浏览器会尽可能解析，而不是中断解析过程，jsx 就不能这样了如果忘记闭合标签会给出错误，编码过程中应该持续关注控制台。

jsx 的错误提示非常友好，可以使你快速定位编码问题。

在JSX嵌入 JavaScript

在app 组件中我们导入了 logo 的svg 文件

import logo from './logo.svg';

然后在jsx 中我们将svg 文件赋值给了 img 标签的src 属性

  <img src={logo} className="App-logo" alt="logo" />

再举个栗子

我们在app组件里面定义一个新的变量，名字为chestnuts

function App() {
	const chestnuts = 'I am very sweet'
}

我们在jsx 中任意位置添加 {chestnuts }，这样就可以在jsx 中显示chestnuts 变量的值了

function App() {
  const chestnuts = 'I am very sweet'
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <Welcome />
        {chestnuts} // ··········································我在这里
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

我们可以在 {} 中添加任何JavaScript表达式，但是每对大括号只能有一个表达式，并且这个表达式是能正确求值的。

我们编写一个三元表达式

chestnuts  === 'I am very sweet' ? 'hello chestnuts ' : 'no'

当为真时，输出（hello chestnuts）不为真时，输出（no）

休息一下来杯咖啡！！！！！！

React中的state

每个组件都可以有自己state,state就是由组件管理的状态集合

我们写一个组件的时候会声明很多的变量或者常量来使用，你可以理解state 就是用来管理这些数据的。

官方的默认写法有点麻烦所有我们使用一个工具useState 来管理state。

导入 useState

import React, { useState } from 'react'

usestate 可以传入一个参数，这个参数用来初始化state，由于他会返回一个数组，这个数组包含state，和一个修改state值得函数，所有我们用解构赋值得方式进行一个接收使用。

const [state, setState] = useState(initialState);

我们不能直接修改state 得值，否则react 组件无法将数据变化映射到UI当中，所有我们 修改数据需要使用setState
setState 用于更新state。它接收一个新的state的值，并更新。

 setCount(count + 1)
 setCount((prevCount) => {
      return prevCount + 1
    })

两种写法略有不同，扩展阅读

React组件中的 Props

传入组件的初始值是Props都这么叫它。
在JSX 中将props作为属性传给组件。

 <Welcome myprops = {test_props} />

在组件中，用函数参数的形式接收props：

页面效果

当函数作为props 传递时，子组件就可以调用父组件的中定义的函数。
还有一种特殊的props，他表示传递组件标签开始结束中间的内容

<WelcomeMessage> Here is some message </WelcomeMessage>
// 这种情况下，在 WelcomeMessage 中，我们可以通过使用名为 children 的 props 来获取 Here is some message。
function WelcomeMessage({ children }) {
  return <p>{children}</p>
}

React应用中的数据流

在react 应用中数据通常以props的方式从父组件流向子组件
如果给子组件传递一个函数，就可以在子组件中修改父组件的state

const [count, setCount] = userState(0)
<Counter setCount={setCount} />

在组件内部取到setCount 就可以调用它修改父组件的count了

function Counter({ setCount }) {
  //...

  setCount(1)

  //...
}

当然我们也可以使用redux 之类的库来管理数据，这个要看你项目情况而定，使用其他的库也会增加项目的复杂成都，大多数情况上面介绍的两种方法就够用了。

在React 中处理用户事件

react 提供了简单的写法来管理DOM触发事件、点击事件、表单事件等。
我们先来看最简单的点击事件
可以直接在任意jsx 元素上使用 onclick属性

<button
  onClick={(event) => {
   alert('我被点击了+-+')
  }}
>
  Click here
</button>

当元素被点击时传递给onclick 属性的函数就会触发了，
你也可以在jsx 外部定义这些函数这里直接传递一个变量名就可以了。

const handleClickEvent = (event) => {
  alert('我被点击了+-+')
}

function App() {
  return <button onClick={handleClickEvent}>Click here</button>
}

当button 被点击时onclick 就会调用click事件的处理函数了。
react 支持非常多的事件类型，详细请参考连接：事件处理

React 组件的生命周期事件。

上面介绍了怎么使用useState 钩子来管理state。

现在介绍另外一种钩子：userEffect。

userEffect钩子允许组件访问它的生命周期事件。

当你调用这个钩子的时候需要传入一个函数。

当组件初始化被渲染的时候，以及在后面的每一次重新渲染/更新时，react都会调用这个函数。

React 首先更新 DOM，然后调用任何传递给 useEffect() 的函数。

// 导入钩子函数
const { useEffect, useState } = react
const ConterWithNameAndSideEFFect = () =>{
	const [count, setCount ] = useState(0)
// 钩子函数
useEffect( () =>{
	console.log(`your clicked ${count} times`)
})
return(
	<div>
			<p>your click {count} times </p>
			<button onClick={() => setCount(count +  1)}>Click me</button>
	</div>
)
}

每次重新渲染/更新时，传递给userEFFect的函数都会被执行，所以出于性能上的考虑，我们可以告诉React 再某些时候不要执行这个函数。为了实现这个目的我们可以给函数userEFFect传递第二个参数，这个参数是一个数组，数组的成员发生变化时React 才会执行这个函数。可以理解为是一个监视器，有变动才变化。

userFEEect(() => {
	console.log(`Hi ${name} you clicked ${count} times`)
},[name,count])

类似的，你也可以传入一个空数组，这会使React只在组件挂载的时候才会执行这个函数

useEffect(() => {
  console.log(`Component mounted`)
}, [])

useEffect() 非常适合添加日志，访问第三方 API 等。

接下来怎么学习

熟练掌握文章中提到的知识点，不清楚的地方可以对照官方文档查看。
文章主要是整理出一条脉络，防止迷失，根据这个线然后你可以继续向外扩展学习，最后形成自己的技能地图。

• 了解什么是虚拟DOM
• 动手构建一些简单的react 应用动手很关键。
• 学习使用react 的开发者工具、Debug的方式。
• 通过 plain CSS 或者 Styled Components 学习如何在 React 应用中使用 CSS。
• 学习如何使用 Context API，useContext 与 Redux 来管理 state。
• 学习如何与 forms 交互。
• 学习如何使用 React 路由。
• 学习如何测试 React 应用。
• 了解基于 React 构建的应用程序框架，如 Gatsby 或者 Next.js。
• 最后最重要的是实践实践实践，千里之行始于足下。