React简介

React是一个用于构建用户界面的JavaScript库。
React主要用于构建UI，很多人认为React是MVC中的V（视图）。
React起源于Facebook内部的项目，用来架设Instagram网站。
React拥有较高的性能，代码逻辑简单，因此越来越多的人开始关注并使用它。

React特点

1.声明式设计 −React采用声明范式，可以轻松描述应用。
2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

学习React我们需要以下 的知识：HTML CSS JavaScript

首先是React的开发环境的搭建

在这里由于是初学者，所以我在这里使用的是官方的方法：
Create React App 是开始构建新的React单页面的最佳途径。它可以帮我们配置开发环境，以便我们可以使用最新的 JavaScript 特性，还能提供很棒的开发体验，并为生产环境优化我们的应用。
在开始之前我们首先要安装nodejs，这是一个管理
首先我先进入Windows命令行： （Win + R）键并输入cmd

image.png

image.png

image.png

进到刚刚我们创建好的项目文件目录下：

image.png

node_moudules

是项目依赖包存放位置。当我们运行npm install安装package.json中的依赖包是，该文件夹会自动创建，所有的依赖包会安装到该文件夹中。

public

主要的作用是html入口文件的存放。当然我们也可以存放其他公用的静态资源，如图片，css等。其中的index.html文件就是我们的项目入口html文件。

src

组件的存放目录。在create-react-app 创建的项目中，每一个单独的文件都可以被看成一个单独的模块，单独的image，单独的css，单独的js等，而所有的组件都存在src目录中，其中index.js是js的入口文件。

下面介绍如何引入antd-design组件库：

安装和初始化

我们需要在命令行中安装 create-react-app 工具，你可能还需要安装 yarn。
$ npm install -g create-react-app yarn
我们其实可以不适用yarn的，但是官方向我们推荐了yarn,所以我们还是按照官方的方法去做。
接下来我们新建一个项目。
$ create-react-app demo
工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理或使用其他 npm registry。

然后我们进入项目并启动。

$ cd demo
$ yarn start

此时浏览器会访问 http://localhost:3000/ ，看到Welcome to React
的界面就算成功了。就是刚刚我们成功创建项目并启动之后的界面，接下来我们要做的就是引入antd组件库。

引入antd

现在从yarn或npm安装并引入antd。
$ yarn add antd
修改 src/App.js，引入 antd 的按钮组件。

import React, { Component } from 'react';
import Button from 'antd/lib/button';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Button type="primary">Button</Button>
      </div>
    );
  }
}

export default App;

修改 src/App.css，在文件顶部引入antd/dist/antd.css。

@import '~antd/dist/antd.css';

.App {
  text-align: center;
}

...

接下来我们要做的就是启动我们的项目：

$ cd demo
$ yarn start

等待浏览器成功打开并显示如下画面之后就表示我们成功地引入了antd组件库。

image.png

个人总结

图片发自简书App