被项目拖了半年的我终于有时间学习react 了
下面是我最近学习的笔记
支持jsx语法
ReactDOM.render(
<div>
<h1>hello, word</h1>
<h2>欢迎学习 React</h2>
<p data-myattribute = "somevalue"></p>
</div> , document.getElementById('example')
);
语法 : ReactDOM.render( dom结构 , 父dom )
支持独立运行
Hello.js
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
); index.html
<div id="example"></div>
<script type="text/babel" src="helloworld_react.js"></script>
js表达式
ReactDOM.render(
<div> <h1>{ 1==1 ? "true" : "false" }</h1> </div> , //不支持if else 语句但是支持三元运算符
document.getElementById('example')
);
css样式
var myStyle = {
fontSize: 100, // number类型 react.js会自动帮你补上px
color: '#FF0000'
};
ReactDOM.render(
<h1 style = {myStyle}>hello, word</h1>,
document.getElementById('example')
);
注释
ReactDOM.render(
/*注释 1*/
<h1>
hello word
{/*注释2*/} //注释只能写在 js中
</h1>,
document.getElementById('example')
);