JSX使用方式
X表示扩展，JSX则是JS的扩展版
使用babel-loader即可使用类似Vue的标签式写法。
方法一：使用CDN引入
引入babel.min.js
把<script>改成<script type="text/babel">
babel会自动进行转译
示例：
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/react/16.10.2/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.10.2/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
<script type="text/babel">
let n = 0;
const App = () => (
<div>//React.createElement('div')
{n}
<button
onClick={() => {
n += 1;
render();
}}
>
+1
</button>
</div>
);
const render = () =>
ReactDOM.render(<App />, document.querySelector("#app"));
render();
</script>
</body>
总结一下就是用标签的写法进行书写，如果要插入JS的变量或者函数就用{}括起来。
**但是这种方式不适合生产环境，效率较低。**它需要下载一个babel.min.js，还要在浏览器将JSX翻译成JS。
方法二：webpack+babel-loader
方法三：create-react-app
全局安装yarn global add create-react-app
初始化目录create-react-app react-demo-1
进入目录cd react-demo-1
开始开发yarn start
看App.js可以知道，webpack默认让js走babel-loader
JSX注意事项
注意className
<div className='red'>n</div>
被转译成
React.createElement('div',{className:'red'},"n")
插入变量
标签里面的所有js代码要用{}包起来
如果需要变量n，那么写成{n}
如果需要对象，也用{}抱起来，如：{name:'qyk'}
习惯return后加()
React里的条件判断
Vue中
<template>
<div>
<div v-if='n%2===0'>n是偶数</div>
<span v-else>n是奇数</span>
</div>
template>
React中
const Component = ()=>{
return n%2===0 ? <div>n是偶数</div> : <span>n是奇数</span>
}
//如果需要外面的div可以写成如下
const Component = ()=>{
return (
<div>
{n%2===0 ? <div>n是偶数</div> : <span>n是奇数</span>}
</div>
)
}
还可以写成
const Component = ()=>{
const content = (
<div>
{n%2===0 ? <div>n是偶数</div> : <span>n是奇数</span>}
</div>
)
return content
}
还可以写成
const Component = ()=>{
const inner = n%2===0> <div>n是偶数</div> : <span>n是奇数</span>
const content = (
<div>
{inner}
</div>
)
return content
}
当然也可以写成最原始的if-else
const Component = ()=>{
let inner
if(n%2===0){
inner = <div>n是偶数</div>
}else{
inner = <div>n是奇数</div>
}
const content = (
<div>
{inner}
</div>
)
return content
}
总结
在Vue中只能用Vue提供的语法
在React中可以随便写JS
循环语句
Vue中的循环语句
<template>
<div>
<div v-for="(n,index) in numbers"
:key = "index">
下标{{index}}，值为{{n}}
</div>
</div>
</template>
React中的循环语句
const Component = (props)=>{
return (<div>
{props.numbers.map((n,index)=>{
return <div>下标{{index}},值为{{n}}</div>
})}
</div>)
}
还可以写成
const Component = (props)=>{
const array = []
for(let i = 0;i<props.numbers.length;i++){
array.push(<div>下标{i}值为{props.numbers[i]</div>)
}
return <div>{array}</div>
}
React的条件判断和循环语句都是通过原生JS来实现的
