搭建程序
- 安装官方脚手架:
$ 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
