React Hello World

React

react 的运行至少需要三个依赖
react.js      => React 的核心库，
react-dom.js  => 提供与 DOM 操作相关的功能，
Browser.js    => 解析器，解析jsx，将 JSX 语法转为 JavaScript 语法
tips:browser的解析过程比较耗时，上线时应交付服务器完成。

tips:使用babel，可以解析es6语法，但是，最新版本的bebel已不支持直接CDN的引入方式，
CDN版本最多到6.4.4
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>

Hello world

react使用jsx语法，在单独使用时，需要给script的type设置为text/babel

<script type="text/babel">
ReactDOM.render(
<h1>Hello world!</h1>,
document.getElementById("hello")
);
</script>

for循环语句

（1）、普通的map语句循环
let arr = ["1","3","4","6","8","dfgs"];
ReactDOM.render(
<div>
{
arr.map((item,index)=><div key={index}>Hello , for {item.toString()}</div>)
}
</div>,
document.getElementById("hello_for_1")
);

tips：render内部写入jsx语法，html标签和js用{}进行区分，js写入{}中，
js的函数return的值为输出的html标签，
key={index}，每一次遍历都需要给标签加入一个私有key作为遍历依据

（2）、数组自动展开

let arr_2 = ["123",521351,5,6136,326,36,346,'2u',467,4];
ReactDOM.render(
<div>{arr_2}</div>,
document.getElementById("hello_for_2")
)

tips：在这里，arr_2将会自动展开，每一个元素用span标签包裹。
等价于
ReactDOM.render(
<div>
{
arr_2.map((item,index)=><span key={index}>{item}</span>)
}
</div>,
document.getElementById("hello_for_2")
)

定义组件

使用React.createClass来进行创建组件，接收一个对象。
{
//1、render，定义模板，输出组件DOM
render(){
return <div onClick={this.handleClick}></div>
},

//1.1、自定义事件
handleClick(){
console.log("自定义事件触发");
}

//2、设置组件属性的默认值，如果外界没有传入该值则使用默认值
getDefaultProps(){
return {
title:"xxx",
age:"abcc"
}
},

//3、用来定义组件属性的数据类型，并且可以设置该属性必填还是非必填
//      使用React.PropTypes进行设置
//      render中，使用this.props.title来进行调用
propTypes:{
title:React.PropTypes.string.isRequired,
age:React.PropTypes.string
},

//4、组件的初始状态，
//  getInitialState可以设置组件初始状态
//  setState({num:this.state.num + 1})用来更改state里面的状态，
//     更改了之后会自动触发render函数
//     tips:   this.state是组件当前状态，this.props是当前组件的固有状态
getInitialState(){
return {
title:"xxx",
num:0
}
}
}

let ComponentA = React.createClass({
render(){
return <div>
<h2>This is ComponentA</h2>
<p>
3ff0
{this.props.name}</p>
</div>
}
})
ReactDOM.render(
<ComponentA name="Jack Ma"/>,
document.getElementById("hello_component_6")
)

生命周期函数

let Component_12 = React.createClass({
render(){
return <div></div>
},
componentWillMount(){
console.log("组件加载之前触发")
}
})
ReactDOM.render(
<Component_12 />,
document.getElementById("component_12")
)

组件分为三种状态：Mounting（已插入真实DOM）、
Updating（正在被重新渲染）、
Unmounting（已移出真实DOM）

1、Mounting（已插入真实DOM）
componentWillMount
componentDidMount

2、Updating（正在被重新渲染）
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object nextProps, object nextState)

3、Unmounting（已移出真实DOM）
componentWillUnmount

*、特殊状态函数
已加载的组件，在收到了新的参数的时候触发
componentWillReceiveProps(object nextProps)

组件在判断是否重新渲染的时候触发
ShouldComponentUpdate(object nextProps,object nextState)

数据处理

render(){
return
<div>
<h1>
//1、props 是组件固有状态
//  state 是组件的私有状态，可以更改
{this.props.title}
{this.state.age}
</h1>
<p>
<input type="text" value={value} onChange={this.setValue} ref="inputBox"/>
<span>{value}</span>
</p>
</div>

},
/**
* 2、event.target可以访问到触发事件的元素
* 3、this.setState({title:"xxx"})可以对state内的数据进行更改
* 4、this.refs[元素内ref的值]可以访问到真实的DOM节点，可对真实DOM进行操作
*       tips：使用this.refs时应保证真实DOM已经渲染
*/
setValue(){
this.setState({value:event.target.value});
console.log(this.refs.inputBox);
},
/**
* 5、getDefaultProps  给当前组件设置默认值，
*          当该数据没有被外界赋值时，采用默认值
* 6、getInitialState  给当前组件状态设置初始值
* 7、propTypes    给当前组件的state指定其数据类型
*/
getDefaultProps(){
return {
title:"xxx",
}
},
getInitialState(){
return {
title:"xxx",
}
},
propTypes:{
title:React.PropTypes.string.isRequired,
age:React.PropTypes.string
},

tips:
(1)、当组件render的时候，组件内部有其他标签，
可在组件内部使用 this.props.children 访问到，得到的是一个数组
(2)、调用组件的时候，写在其标签上的属性，
也可用 this.props[属性名] 访问得到，
eg: this.props.name 得到的是 "jack ma"
ReactDOM.render(
<ComponentB name="jack ma">
<span>123421</span>
<span>989876</span>
</ComponentB>,
document.getElementById("hello_component_7")
)

react-router-dom

在route处都应该用一个router标签包裹，router标签分为两种
HashRouter   用来处理前端控制页面跳转的情况，跳转是hash值切换
BrowserRouter用来处理服务器端渲染跳转页面的情况，跳转是url切换

router链接

import {
HashRouter,
Link,
NavLink
} from "react-router-dom"

/**
* @description  Link用来定义跳转链接，相当于a标签，里面写跳转的hash值
*               Link和NavLink的区别在于，NavLink可以添加css样式
*
*/
eg:
<NavLink exact to="/index" activeStyle={{ color: '#4dc060' }}>
Home
</NavLink>
eg:
<HashRouter>
<ul>
<li><Link to="/">Index Page</Link></li>
<li><Link to="/component_1">Component_1</Link></li>
<li><Link to="/component_2">Component_2</Link></li>
<li><NavLink to="/component_1" className="link_color">跳到Component_1</NavLink></li>
</ul>
</HashRouter>

tips：Link和Route配合使用，一个负责链接，一个负责呈现

router呈现

import {
HashRouter,
Route,
Redirect,
Switch
} from 'react-router-dom'
/**
* @description  Route      用来定义路由链接的位置
*               Redirect   用来定义重定向，匹配到的from中的路由会被转接到to中
*               Switch     用来标识路由切换的位置，里面写Route和Redirect
*/

eg：
<HashRouter>
<Switch>
<Route exact path="/" component={IndexComponent}></Route>
<Route exact path="/component_1" component={Component_1}></Route>
<Route exact path="/component_2" component={Component_2}></Route>
<Redirect from="/abac" to="/component_2"></Redirect>
</Switch>
</HashRouter>

1、HashRouter用来标识它内部的内容依靠hash值进行切换
2、Switch用来标识了它内部的内容是等价切换的路由，即根据hash值显示其中一个Route
3、  在Switch内部的Route只会显示其中一个，
没有Switch包裹的Route表明该路由默认在这个位置，类似直接引入Component

4、Rediect表明了，当页面hash值跳转到了其from值的时候，
内容会跳转到to值对应的路由页面

搭建项目

手动搭建

1、  npm init 生成 package.json 文件.

2、  npm install --save react
npm install --save react-dom
npm install --save-dev webpack
npm install --save-dev webpack-dev-server
npm install --save-dev babel-core 。

2.1、babel相关大礼包
npm install --save babel-polyfill
npm install --save-dev babel-loader
npm install --save babel-runtime
npm install --save-dev babel-plugin-transform-runtime
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react
npm install --save-dev babel-preset-stage-2

3、在package.json 然后添加下面的scripts:
"scripts": {
"start": "webpack-dev-server --hot --inline --colors --content-base",
"build": "webpack --progress --colors"
}

4、配置webpack
创建webpack.config.js文件

var webpack = require('webpack');
module.exports = {
entry: './src/app.js',
output: {
path: __dirname + '/build',
filename: "bundle.js"
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
plugins: ['transform-runtime'],
presets: ['es2015', 'react', 'stage-2']
}
}, {
test: /\.css$/,
loader: "style-loader!css-loader"
}]
}
};

5、启动
npm start 将会启动webpack dev server.

npm build 将会对代码进行打包，用于生产环境

6、项目目录
project_1
│
│  index.html
│  package-lock.json
│  package.json
│  webpack.config.js
│
└─src
│  app.js           js的主入口，里面写ReactDOM.render()
│
└─component
App.js      组件，里面导出一个组件

export default class App extends React.Component{
render(){
return (
<div>Hello React</div>
)
}
}

create-react-app

facebook官方推荐的脚手架

1、npm install -g create-react-app

2、create-react-app my-app
执行的时候会自动npm install安装依赖

3、cd my-app

4、npm start

dva框架

1、按照dva-cli
npm install -g dva-cli

2、创建应用
dva new myApp --demo

3、安装依赖
cd myApp
npm i

4、安装完成之后，启动项目
npm start