React之摸爬滚打（1）【react简介及基本环境构建react-router 4.x路由配置】

一、.React是什么
React 是一个用于构建用户界面的 JAVASCRIPT 库。
React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。
1.2.为什么使用React
React 是一个 Facebook 和 Instagram 用来创建用户界面（UI）的 JavaScript 库。很人多认为 React 是 MVC 中的V（视图）。

创造 React 是为了解决一个问题：构建随着时间数据“不断变化”的“大规模”应用程序。为了达到这个目标，React 采用下面主要的思想。

1、简单
仅仅只要表达出你的应用程序在任一个时间点应该长的样子，然后当底层的数据变了，React 会自动处理所有用户界面的更新。（自动更新）

2、声明式 (Declarative)
数据变化后，React 概念上与点击“F5刷新”按钮类似，但仅会更新变化的部分。（diff/fiber最小粒度）

3、构建可组合的组件（组件化开发）
React 都是关于构建可复用的组件。事实上，通过 React 你唯一要做的事情就是构建组件。得益于其良好的“封装”性，组件使代码复用、测试和关注分离（separation of concerns）更加简单。

4.优点（虚拟DOM）原生div与虚拟DOM的区别，来一段代码简单明了

原生div
let div1=document.createElement("div")
let num1=1
for(let p in div1){num1++}
console.log(num1)
输出 242个属性

虚拟DOM创建div
let reactDiv=React.createElement("div")
let num2=1
for(let p in reactDiv){num2++}
console.log(num2)
输出 8个属性 

简单直观

二、构建
1.首先说一下环境构建，通常我们使用react官方推荐脚手架create-react-app来构建项目，，如果你是比较牛逼的人物，也能使用以下几种方式自己构建环境：
（1）.npm和webpack 手动安装环境
（2）.使用官方文档CDN引入
（3）.使用yeoman创建react项目
（4）.使用create-react-app 快速构建 React 开发环境以及react-router 4.x路由配置
　　create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。
　　create-react-app 自动创建的项目是基于 Webpack + ES6
2.我推荐使用官方脚手架create-react-app来构建项目
3.

npm install create-react-app -g  // 全局安装create-react-app，如果不想全局安装，则不要-g。可能会很慢，可以使用cnpm来安装

create-react-app my-app  // my-app是项目名

cd my-app  

npm start  // 启动项目

4.如果需要引入jquery

安装
npm i jquery -S  


使用：在需要的地方
import $ from  'jquery'

5.react-router 4.x路由配置（3.x与4.x路由配置是完全不一样的，4.x的版本需要安装react-router-dom）

npm install react-router-dom --save // --save 会把依赖包名称添加到 package.json 文件 dependencies 键下,运行时依赖

6.先看一下我的一个项目目录

7.接下来配置路由我是在App.js中

import React from 'react';
import { BrowserRouter as Router,Route} from 'react-router-dom';
import Home from './Home';
import Page1 from './Page1';
import Page2 from './Page2';
import Page3 from './Page3';


class App extends React.Component {
  render(){
    return(
        <Router >
          <div className="fdjfdfdkd">
            <Route exact  path="/" component={Home} />
            <Route path="/Page1" component={Page1} />
            <Route path="/Page2" component={Page2} />
            <Route path="/Page3" component={Page3} />
          </div>
        </Router>
    )
  }
}
export default App;

8.在App.js中配置了全局路由，然后我再Home中使用，使用 Link标签

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import $ from  'jquery'
import {
    BrowserRouter as Router,
    Route,
    Link
}from 'react-router-dom';
import '../asset/css/Home.css';


class Homeextends React.Component {
  render(){
    return(
			<div className="infoBox">
                    <div style={{height:"500px"}}>
                                <span className="buttonSpan">
                                    <Link to="/Page1">look at me</Link>
                                </span>
                        <span className="buttonSpanTwo">
                                    <Link to="/Page2">Inbox</Link>
                                </span>
                        <span className="buttonSpanthere">
                                    <Link to="/">首页</Link>
                                </span>
                        <span className="buttonSpanthere" onClick={this.clickHandle}>
                            look me
                        </span>
                    </div>
                </div>
    )
  }
}
export default Home;

9.咱们在路由注册过以后也可以使用常用的编程式跳转（ 点击事件函数设置路由跳转props.history.push() ）

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import $ from  'jquery'
import {
    BrowserRouter as Router,
    Route,
    Link
}from 'react-router-dom';
import '../asset/css/Home.css';


class Homeextends React.Component {

··//挂载器
    constructor(props){
        super(props)
        this.clickHandle = this.clickHandle.bind(this)
    }
    //事件
    clickHandle(){
        this.props.history.push('/Page1/')

    }

  render(){
    return(
			<div className="infoBox">
                    <div style={{height:"500px"}}>
                                <span className="buttonSpan">
                                    <Link to="/Page1">look at me</Link>
                                </span>
                        <span className="buttonSpanTwo">
                                    <Link to="/Page2">Inbox</Link>
                                </span>
                        <span className="buttonSpanthere">
                                    <Link to="/">首页</Link>
                                </span>
                        <span className="buttonSpanthere" onClick={this.clickHandle}>
                            编程式跳转
                        </span>
                    </div>
                </div>
    )
  }
}
export default Home;

10.先到这里，预知后事如何，请听下回分解。。。欢迎大家指出不完善的地方，我们一起前进、、、、