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(
    
Hello, world!
,
    document.getElementById('root')
);

id为root的div

调用ReactDOM.render()将React元素渲染进root的DOM节点中

2 自定义组件

import React from 'react';
class MyApp extends React.Component {
    render() {
        return (
            

                请输入你的邮箱：
            
        );
    }
};
export  default MyApp;

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

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

3 JSX语法

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

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

var arr = [
    
Alice
,
    
Michel
,
    
jack
,
];

ReactDOM.render(
    
{ arr }
,
    document.getElementById('root')
);

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

4 this.props

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

• React.createClass在最新版已经取消
• 所有组件都必须有自己的 render() {###} 用于输出
• 组件的第一个字母必须大写，否则会报错
• 组件只能包含一个顶层标签，否则也会报错
  • return

    第一个

    第二个顶层类

• 组件的属性可以用this.props获取
  • 组件 class属性需要写成 className
  • for 属性要写成 htmlFor，因为它们的保留字。

5 this.state

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