JSX语法
JSX就是Javascript和XML结合的一种格式。
React发明了JSX,利用HTML语法来创建虚拟DOM。
当遇到<,JSX就当HTML解析,
遇到{就当JavaScript解析。
来点代码
注意:script三个导入要按顺序来
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
<body>
<div id="root"></div>
<script type="text/babel">
let num=1;
let str='hello world';
function fnReverse(str){
return str.split('').reverse.join('');
}
let el=(
<div>
<h1>abc<h1>
<p>123</p>
<p>{str}</p>
<p>{str.split('').reverse().join('')}</p>
<p>{fnReverse(str)}</p>
<p>ok? 'true':'false'</p>
<p>1==2? 'yes':'no'</p>
</div>
);
ReactDOM.render(el,document.getElementById('root'));
</script>
</body>
组件和属性
组件最终要返回一个JSX对象
不过它和JSX对象的区别是
它在JSX对象的基础上
还带有自己的方法和属性
能完成自己的交互功能
组件有两种定义方式
1.函数式定义
2.类定义
函数式定义组件
function welcome(props){
return <h1>hello,{props.name}</h1>;
}
类方式定义组件
class Welcome extends React.Component{
render(){
return <h1>hello,{this.props.name}</h1>;
}
}
组件渲染
组件渲染和JSX对象一样,可以通过ReactDOM.render()方法来渲染组件
function Welcome(props){
return <h1>hello,{props.name}</h1>;
}
const element=<Welcome name="Alice" />
ReactDOM.render(){
element,
document.getElementById('root')
};
继续代码
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
<body>
<div id="root"><div>
<script type="text/babel">
function Welcome(props){
return <h1>hello,{props.name}<h1>;
}
ReactDOM.render(<Welcome name="Alice" />,
document.getElementById('root')
)
</script>
</body>
类方式定义组件
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
<body>
<div id="root"></div>
<script type="text/babel">
class Welcome extends React.Component{
render(){
return(
<h1>hello,{this.props.name}</h1>
);
}
}
ReactDOM.render(<Welcome name="Alice" />,
document.getElementById('root')
);
</body>
组件的嵌套使用
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
<body>
<div id="root"></div>
<script type="text/babel">
class Welcome extends React.Component{
render(){
return(
<h1>hello,{this.props.name}</h1>
);
}
}
class App extends React.Component{
render(){
return(
<div>
<Welcome name="abc01" />
<Welcome name="abc02" />
<Welcome name="abc03" />
<Welcome name="abc04" />
</div>
);
}
}
ReactDOM.render(<Welcome name="Alice" />,
document.getElementById('root')
);
</body>