React入门总结

官方文档：React概念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’));