React入门指南2

Veröffentlicht am

快速启动一个React页面!

macOS 或者 Linux 当中用create-react-app可以快速启动一个React页面：

1
2
3
4
5
npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start

然后打开src/App.js编辑页面内容即可，页面服务在 http://localhost:3000/

JSX

React支持的的JSX语法能够让HTML的语言直接卸载啊JavaScript语言之中，不需要加任何引号，它允许HTMl和JavaScript混写。

1
2
3
4
5
6
7
8
9
10
11
12
var speeds = [23,45,56];
    ReactDOM.render(
        <div>
            {
                speeds.map(function(speed){
                    return <div>This Car speed is {speed} km/h!</div>
                })
            }
        </div>,
         document.getElementById('index')
    )

上述的代码体现了JSX的基本规则，就是遇到HTML标签就用HTML的会泽解析；遇到JavaScript，就用JavaScript规则解析。

JSX允许直接在模版内插入JavaScript的变量，如果这个变量时一个数组就会遍历这个数组。

1
2
3
4
5
6
7
8
9
var arr = [
   <li>this is one</li>,
   <li>this is two</li>,
   <li>this is three</li>,
   ];
   ReactDOM.render(
       <ul>{arr}</ul>,
       document.getElementById('index')
   );

模块化

React 允许将代码封装成组件，然后像插入HTML的标签一样，在网页中插入这个组件。使用React.createrClass方法进行生成组件。
JSX中使用’{}’符号来定义变量。

我们可以使用ES6类来定义组件：

1
2
3
4
5
6
7
8
class HelloMessage extends React.Component {
	render() {
		return <h1>Hello,{this.props.name}</h1>
	}
	ReactDOM.render(
        <HelloMessage name = "World" />,
        document.getElementById('index')
}

我们也可以正常的使用JSX进行定义组件，两个效果时相同的：

1
2
3
4
5
6
7
8
9
10
var HelloMessage = React.createClass({
        render :function(){
            return <h1>Hello {this.props.name}</h1>;
        }
    });
    ReactDOM.render(
        <HelloMessage name = "World" />,
        document.getElementById('index')
    )

上述代码中，HelloMessage 就是一个组件类。模版插入<HelloMessage />时会自动生成一个HelloMessage的实例，所有的组件类都有自己的render用于输出组件。

在对组件进行命名的时候，首字母必须要大写，不然浏览器会报错，另外，组件类职能包含一个HTML的顶层标签，其他标签必须包裹在顶层标签内，不然浏览器也会报错。

组件的用法和HTML的标签完全一致，可以任意加入该组件的属性<HelloMessage speed=32>这个表示了该组件加入了一个 speed 值，他的值为32，组件的属性可以在组件类的this.props对象中获取，比如speed属性就可以通过this.props.speed读取。

当然，变量也可以表示用户定义的组件：

1
2
3
4
5
6
7
8
9
10
var HelloMessage = React.createClass({
        render :function(){
            return <h1>Hello {this.props.name}</h1>;
        }
    });
	const element = <HelloMessage name = "World" />;
    ReactDOM.render(
        element,
        document.getElementById('index')
    )

有些组件属性在命名上要注意，比如class,for属性需要写成className,htmlFor。因为这个事JavaScript的保留字。

PropTypes

组件的属性可以接受任何值，字符串，对象，函数等，又是我们想要验证组件的属性是否符合要求的时候，这个时候就要用到PropsType的属性。

组件类的PropTypes属性，是用来验证组件实例的属性是否符合要求：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var data ="123";
    var MyTitle = React.createClass({
        propTypes: {
            title: React.PropTypes.string.isRequired,
        },
        render: function() {
            return <h1>{this.props.title}</h1>
        }
    });
    ReactDOM.render(
        <MyTitle title={data} />,
        document.body
    );

MyTitle组件添加了title属性，PropTypes告诉React，这个title的属性的值必须为字符串，如果上述的data变量不是字符串的话，浏览器就会报错。

此外getDefaultProps方法可以用来设置组件属性的默认值：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var MyTitle = React.createClass({
        getDefaultProps : function(){
            return {
                title : 'this is title!!'
            };
        },
        render: function() {
            return <h1>{this.props.title}</h1>;
        }
    });
    ReactDOM.render(
        <MyTitle />,
        document.body
    );