前言

React 是一个用于构建用户界面的 JAVASCRIPT 库。

React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。

React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。单单脚手架就有传统创建单页面程序的create-react-app，有进行服务器端渲染的Next.js，还有快速创建网站的Gatsby。那就先从create-react-app开始说起。

特点

1.声明式设计 −React采用声明范式，可以轻松描述应用。

2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。

3.灵活 −React可以与已知的库或框架很好地配合。

4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。

5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

安装

create-react-app是react中最简单的创建单页面程序的方式。并且Node >= 6 ，npm >= 5.2

# 全局安装create-react-app
$ npm install -g create-react-app
# OR
$ yarn global add create-react-app
# 或 临时安装create-react-app
$ npx create-react-app my-app

创建项目

注意:如果安装后创建项目显示： D:\Program Files\nodejs\node_global\create-react-app.ps1，因为在此系统上禁止运行脚本。

解决办法：

1.win+X键，使用管理员身份运行power shell

2.输入命令：set-executionpolicy remotesigned

3.输入”Y“,回车，问题解决。

# 创建常规项目
create-react-app my-project
# 创建ts项目
create-react-app my-ts-project --scripts-version=react-scripts-ts

启动项目

这样，一个react单页面程序项目就创建好了。启动这个项目，启动之后访问http://localhost:3000/就可以打开项目了。

npm start   //或者
yarn start

目录结构

my-app
│  .gitignore              //git免提交文件配置文件
│  package.json            //包管理文件
│  README.md               //说明文档
│  yarn.lock               //yarn锁定版本文件
│
├─node_modules              //项目依赖
├─public                    //公共静态资源文件夹
│      favicon.ico          
│      index.html
│      logo192.png
│      logo512.png
│      manifest.json
│      robots.txt
│
└─src                       //react源代码
        App.css
        App.js              //根组件
        App.test.js
        index.css           //样式文件
        index.js            //入口文件
        logo.svg            //logo文件
        serviceWorker.js
        setupTests.js

集成react-router

要想完成单页面程序的开发，需要在页面中进行页面局部刷新，加载各种子页面。这就就离不开路由。

安装路由

$ yarn add  react-router-dom --save

集成到项目

在App.js中引入，并且使用

import React, { Component } from 'react';
import { BrowserRouter as Router,Route ,Link} from 'react-router-dom'

import './App.css';
// 加载组件
import List from './List'
import About from './About'

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <h1>App</h1>
          <ul>
            <li><Link to="/list">List</Link></li>
            <li><Link to="/about">About</Link></li>
          </ul>
          <hr/>
          <Route path="/list" component={List} />
          <Route path="/about" component={About} />
        </div>
      </Router>
    );
  }
}
export default App;