React.js 官网资料摘记：JSX简介-CSDN博客

关于这一部分，建议配合慕课网的课程一起看，他讲的蛮好的。

React 官网资料文档摘记

给一个最简单的使用本地开发环境进行尝试的文档：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
  </head>
  <body>
      <!--下面容器的内部就是被渲染的结果-->
    <div id="root">
        <!---->
    </div>
    <script type="text/babel">
    //在这里面进行代码编写就可以了！
    </script>
  </body>
</html>

JSX 简介

基础语法

//直接使用函数进行渲染也是可以的
function formateName(user){
    return user.firstName+" "+user.lastName;
}
//或者是常量也可以
const user={
    firstName:"hello",
    lastName:"world"
};
const element=(
    <h1>
        {formateName(user)}
    </h1>
);
ReactDOM.render(
    element,
    document.getElementById("root")
);

JSX属性

属性名采用驼峰法命名
属性值为字符串的话可以直接负值，并使用""括起来
为javascript表达式的话需要使用{}括起来

const element=(
    <div>
        <div className='class_name'>class_name</div>
        <div style={{color:'red',fontSize:'24px'}}>style<div>
    </div>
);

JSX防注入攻击

所有的输入都会解析成字符串形式，所以即使注入代码也不会被运行，这是官网上说的。

//我也不会JSX攻击，所以这里就演示一下，如何读取用户的输入值，并且进行显示
class Game extends React.Component{
    constructor(){
        //等于先实例化父类
        super();
        this.state={
            inputvalue:'请输入你的名字'
        };
    }
    render(){
        return (
            <div>
                <input type='text' onChange={()=>this.handleChange()} ref='inputvalue' />
                <button onClick={()=>this.handleClick()}>点击我查看输入</button>
            </div>
        );
    }
    //下面定义输入框改变函数
    handleChange(event){
        var inputDOM=ReactDOM.findDOMNode(this.refs.inputvalue);
        this.state.inputvalue=inputDOM.value;
    }
    //下面定义按钮处理函数
    handleClick(){
        let inputvalue=this.state.inputvalue;
        alert(inputvalue);
    }
}

这里面用到了几个知识点，介绍一下：

事件绑定：onChange、onClick

直接在Component内部设定处理函数，函数内部实现等会再说。先来看看这些事件是怎么绑定到onClick上去的：
onChange={()=>this.handleChange()}
这里如果写成这样的形式：
onChange={this.handleChange()}
则会直接调用handleChange()函数，而不是触发。并且在这些函数中默认传入event，该参数与javascript的event操作一样。

类似于面向对象编程中的构造函数：constructor

这里的构造函数是constructor，在该构造函数中可以设置一个在该Component内部有效的全局变量：state。

DOM查找

首先是使用refs设置了一个标签，代码中是ref='inputvalue'，之后在外部调用ReactDOM的findDOMNode函数，在该函数内部传入下面形式的调用this.refs.inputvalue，便可以返回该DOM的对象。

注意，这里插两个知识点：

命名变量的时候，最好不要使用下划线和大小写区分，直接全部命名成小写，不知道为什么，那样老是报错。
不要随便嵌套HTML标签，那样也可能报错，毕竟不是真正的HTML标签。

JSX代表Objects

Babel转换器会把JSX转换成一个名为React.createElement()的方法进行调用。

所以下面两段代码的效果是一样的：

const element=(
    <h1 className='classname'>
        Hello World !
    </h1>
);

const element=React.createElement(
    'h1',
    {className:"classname"},
    'Hello World'
);

这样处理结果会返回一个React元素，这些React元素会被React处理成最后显示在页面上的元素。