Hello world
程序员第一个程序必定是 Hello World!
Html:
<div id="root">
<!-- This div's content will be managed by React. -->
</div>
Javascript:
ReactDOM.render(
<h1>Hello, world!</h1>
document.getElementById('root')
);
在线代码编辑器(在线IDE):
https://codepen.io/gaearon/pen/ZpvBNJ?editors=0010
JSX
下面是一个简单的JSX语法,看着是javascript和html的混合体。无需关心它底层是如何实现的,直接使用即可。
const element = <h1>Hello, world!</h1>;
可以在其中加入表达式:
function formatName(user) {
return user.firstName + user.lastName;
}
const user = {
firstName: 'Tom',
lastName: 'White'
};
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
};
ReactDOM.render(
element,
document.getElementById('root');
);
JSX 语句本身也可以是表达式
function getGreeting(user) {
if(user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
JSX 也可以设定属性
const element = <div tabIndex="0"></div>;
const anotherElement = <img src={user.avatarUrl}></img>;
JSX 也可以有children
const emptyElement = <img src={user.avatarUrl}/>;
const elementHasChildren = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);
JSX 表示的 Object
下面的两个例子是等价的:
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
React 最终创建的 object 可以用下面的代码简化表示
// Note: this structure is simplified
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world'
}
};
渲染 element
如 Hello world 的例子,React 找到 对应的 DOM 中的节点,然后把内容渲染进去:
Html:
<div id="root">
<!-- This div's content will be managed by React. -->
</div>
Javascript:
ReactDOM.render(
<h1>Hello, world!</h1>
document.getElementById('root')
);
一个更新element的例子:
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById('root')
);
}
setInterval(tick, 1000);
组件和属性 Components and Props
使用 Function 或者 Class 来定义 Component
下面两种方式是等价的:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
class Welcome extends React.Component {
render() {
return <h1>Hello, {props.name}</h1>;
}
}
如何渲染一个 component
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root');
);
步骤:
1. 调用 ReactDOM.render
来渲染 <Welcome name="Sara" />
。
2. React 调用带属性 {name: 'Sara'}
的 Welcome
component。
3. Welcome
component 返回 <h1>Hello, Sara</h1>
作为结果。
4. React DOM 更新真实的 DOM 使它和 <h1>Hello, Sara</h1>
一致。
复合组件
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
将一个复杂的组件拆分为一系列小组件
原始代码:
function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
<img className="Avatar"
src={props.author.avatarUrl}
alt={props.author.name}
/>
<div className="UserInfo-name">
{props.author.name}
</div>
</div>
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}
转化结果:
function Avatar(props) {
return (
<img className="Avatar"
src={props.user.avatarUrl}
alt={props.user.name}
/>
);
}
function UserInfo(props) {
return (
<div className="UserInfo">
<Avatar user={props.user} />
<div className="UserInfo-name">
{props.user.name}
</div>
</div>
);
}
function Comment(props) {
return (
<div className="Comment">
<UserInfo user={props.author} />
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}