最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

React入门总结

XAMPP新闻 admin 923浏览 0评论

概念
React元素
元素是构成 React 应用的最小单位。

ReactDOM.render()
ReactDOM.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点。

ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById(‘root’)
);
JSX
一种 JavaScript 的语法扩展。

你可以任意地在 JSX 当中使用 JavaScript 表达式,在 JSX 当中的表达式要包含在大括号里。
在编译之后呢,JSX 其实会被转化为普通的 JavaScript 对象。
JSX 属性
你可以使用引号来定义以字符串为值的属性:
const element = <div tabIndex=”0″></div>;
也可以使用大括号来定义以 JavaScript 表达式为值的属性:

const element = <img src={user.avatarUrl} />;
组件
函数定义
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
类定义
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
props
当React遇到的元素是用户自定义的组件,它会将JSX属性作为单个对象传递给该组件,这个对象称之为“props”。

function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name=”Sara” />;
ReactDOM.render(
element,
document.getElementById(‘root’)
);
如上,name属性。

组件名称必须以大写字母开头。
组合组件
组件的返回值只能有一个根元素。

function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

function App() {
return (
<div>
<Welcome name=”Sara” />
<Welcome name=”Cahal” />
<Welcome name=”Edite” />
</div>
);
}

ReactDOM.render(
<App />,
document.getElementById(‘root’)
);

转载请注明:XAMPP中文组官网 » React入门总结

您必须 登录 才能发表评论!