react学习笔记01

被项目拖了半年的我终于有时间学习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')
);