React学习笔记（上）

一. 如何引入React

1. CDN引入（2个文件）

1. react.min.js：cdn.bootcss.com/react/16.10… cdn.bootcss.com/react/16.10…
2. react-dom.min.js：

注意这里顺序不能改变，引入这两个文件就可以直接使用react，这里可以发现有两种模块规范cjs（commonJS）和umd，优先使用后者，兼容各种模块规范（含浏览器）

2. webpack引入

yarn add react react-dom

import React form "react"

import ReactDOM from "react-dom"

3. create-react-app

yarn global add create-react-app

二. 创建一个react app

create-react-app app-name

三. JSX优化React

JSX类似于Vue的vue-loader，允许创建一个外部组件，但是webpack的babel-loader已经将它的功能合并了

如何创建一个React组件见React学习笔记（下）

1. CDN引入(不建议)

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

然后将script部分写入<script type="text/babel"></script>标签中

<script type="text/babel">
      let n = 0;
      const App = () => (
        <div>
          {n}
          //插入变量用{}
          <button
            onClick={() => {
              n += 1;
              render();
            }}
            //插入函数用{}
          >
            +1
          </button>
        </div>
      );
      const render = () =>
        ReactDOM.render(<App />, document.querySelector("#app"));
        //由于这里我们已经使用了JSX语法来写，所以render的参数用<App />这种写法
      render();
    </script>

2. webpack+babel-loader

3.直接用create-react-app

4 语法注意事项

1.className

<div className="name"></div>
//这里不能直接写class因为这是JSX语法，它会被转译成JS而class是关键字
//所以不能直接写成HTML中的class="name"

2. 插入变量必须用{}

{n}//变量n
{jscode}//js代码
{fn}//函数
{obj}//对象

3. return的时候加()

fn(){
    return (....)
} 

四. React的if和for语法

1. if

const testApp=()=>{
  return (
    <div>
      {
        n%2===0?<div>{n}是偶数</div>:<div>{n}是奇数</div>
      }
    </div>
  )
}

对比一下Vue，只能用v-if写，react更像是原生js，更加的灵活

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

2. loop

const testApp=(props)=>{
  return (
    <div>
      {
        props.number.map((n,index)=>{
            return <div>{n}的下标是{index}</div>
        })
      }
    </div>
  )
}

//或者是这样
const testApp=(props)=>{
  const arr=[]
  for(let i=0;i<props.number.length;i++){
    arr.push(<div>{props.number[i]}的下标是{i}</div>)
  }
}

对比一下Vue

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