今天开始学习 react。

如果对 HTML，CSS 和 JavaScript 还不熟悉，请先学习完这三门基础再来。

💡 如果还不了解 HTML 、 CSS和JS，可以参考： HTML21 天入门教程、 CSS 21 天入门教程和JS21天入门教程。

什么是 react

​

上面是 react 的图标。

简单来说，React 是一个 JavaScript 库。

它用于构建用户界面，也就是 UI 部分，很多人认为 React 是 MVC 中的 V（视图）。

React 起源于 Facebook 的内部项目，于 2013 年 5 月开源。

react 的特点

说一千，道一万，选择 react 主要是因为以下原因：

• 声明式设计：轻松描述应用。

• 高效：最大限度地减少与 DOM 的交互。

• 灵活：可以与已知的库或框架很好地配合。

• JSX：融合 HTML 和 JavaScript 开发。React 开发不一定使用 JSX ，但我们建议使用它。

• 组件：构建组件，使得代码更容易复用。

• 单向响应的数据流：减少了重复代码，数据绑定更简单。

react 开发环境搭建

因为 react 实际上就是 JavaScript 类库，只要引用了这个类库，就可以使用它。

在实际操作中，有两种方式可选：

• 通过 npm 创建 react 项目：create-react-app

• 通过 CDN 引用 react 库

本教程使用第一种方式。

准备工作

确保安装了 Node.js 和 npm，由于 Node.js 安装包里自带了 npm，所以就要安装了 Node.js 就可以。参考npm 基础入门安装 Node.js。

安装之后通过以下命令查看版本以确保安装成功。

node -v npm -v 

创建第一个 react 项目

React 提供了官方工具 Create React App，用于快速搭建 React 项目。

通过该命令我们无需配置就能构建 React 开发项目。

create-react-app 创建的项目是基于 Webpack + ES6 。

安装 create-react-app

先安装这个工具。

npm install -g create-react-app 

如果下载速度很慢，使用 npm 国内的镜像。

在本地目录下选择一个目录准备放置 react 项目。

然后执行以下命令创建第一个 react 项目。

创建项目

create-react-app react-01 

创建成功的提示信息里，有很多有用的指示。

比如说，它建议：

cd react-01 npm start 

我们试一下。

react 默认使用 3000 端口作为本地开发环境，它自动使用浏览器打开，就能看到如下界面：

项目结构分析

使用 VS Code 打开查看项目目录，如下：

• node_modules 存放所有项目的依赖包。一般不需要管它。

• public 存放静态文件，Webpack 不会对这个目录中的文件进行处理。public 目录下的文件会被直接复制到构建目录。

• src 存放应用的源代码。实际开发的工作基本都在此进行。

• package.json 是项目的配置文件，包含项目信息、脚本、依赖项等。

• package-lock.json 是配置锁定文件，记录了确切的依赖版本，确保在不同环境中安装的依赖一致。

尝试修改 react 项目

找到 app.js 文件，修改其中的内容如下：

import logo from './logo.svg'; import './App.css';  function App() {   return (     <div className="App">       <header className="App-header">         <img src={logo} className="App-logo" alt="logo" />         <h4>你好，世界！</h4>         <h5>这里是IT从业指北。</h5>         <a           className="App-link"           href="https://reactjs.org"           target="_blank"           rel="noopener noreferrer"         >           Learn React         </a>       </header>     </div>   ); }  export default App; 

之后回到浏览器，会看到页面自动更新成了如下：

如果单开着命令行，那么在那边能看到如下信息：

所以 webpack 在背后监听每一个修改，会自动编译并应用到开发环境。这样我们不需要任何操作就可以预览修改。

总结

• 🍑 react 是一个 JavaScript 库。

• 🍑 通过 npm install 安装 create-react-app 后可以创建 react 项目。

• 🍑 react 项目的源代码主要放在 src 目录下。