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