[React] 01 - Intro: javaScript library for building user interfaces

教学视频: http://www.php.cn/code/8217.html

React 教程: http://www.runoob.com/react/react-tutorial.html

本篇是菜鸡水准了解轮廓的难度等级，菜鸡啄米，叽叽喳喳

先介绍仨工具：

Babel: 用于编写下一代 JavaScript 的编译器
jspm: 是一个一个浏览器端包管理器；SystemJS加载js的模块，也有Babel编译js，JSX编译为js。jspm & SystemJS 教程
webpack: WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。什么是WebPack，为什么要使用它？

创建工程

Ref: https://blog.csdn.net/rical730/article/details/77206601

1. 先安装：nodejs npm

2. 新建一个项目文件夹。

mkdir React & cd React

3. 使用 create-react-app 快速构建 React 开发环境

sudo npm install -g create-react-app
create-react-app my-app

4. 安装结束

cd my-app
npm start

5. 其他（option）

sudo npm install -g browser-sync
　　Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。
　　更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。

jspm install semantic-ui 

jspm install css

npm start 时，可见实际执行的是：npm run dev，而dev指得是另一坨东西。

babel 帮助将es6编译为es5，而后执行。

[React] 01 - Intro: javaScript library for building user interfaces

React 特点

1.声明式设计 −React采用声明范式，可以轻松描述应用。
2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

React JSX

[React] 01 - Intro: javaScript library for building user interfaces

Figure, 可见不适用jsx写的形式（下面），可读性很差。

React 使用 JSX 来替代常规的 JavaScript。

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

我们不需要一定使用 JSX，但它有以下优点：

- JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
- 它是类型安全的，在编译过程中就能发现错误。
- 使用 JSX 编写模板更加简单快速。

代码实例

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8" />
    <title>菜鸟教程 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 ></div>
    <script type="text/babel">
      ReactDOM.render(
          <div>
          <h1>菜鸟教程</h1>
          <h2>欢迎学习 React</h2>
          <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>　　 // p 元素添加了自定义属性 data-myattribute，需要使用 data- 前缀。
          </div>　　// 第一个参数
          ,
          document.getElementById('example')　　// 第二个参数
      );
   </script>
  </body>
</html>

独立文件

<!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 ></div>
     <script type="text/babel" src="helloworld_react.js"></script>　　//　另外存在单独文件更好
  </body>
</html>

不能 if ... else

// 在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代

ReactDOM.render(
    <div>
      <h1>{i == 1 ? 'True!' : 'False'}</h1>
    </div>
    ,
    document.getElementById('example')
);

样式

React 推荐使用内联样式。

我们可以使用 camelCase 语法来设置内联样式.

React 会在指定元素数字后自动添加 px 。

以下实例演示了为 h1 元素添加 myStyle 内联样式：

var myStyle = {
    fontSize: 100,
    color: '#FF0000'
};
ReactDOM.render(
    <h1 style = {myStyle}>菜鸟教程</h1>,
    document.getElementById('example')
);

数组

JSX 允许在模板中插入数组，数组会自动展开所有成员：

var arr = [
  <h1>菜鸟教程</h1>,
  <h2>学的不仅是技术，更是梦想！</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

React 组件

组件类：开头大写React.createClass。

var HelloMessage = React.createClass({　　　　// 组件类 HelloMessage
  render: function() {
    return <h1>Hello World！</h1>;
  }
});
 
ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

传参数：向组件传递参数，可以使用 this.props 对象,实例如下：

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;　　　// name 属性通过 this.props.name 来获取。
  }
});
 
ReactDOM.render(
  <HelloMessage name="Runoob" />,
  document.getElementById('example')
);

复合组件：创建多个组件来合成一个组件，把组件的不同功能点进行分离。

var WebSite = React.createClass({
  render: function() {
    return (
      <div>
        <Name name={this.props.name} />
        <Link site={this.props.site} />
      </div>
    );
  }
});
 
var Name = React.createClass({
  render: function() {
    return (
      <h1>{this.props.name}</h1>
    );
  }
});
 
var Link = React.createClass({
  render: function() {
    return (
      <a href={this.props.site}>
        {this.props.site}
      </a>
    );
  }
});
 
ReactDOM.render(
  <WebSite name="菜鸟教程" site=" http://www.runoob.com" />,
  document.getElementById('example')
);

React State(状态)

React 把组件看成是一个状态机（State Machines）。通过

- 与用户的交互，实现不同状态，
- 然后渲染 UI，让用户界面和数据保持一致。

根本思想：React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

例子：创建了 LikeButton 组件

1. getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。

2. 当用户点击组件，导致状态变化，this.setState 方法就修改状态值，

3. 每次修改以后，自动调用 this.render 方法，再次渲染组件。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>菜鸟教程 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 ></div>
    <script type="text/babel">
      var LikeButton = React.createClass({
        getInitialState: function() {　　　　　　　　　　　// 1 定义初始状态，也就是一个对象
          return {liked: false};
        },
        handleClick: function(event) {
          this.setState({liked: !this.state.liked});　　// 2 有点击事件，就改变状态：setState ----> render func
        },
        render: function() {                           // 3 渲染组件，
          var text = this.state.liked ? '喜欢' : '不喜欢';
          return (
            <p onClick={this.handleClick}>
              你<b>{text}</b>我。点我切换状态。
            </p>
          );
        }
      });

      ReactDOM.render(
        <LikeButton />,
        document.getElementById('example')
      );
    </script>
  </body>

</html>

React Props

props 是不可变的：子组件只能通过 props 来传递数据

state 可以根据与用户交互来改变：有些容器组件需要定义 state 来更新和修改数据。

var HelloMessage = React.createClass({
  getDefaultProps: function() {
    return {
      name: 'Runoob'
    };
  },
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});
 
ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

分离的例子：（其实就是复合组件）

---------------------------------------------------------------
# 定义一个大组件

var WebSite = React.createClass({
  getInitialState: function() {
    return {
      name: "菜鸟教程",
      site: "http://www.runoob.com"
    };
  },
render: function() {　　　　// 1.0 在render函数中, 我们设置 name 和 site 来获取父组件传递过来的数据
    return (
      <div>
        <Name name={this.state.name} />　　　　　　// 在父组件中设置 state
        <Link site={this.state.site} />
      </div>
    );
  }
});

---------------------------------------------------------------
# 定义大组件中的两个小组件
var Name = React.createClass({
  render: function() {
    return (
      <h1>{this.props.name}</h1>　　　　　　　　　　// 2.1 在子组件上使用 props 将其传递到子组件上
    );
  }
});
 
var Link = React.createClass({
  render: function() {
    return (
      <a href={this.props.site}>
        {this.props.site}　　　　　　　　　　　　　　// 2.2 在子组件上使用 props 将其传递到子组件上
      </a>
    );
  }
});
 
---------------------------------------------------------------

ReactDOM.render(
  <WebSite />,
  document.getElementById('example')
);

Props 验证

实例创建一个 Mytitle 组件，属性 title 是必须的且是字符串，非字符串类型会自动转换为字符串：

var title = "菜鸟教程";
// var title = 123;　　<---- 非字符串类型会自动转换为字符串 
var MyTitle = React.createClass({
  propTypes: {
    title: React.PropTypes.string.isRequired,
  },
 
  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});
ReactDOM.render(
    <MyTitle title={title} />,
    document.getElementById('example')
);

更多验证器说明如下：

React.createClass({
  propTypes: {
    // 可以声明 prop 为指定的 JS 基本数据类型，默认情况，这些数据是可选的
   optionalArray: React.PropTypes.array,
    optionalBool: React.PropTypes.bool,
    optionalFunc: React.PropTypes.func,
    optionalNumber: React.PropTypes.number,
    optionalObject: React.PropTypes.object,
    optionalString: React.PropTypes.string,
 
    // 可以被渲染的对象 numbers, strings, elements 或 array
    optionalNode: React.PropTypes.node,
 
    //  React 元素
    optionalElement: React.PropTypes.element,
 
    // 用 JS 的 instanceof 操作符声明 prop 为类的实例。
    optionalMessage: React.PropTypes.instanceOf(Message),
 
    // 用 enum 来限制 prop 只接受指定的值。
    optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
 
    // 可以是多个对象类型中的一个
    optionalUnion: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number,
      React.PropTypes.instanceOf(Message)
    ]),
 
    // 指定类型组成的数组
    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
 
    // 指定类型的属性构成的对象
    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
 
    // 特定 shape 参数的对象
    optionalObjectWithShape: React.PropTypes.shape({
      color: React.PropTypes.string,
      fontSize: React.PropTypes.number
    }),
 
    // 任意类型加上 `isRequired` 来使 prop 不可空。
    requiredFunc: React.PropTypes.func.isRequired,
 
    // 不可空的任意类型
    requiredAny: React.PropTypes.any.isRequired,
 
    // 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。
    customProp: function(props, propName, componentName) {
      if (!/matchme/.test(props[propName])) {
        return new Error('Validation failed!');
      }
    }
  },
  /* ... */
});

获取自定义组件的属性 - this.props.children

在render中，Child有了属性children，自然地，获取时就使用this.props.children。

this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。

它表示组件的所有子节点：【所有子节点可能有三种不同的情况】

如果当前组件没有子节点，它就是 undefined ;
如果有一个子节点，数据类型是 object ；
如果有多个子节点，数据类型就是 array 。【这个是正常情况】

var HelloWorld = React.createClass({
     render:function(){
        return (
             <ul>
              {
                   React.Children.map(this.props.children, function (value, key) {　　// 1. 获取子节点
                          return <li>{value}----{key}</li>;                          // 2. 以怎样的html形式展现
                   })
               }
             </ul>
        );
     }
 });
 ReactDOM.render(
   <HelloWorld>
     <span>思考思考</span>
     <span>瞬间即逝</span>
     <span>阿达瓦得</span>
   </HelloWorld>,
   document.getElementById('root'));

Result: 
思考思考—-0 
瞬间即逝—-1 
阿达瓦得—-2