[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 特点

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

React JSX

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 id="example"></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 id="example"></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 id="example"></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