JSX 是JavaScript的扩展语法,具备了JavaScript的全部能力,在react中推荐使用JSX 来作为渲染组件的元素。下面一起来看一下他的语法规则。
import React from 'react';
import ReactDOM from 'react-dom';
// import Hello from '@/component/print.js/Hello';
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello,{formatName(user)}!
</h1>
);
ReactDOM.render(
element,
document.getElementById('root')
);
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
if(module.hot){
module.hot.accept()
}
注:这里只做了代码的分享,react的环境搭建就不在这里介绍了,网上有很多资料,如果嫌麻烦的话,可以使用react 官方推荐的 “ create-react-app” 脚手架快速构建环境。还需注意的一点是,JSX的渲染是从上到下的,ReactDOM.render(
element,
document.getElementById('root')
);
这段最终的渲染代码需要放到最后,否则无法读取元素变量,无法渲染页面。