开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 23 天，点击查看活动详情

今天继续学习React，这是一篇面向初学者的React文章，大佬可以划走了。

引言

历史上，React源于facebook,他对于超大型的项目的编写上，适应非常好。而且具有着非常非常强大的生态环境。React的设计思路就是响应式编程。

这样有以下几个优势。

• 状态更新，UI会自动更新
• 代码组件化，可复用性更强，可以封装，更方便。
• 状态之间的依赖关系，只需要声明即可。

初始化项目

我们可以使用create-react-app的方式快速创建一个React项目，首先我们要安装一个create-react-app的脚手架。

npm install -g create-react-app // 安装 create-react-app 脚手架

接下来我们就可以使用create-react-app脚手架来完成快速初始化我们的React项目了。

create-react-app my-app // 创建项目

我们等待一段时间后，React项目就创建好了，我们切换到React项目所在的跟目录，然后使用npm start命令来启动项目，等待一段时间后，我们就可以看到如下效果了。

目录

我们的目录结构大致如下：

我们来解析一下目录，package.json和package-lock.json文件无需多言了，src目录下我们一般可以放一些开发时的代码，而node_modules是我们用到的依赖，而public目录下有如下事物：

分别是涉及的资源和我们要用的html文件，值得一提的是:React也是一种SPA的开发模式。

写一个demo

我们创建一个`Table.js·文件，内容如下:

import React , { Component } from "react";

class Table extends Component {
    render() {
        return (
            <table>
                <thead>
                    <tr>
                        <th>
                            Name
                        </th>
                        <th>
                            Job
                        </th>
                    </tr>
                </thead>
                <tbody>
                <tr>
                    <td>张三</td>
                    <td>xxx</td>
                </tr>
                <tr>
                    <td>李四</td>
                    <td>yyy</td>
                </tr>
                <tr>
                    <td>王五</td>
                    <td>zzz</td>
                </tr>
                </tbody>
            </table>
        )
    }
}

export default Table;

我们定义了一个Table类，然后导出，接下来我们在index.js中使用这个组件

import React , { Component } from "react";
import  ReactDOM  from "react-dom";
import Table from "./Table";
import './index.css';

const element = <div>Hello, world!</div>;

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hello React { element }</h1>
        <Table/>
      </div>
    )
  }
}

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

我们将他引入，并尝试了一下jsx的语法:const element = <div>Hello, world!</div>;。

最后将他挂载到Html中的root下。

保存，热更新之后: