react入门笔记（一）基础结构

react.js什么特点，怎样地好，这里就不多说。直接开篇入门学习吧，路漫漫其修远兮。

官网地址：React: A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

本文中的代码地址：demo1

基础结构说起

什么也不急说，先从 “hello word!” 的 index.html 一个实例说起：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>hello react.js</title>
  <script src="../build/react.min.js"></script>
  <script src="../build/react-dom.min.js"></script>
  <script src="../build/browser.min.js"></script>
  <!-- <script src="index.js" type="text/babel"></script> -->
  <style type="text/css">
    .red{
      color: red;
    }
  </style>
</head>
<body>
<div id="jc"></div>
<script type="text/babel">
  var Hello = React.createClass({
    render:function(){
      //1、行内样式
      // return <span style={{color:'red'}}>hello {this.props.name}</span>;
      //2、class样式
      // return <span className='red'>hello {this.props.name}</span>;
      //3、对象变量
      var styleSpan = {
        color: 'yellow',
        fontSize: '30px',
        fontWeight: 'bold'
      }
      return <span style={styleSpan}>hello {this.props.name}</span>;
    }
  });
  ReactDOM.render(<Hello name='react'/>,document.getElementById('jc'));
</script>
</body>
</html>

结构解剖

对以上的结构进行一一解剖：

引入
核心库：<script src="../build/react.min.js"></script>
dom操作：<script src="../build/react-dom.min.js"></script>
JSX 语法转为 JavaScript 语法的依赖库：<script src="../build/browser.min.js"></script>
react Components
react Components：不是真正的DOM节点，react Components 的一个实例而已。如：<span style={styleSpan}>hello {this.props.name}</span> 、<Hello name='react'/>
jsx
jsx 是一种语法糖,允许 HTML 与 JavaScript 的混写，即 JSX XML，最终会被解析成 js，主要是为了增加程序可读性、减少出错（那就不用 js 字符串、js数组来拼接 html 结构啦！）。类似的语法糖还有：TypeScript，CoffeeScript等。
以上代码31行处的 return 就是 JSX 语法：<span style={styleSpan}>hello {this.props.name}</span>
必须告诉浏览器的 type 属性：<script type="text/babel">。
注意：react0.14版之前有所不同，是 <script type="text/jsx">。
当然，也可以不用 jsx，但会麻烦很多，如下对比：

//1、jsx语法糖
render : function(){
  var oHtml = 
    <div>
      <div className="jc">Hello, React</div>
      <div className="jc">2016-08</div>
    </div>;
  return oHtml;
}
//2、React.createElement
render: function(){
    return React.createElement(
        "div",null,
        React.createElement("div",{className:"jc"},"Hello, React"),
        React.createElement("div",{className:"jc"},"2016-08")
    );
}

React.createElement 这里就暂且先略过了。

基本语法

React.creatClass：创建组件；参数里面是对象({});最重要的不可缺少的 key 值：render，是一个 function(){}，更多的参数往后深入学习。
注意：组件类的第一个字母必须大写，如var Hello = React.createClass({...})，否则会报错
ReactDOM.render：将模板转为 HTML 语言；2个参数：1、被渲染的 react Component，2、渲染完后要插入的容器。

css样式

以上的代码中，列举了3种样式：

1、行内样式：
<span style={{color:'red'}}>
2、设置class：
<span className='red'>
3、对象变量：
<span style={styleSpan}>

注意：1、样式是对象写法；2、驼峰写法，如font-size要写成fontSize,类似原生的js写法；3、class要写成className，es5的保留字段，es6的类；for 要写成 htmlFor。

props值

props实例元素的属性集合。如：{this.props.name}的值、其实就是<Hello name='react'/>中的react；我们一般会根据这些属性的值、对实例的外观进行一定的修改不同的呈现。

踩到的坑

版本不同，引入的js不同
以上是 react0.14 之后的引入的3个js文件，与 react0.14 之前的引入文件有所不同，react0.14之前只需要引入2个 js 文件,如下：
<script src="lib/react.min.js"></script>
<script src="lib/JSXTransformer.min.js"></script>
其中，react.min.js被拆分成了 react.min.js 和 react-dom.min.js ；JSXTransformer.min.js 被替换成了 browser.min.js。
跨域报错
原本打算将 <script type="text/babel">...</script>中的 js 代码独立出一个 js 文件，再引入进来的：<script src="index.js" type="text/babel"></script>，结果报了跨域的错误。
官网已有声明：Note that some browsers (Chrome, e.g.) will fail to load the file unless it's served via HTTP.
解决办法：1、安装一个服务器，如Tomcat；2、用前端开发神器 webstorm 编辑器打开，webstorm打开html文件本来就是在服务器环境上运行的。
ReactDOM.render、React.render 这俩有啥区别？
React 0.14之后，react package 一分为二：react 、react-dom；
其中，
react 包含：React.createElement、 .createClass、 .Component， .PropTypes， .Children；
react-dom 包含：ReactDOM.render、 .unmountComponentAtNode、 .findDOMNode。

不断地做实例demo，从中才会深入理解、收货喜悦哦！！！

本文中的代码地址：demo1