React Hooks 入门教程一:开发工具选择、安装配置Yarn,开发环境搭建

react hooks 前端 JavaScript by ourjs on 1591797506256


React Hooks采用更加简单的函数组件替换了之前的类组件,使用各种hooks勾子代替了之前复杂的生命周期和状态管理。使组件类与状态(state)分离,总体上来说降低了 React 项目的复杂性。

本教程是React Hooks系统教程中的一部分。

Redux 的作者 Dan Abramov 总结了组件类的几个缺点。

  • 大型组件很难拆分和重构,也很难测试。
  • 业务逻辑分散在组件的各个方法之中,导致重复逻辑或关联逻辑。
  • 组件类引入了复杂的编程模式,比如 render props 和高阶组件。

下面简单介绍 React Hooks 开发入门与环境搭建。

安装 vscode 开发工具

目前比较推荐使用 vscode,可以搭配一些插件提高开发效率。比如我们这里安装了 react code snippets 自动引用工具。如果您使用其它开发工具,这一步可跳过。

react_1_vscode.png

开发环境

安装 yarn

可以使用 npm 安装 react,但安装速度较慢,可使用 yarn 安装。如果您使用 npm 安装 react,则可跳过这一步。

npm install -g yarn

然后将 yarn 的全局目录写到环境变量 path 中, 可使用 yarn global bin 打印,当前用户的yarn全局目录:

>yarn global bin
C:\Users\Administrator\AppData\Local\Yarn\bin

即将 C:\Users\Administrator\AppData\Local\Yarn\bin 添加到环境变量 path 中,使用分号分隔,如下图所示。

react_2.png

这样使用 yarn 安装的模块就可以直接执行了。

安装 create-react-app

可使用 create-react-app 快速生成一个 react 项目,通过 yarn 或 npm 或 cnpm 全局安装:

yarn global add create-react-app

安装完成后就可使用 create-react-app 命令了。

create-react-app --help

安装不可用,请检查环境变量是否配置正确。

创建 react 项目

使用 create-react-app 创建,比如创建一个 my-react 的项目:

create-react-app my-react

进入 my-react 项目,启动本地服务

cd my-react
npm start

然后就可以访问 http://localhost:3000

你也可以用 vscode 打开项目, 按 "ctrl + ~" 打开命令行终端,执行 npm start

创建一个函数组件

接下来我们要写第一个函数组件,打印 Hello React。 删除 src下的所有文件,仅保留 index.js 个文件,然后修改内容如下:

import React from "react";
import ReactDOM from "react-dom";

function App() {
  return (
    <div>
      <h1>Hello React</h1>
    </div>
  )
}

ReactDOM.render(<App/>, document.getElementById("root"));

然后最终效果如下:

react_3.png

在线浏览: 示例代码


下一篇: React Hooks 入门教程二:useState使用、useEffect参数作用