react初探：JSX渲染

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_27603235/article/details/79320946

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')
);
这段最终的渲染代码需要放到最后，否则无法读取元素变量，无法渲染页面。