01-2 【React】React起手式（JSX、判断、循环）

JSX

• X表示扩展，JSX就是JS扩展版

1.vue-loader和react-loader

• Vue有vue-loader
  1..vue文件里写<template>、<script>、<style>
  2.通过vue-loader变成一个构造选项（组件）
• React有 JSX
  1.react-loader就是 babel-loader
  2.而babel-loader被webpack内置了

2.使用JSX

• 方法一：CDN（不用这个，效率太低）
  1.标签就写成标签，放到<script type="text/babel">标签中
  2.如果标签中有JS内容（变量或函数）就用花括号包起来
  3.就不像Vue需要不同的指令
  原理：babel.js会把页面上浏览器不认识的babel代码翻译成JS字符串并且放到一个script标签中，然后把翻译后的字符串放到页面中去替换之前不认识的代码
• 方法二：webpack+babel-loader
  跳过，太麻烦
• 方法三：使用create-react-app
  1.跟 @vue/cli 用法类似
  2.全局安装：yarn global add create-react-app
  3.初始化目录：create-react-app react-demo-1
  4.进入目录：cd react-demo-1
  （方便学习只留下：index.html和index.js文件）
  5.开始开发：yarn start
  6.App.js中默认使用了jsx语法，因为webpack让JS默认走babel-loader

3.create-react-app

• 创建React组件：App

import React from 'react'
const App = ()=>{
   
    return (
    // 这里默认使用了JSX语法，相当于：React.createElement()
    //注意：这里return的括号不能省
        <div>App组件</div>
    )
}

export default App

• 渲染组件

import App from './App.js'
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

4.使用JSX的注意事项

• 注意 className
  <div className="red">n</div>
  转译为：
  React.createElement('div',{className:'red',"n"})
• 插入变量
  1.标签里面所有JS代码都要用 { } 包起来
  2.如果你需要变量n，那么就用 {n}
  3.如果需要对象，那么就写：{ {name:'frank'}}
• 习惯 return 后面加 ()
  如果不加括号把组件内容包起来，相当于return undefined

5.Vue和React

• 都可以写HTML
• Vue写在：.vue文件中的<template>里
• React把HTML混在JS/JSX文件里

6.条件判断（if…else…）

• 在Vue中

<template>
  <div>
    <div v-if="n%2===0">n是偶数</div>
    <div v-else>n是奇数</div>
  </div>
</template>

• 在React中
  完全就是在写JS，把标签也当做JS的内容

const Component =()=>{
   
  return n%2===0 ? <div>n是偶数</div> : <span>n是偶数</span>
}
//如果外面还需要一层div
const Component =()=>{
   
  return (
    <div>
    //加了花括号，表示里面的内容是JS表达式
      {
    n%2===0 ? <div>n是偶数</div> : <span>n是偶数</span> }
    </div>
  )
}

• 结论
  1.在Vue中，只能用Vue提供的语法来写条件判断
  2.在React中，想怎么写就怎么写，就是在写JS而已

7.循环语句（for）

• 在Vue里可以遍历数组和对象

<template>
  <div>
    <div v-for="(n,index) in numbers"
         :key="index">
         下标 {
  {index}},值为 {
  {n}}
     </div>
  </div>
</template>

• 在React中
  渲染组件：<Component numbers={[1,2,3]} />

const Component = (props)=>{
   
  return props.numbers.map((n,index)=>{
   
    return <div>下标 {
   index},值为 {
   n}</div>
  })
}
//如果需要外面有div
const Component = (props)=>{
   
    return (<div>
        {
    props.numbers.map((n,index)=>{
   
           return <div>下标 {
   index},值为 {
   n}</div>
          })
         }
      </div>
    )
  }

转载：https://blog.csdn.net/qq_40282016/article/details/117031655