React从入门到开发

搭建程序

• 安装官方脚手架:$ npm install -g create-react-app

create-react-app my-app
cd my-app
npm start

快速创建React单页面应用

1 第一个应用HelloWorld

// index.js
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <h1>Hello, world!<h1/>,
    document.getElementById('root')
);

id为root的div <div id="root"></div>
调用ReactDOM.render()将React元素渲染进root的DOM节点中

2 自定义组件

import React from 'react';
class MyApp extends React.Component {
    render() {
        return (
            <div>
                请输入你的邮箱：<input/>
            </div>
        );
    }
};
export  default MyApp;

// index.js
import MyApp from './MyComponents/MyApp.js';
ReactDOM.render(
    <MyApp/>,
    document.getElementById('root')
);

在这个组件代码底部添加export default MyApp;抛出去
使用时引入这个组件import MyApp from './MyComponents/MyApp.js';

3 JSX语法

HTML语言直接写在 JavaScript 语言之中，不加任何引号

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

var arr = [
    <h2>Alice</h2>,
    <h2>Michel</h2>,
    <h2>jack</h2>,
];

ReactDOM.render(
    <div>{ arr }</div>,
    document.getElementById('root')
);

直接{ arrName }插入JavaScript 变量。如果是数组，直接展开展开

4 this.props

class Hello extends React.Component {
    render() {
        return <h1>你好啊 {this.props.name}</h1>
    };
}
ReactDOM.render(
    <Hello name='junchen'/>,
    document.getElementById('root')
)

• React.createClass在最新版已经取消
• 所有组件都必须有自己的 render() {###} 用于输出
• 组件的第一个字母必须大写，否则会报错
• 组件只能包含一个顶层标签，否则也会报错
  • return <h1>第一个</h1><p>第二个顶层类</p>
• 组件的属性可以用this.props获取
  • 组件 class属性需要写成 className
  • for 属性要写成 htmlFor，因为它们的保留字。

5 this.state

组件作为状态机，状态变化触发渲染UI