React 2 hello world

React 特点

1. 声明式设计 −React采用声明范式，可以轻松描述应用。

2. 高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。

3. 灵活 −React可以与已知的库或框架很好地配合。

4. JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。

5. 组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

6. 单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

---

React 第一个实例

webpack.config.js npm install react react-dom --save-dev (webpack.config.js的相关配置可以看→webpack 3 最终版)

ps: 这里不做html里面如何引入react、react-dom的教程了。。。

import React from 'react';
import ReactDOM from 'react-dom';

const app = document.createElement('div');
document.body.appendChild(app);

ReactDOM.render(
  <h1>Hello, world!</h1>,
  app
);

运行结果如下：

ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。

• jsx写法

  基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。

  import React from 'react';
  import ReactDOM from 'react-dom';
  
  const app = document.createElement('div');
  document.body.appendChild(app);
  
  var names = ['Alice', 'Emily', 'Kate'];
  
  ReactDOM.render(
      <div>
        {
          names.map(function(item, index) {
              return <h3>{`hello ${item}`}</h3>
            })
          }
    </div>,
    app
  );

  运行结果如下：

  

  注意：

  • render 代码中嵌套多个 HTML 标签，需要使用一个标签元素包裹它

  • 注释问题：

    1. 在标签内部的注释需要花括号
    2. 在标签外的的注释不能使用花括号

    ReactDOM.render(
     /*我是注释*/
      <h1>Hello, world!{/*我是注释*/}</h1>,
      app
    );

• jsx样式

  写法一：

  var names = ['Alice', 'Emily', 'Kate'];
  var myStyle = {
      fontSize: 100,
      color: '#FF0000'
  };
  ReactDOM.render(
      <div>
        {
          names.map(function(item, index) {
              return <h3 style={myStyle}>{`hello ${item}`}</h3>
            })
          }
    </div>,
    app
  );

  写法二：

  var names = ['Alice', 'Emily', 'Kate'];
  ReactDOM.render(
      <div>
        {
          names.map(function(item, index) {
              return 
                  <h3 style={{
                      fontSize: 100,
                      color: '#FF0000'
                  }}>
                      {`hello ${item}`}
                  </h3>
          })
          }
    </div>,
    app
  );

运行结果如下图：

---

React 组件 component

React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。

• 简单的组件 HelloMessage

  import React from 'react';
  import ReactDOM from 'react-dom';
  
  const app = document.createElement('div');
  document.body.appendChild(app);
  
  var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello World！</h1>;
  }
  });
  
  ReactDOM.render(
  <HelloMessage />,
  app
  );

  运行结果同图一 ~~

  注意:

  1. 原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。

  2. 在引用组件类的时候一定要封口！！组件名是用单标签< />即带斜杠”/”的尖括号包围的，不封口就报错哦！！

• 可以向子组件传参的实例 props

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name} !</h1>;
  }
});

ReactDOM.render(
  <HelloMessage name="小仙女儿~"/>,
  app
);

子组件通过this.props获取父组件传递的信息

• 复合组件

我们可以通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离。

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://blog.youkuaiyun.com/zula1994" />,
  app
);

运行结果如下：

我觉得组件就是搭积木，弄清楚信息的传递流向，基本就不会出问题了~

详细代码请戳→react-demo

下一篇就是详解react component 的3种写法~~ 敬请期待 撒花（づ￣3￣）づ╭❤～