react20180327

1.

react需要引入三个js文件，分别是react.js，这是react的核心文件； react-dom.js，它提供了一些与dom有关的方法；

babel.js，它会将react特有的jsx语法转化为普通的JavaScript语法。

2.

<script type="text/javascript">

<script type="text/babel">

<script type="text/jsx"> 

3.

可以使用src引入JSX文件

<script type="text/babel" src="helloworld_react.js"></script>

4.花括号{}用法1--使用JS表达式

我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中

ReactDOM . render (

< div >

< h1 > { 1 + 1 } </ h1 >

</ div > ,

document . getElementById ( ' example ' )

) ;

5.花括号{}用法2--使用数组

var arr = [ <h1>菜鸟教程</h1>, <h2>学的不仅是技术，更是梦想！</h2>,];

ReactDOM.render(

<div>{arr}</div>,

document.getElementById('example')

);

6.花括号{}用法3--引入图片路径

class App extends Component {

render() {

return (

<div className="App">

<div className="App-header">

<img src={logo} className="App-logo" alt="logo" />

<h2>欢迎来到菜鸟教程</h2>

</div>

<p className="App-intro"> 你可以在 <code>src/App.js</code> 文件中修改。 </p>

</div> );

}

}

7.花括号{}用法4--导入模块

一个模块的默认导出只能有一个，但是命名导出可以有多个，如

import A, {MyA，MyX} from './A';

8.花括号{}用法5--标签内注释

1、在标签内部的注释需要花括号

2、在标签外的的注释不能使用花括号

ReactDOM.render(
    /*注释 */
    <h1>孙朝阳 {/*注释*/}</h1>,
    document.getElementById('example')
);

9.

React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。

10.react创建组件是用

var HelloMessage = React.createClass({

        render: function() {
          return <h1>Hello World！</h1>;
        }
      });

React.createClass 方法用于生成一个组件类 HelloMessage。

<HelloMessage /> 实例组件类并输出信息。

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

11.举的例子

return (
   <h1>
     Hello {this.props.name}
   </h1>
   <p>
     some text
   </p>
);

就是相当于暴露了两个标签<h1/>, <p/>，这样写是会报错的，必须由一个标签包裹起来。

return (
    <div>
        <h1>
          Hello {this.props.name}
        </h1>
        <p>
          some text
        </p>
    </div>
);

看到里面的<div>吗，就是所谓的“顶层标签”。

12.花括号{}用法6--传递参数和组件里面获取要渲染的属性

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

React 实例

var HelloMessage = React . createClass ( {

    render : function ( ) {

        return < h1 > Hello { this . props . name } </ h1 >;

    }

} ) ;

ReactDOM . render (

    < HelloMessage name = " Runoob " />,

    document . getElementById ( ' example ' )

) ;

注意，在添加属性时， class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。

下面的代码演示了如何使用key/value的形式指定属性：

[html]  view plain  copy

1. React.render(  
2.     <HelloWorld name="Jack"/>,  
3.     document.getElementById('container')  
4. );  

可以看到，在自定义的HelloWorld组件中，我们指定了一个name为Jack的属性，在组件中，获取属性的方法如下代码：

[html]  view plain  copy

1. var HelloWorld = React.createClass({  
2.     render: function() {  
3.         return (  
4.             <div>Hello, {this.props.name}</div>  
5.         );  
6.     }  
7. });  

在{}中，通过this.props.name，就可以获取到我们指定的name属性的值了。

13.

我们可以通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离。例如二合一就要先将两个组件写好，再将这两个组件写到一个组件里面去，渲染调用的时候就调用最后写的大组件里面去，不过大组件一般写在上面，先写好两个组件的名字，再写两个组件

14.

组件名不一定是用单标签，也可以是双标签

<HelloMessage /> == <HelloMessage></HelloMessage>

XML 的重点有且仅有一个根标签。

15.花括号{}使用7--传递事件处理函数

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

getInitialState: function() {

          return {liked: false};
        },
        handleClick: function(event) {
          this.setState({liked: !this.state.liked});
        },

16.

var LikeButton = React.createClass({
        getInitialState: function() {
          return {liked: false};
        },
        handleClick: function(event) {
          this.setState({liked: !this.state.liked});
        },
        render: function() {
          var text = this.state.liked ? '喜欢' : '不喜欢';
          return (
            <p onClick={this.handleClick}>
              你<b>{text}</b>我。点我切换状态。
            </p>
          );
        }
      });

react 需要引入三个 js 文件，分别是 react .js ，这是 react 的核心文件； react-dom .js ，它提供了一些与 dom 有关的方法； babel .js ，它会将 react 特有的 jsx 语法转化为普通的 JavaScript 语法。