react学习（ES5和ES6两种写法的对比）
前言
学习react有一段时间了，第一遍学习的时候，学的云里来雾里去，只懂了一些皮毛，因为react技术栈包括的内容挺多的，主要包括react、react-router、redux，还有一些辅助工具，比如webpack、ES6、git这些都要学，可以说是必学的。不然很难阅读别人写的什么。我当时这些都不会，公司让我熟悉项目我就sb了。后面我一个模块一个模块的学习。到目前基础的基本都掌握了。
下面我们来学习react基本用法:
一、HTML模板
ES5的写法：
<html>
<head>
<script src="../build/react.js">script>
<script src="../build/react-dom.js">script>
<script src="../build/browser.min.js">script>
head>
<body>
<div id="example">div>
<script type="text/babel">
// ** Our code goes here! **
script>
body>
html>ES6的写法：
//分别引入react、react-dom库
//有人可能会问这些库在哪？
//这些库已经用npm 指令 打包到内存中了，所以只需要引入即可。
import React,{ Component } from 'react';
import { render } from 'react-dom';
//还缺一个转化ES5的库哦,这时就用到了webpack的loader。二、ReactDOM.render()
ReactDOM.render()是react最基本的方法，用于将模板转化为HTML语言，并插入指定的DOM节点。
//ES5
RenderDOM.render(
Hello World!
,
document.getElementById("root")
)//ES6
render(
Hello world！
,
document.getElementById('root')
)三、JSX语法
上一例的代码，HTML直接可以写在javascript语言中，不需要加任何引号，这就是JSX语法，它允许HTML和javascript的混写。
／／ES5
var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
{
names.map(function (name) {
return Hello, {name}!
})
}
,
document.getElementById('example')
);//ES6
import React,{ Component } from 'react';
import { render } from 'react-dom';
var name = ['xiao','tianxia','bb'];
class Name extends Component{
constructor(props){
super(props);
this.state = {
}
}
render(){
return(
<div>
{
name.map(function(item,index){
//console.log(item);
return (
index}> Hello {item}
)
})
}
div>
)
}
}
export default Name;上面体现了JSX的基本语法规则，遇到 < 就按照HTML规则解析，遇到 { 就按照 javascript语法解析。
上面运行的结果如下：
- Hello xiao
- Hello tianxia
- Hello bb
JSX允许直接在模板中插入JavaScript变量。如果这个变量是一个数组，则会展开这个数组中的所有成员。
//ES5
var arr = [
<h1>Hello world!h1>,
<h2>React is awesomeh2>,
];
ReactDOM.render(
<div>{arr}div>,
document.getElementById('example')
);//ES6
var arr = [
<h1>Hello world!h1>,
<h2>React is awesomeh2>,
];
render(){
return(
<div>
{name}
div>
)
}上面代码arr是一个数组，结果JSX会把它所有的成员添加到模板中。运行结果如下：
Hello world！
React is awesome四、组件
React允许将代码封装成组件（component）,然后像插入普通HTML标签一样，在网页中插入组件。在ES5中React.createClass()就用于生成一个组件类。
var Message = React.createClass({
render: function() {
return Hello {this.props.name}
;
}
});
ReactDOM.render(
"John" />,
document.getElementById('example')
); //ES6
import React,{ Component } from 'react';
import { render } from 'react-dom';
class Message extends Component{
constructor(props){
super(props);
this.state = {
name: 'xiao'
}
}
render(){
return (
Hello {this.props.name}
)
}
}
export default Message;Message的父组件是Main
//index.js
import "../css/reset.css";
import "../css/common.css";
import React,{ Component } from "react";
import { render } from "react-dom";
//var react = requie("react");
//var React = require("react");
//var ReactDOM = require("react-dom");
import Header from "../Components/header";
import Content from "../Components/content";
import Footer from "../Components/footer";
import Hello from "../Components/update";
import Name from "../Components/name";
import Message from "../Components/message";
class Main extends Component{
render(){
return (
"container">
"tianxia"/> //看这里,我是Message组件哦！
)
}
}
render(
,
document.getElementById("root")
);
待更新中