React学习

1.React运用的js

react主要用到的是其中的/react.js和react-dom.js，而编写js文件时，因为react有自己的一套语法，需要babel.js转码

<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>

<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>

<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

2.React的JSX语法

语法：const element = <h1>hello,world!</h1>;

JSX代表JS对象，他是JavaScript语法扩展，在react中可以方便的用来描述UI。JSX本身也是一个表达式，在编译后，JSX表达式会变成普通的JavaScript对象，你可以将它赋值给变量，可以将他作为参数，也可以在函数中返回JSX。

eg：if语句中使用JSX，并将JSX作为函数返回值。实际上经过编译后会变成JavaScript对象

 

function text(user){

if(user){

　　return <h1>{hello,formatName(user)}!</h1>

}

　　return <h1>hello,youself</h1>

}

经过babel编译后\

function text(user){

if(user){

　　return React.createElement(

　　　　"h1",

　　　　null,

　　　　"hello,",

　　　　formatStr(user),

　　　　"!"

　　);

}

　　return React.createElement(

　　　　"h1",

　　　　null,

　　　　"hello,youself"

　　);

}

常用的表达式

• 变量名；
• 函数定义表达式；
• 属性访问表达式；
• 函数调用表达式；
• 算数表达式；
• 关系表达式；
• 逻辑表达式；

要注意的是if语句以及for循环不是JavaScript表达式，不能直接作为表达式写在{}中，但是可以先将其赋值给一个变量（变量是一个JavaScript表达式）

eg:

function texts (pro){

let des;

if(pro.number % 2 ==0){

　　des = <strong>even</strong>;

}else{

　　des = <i>odd</i>

}

　　return<div>{props.number} is an {description} number</div>;

}

/react.min.js