学习地址：新手指南 ReactJS 视频，以下标题均采用链接+视频时长的方式展示
有条件地渲染一个 React 组件（2:43）
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
<script src="https://cdn.bootcss.com/react/16.2.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.2.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js"></script>
<script type="text/babel">
function Message({ message }) {
// 简化后版本
// return message ? React.createElement('div',null,message):React.createElement('div',null,'No mesage');
// 最精简版本
return <div>{message ? <div>{message}</div> : <div>No message</div>}</div>;
// 原始版本
// if(!message){
// return React.createElement('div',null,'No mesage')
// }
// return <div>{message}</div>
}
ReactDOM.render(<Message message={'hi'} />, document.getElementById('root'));
</script>
</body>
</html>渲染 React 组件（3:17）
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
<script src="https://cdn.bootcss.com/react/16.2.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.2.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js"></script>
<script type="text/babel">
const rootElement = document.getElementById('root');
function tick() {
const time = new Date().toLocaleTimeString();
const element = <div>It is {time}</div>;
ReactDOM.render(element, rootElement);
// 注意渲染的范围，react比原生es6的渲染范围小
// const element = `<div>It is ${time}</div>`
// rootElement.innerHTML = element;
}
tick();
setInterval(tick, 1000);
</script>
</body>
</html>React 样式（5:36）
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
<script src="https://cdn.bootcss.com/react/16.2.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.2.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js"></script>
<style>
.box {
border: 1px solid #000;
}
.box-big {
width: 150px;
height: 150px;
}
.box-medium {
width: 100px;
height: 100px;
}
.box-small {
width: 50px;
height: 50px;
}
</style>
<script type="text/babel">
function Box({ style, size, className = '', ...props }) {
const sizeClassName = size ? `box-${size}` : '';
return (
<div
className={`box ${className} ${sizeClassName}`.trim()}
style={{ paddingLeft: 20, ...style }}
{...props}
></div>
);
}
const element = (
<div>
<Box size='small' style={{ backgroundColor: 'title' }}>
box-small
</Box>
<Box size='medium' style={{ backgroundColor: 'pink' }}>
box-medium
</Box>
<Box size='big' style={{ backgroundColor: 'orange' }}>
box-big
</Box>
</div>
);
ReactDOM.render(element, document.getElementById('root'));
</script>
</body>
</html>