【React全解0】React起步+JSX语法

时间:2021-1-8 作者:admin

目录

  • React简介
  • 引入React的方式
  • JSX语法
  • 控制语句
  • React初体验--实现+1功能

一、React简介

React 是一个用于构建用户界面的 JavaScript 库。个人而言,对比Vue。React注重函数式和类的编程,对JS基础要求较高,它只是为我们提供一些有用的API。Vue则不同,自己封装了各种各样的自己的东西。对新手十分友好,而且能快速上手,十分易懂。
Vue:能做的都帮你做了,只要学会Vue即可。

React:能不做的都不帮你做,它在促使我们思考函数的本质

写React当做JS写即可。

二、引入React的方式

1、从CDN引入React

BootCDN

  • 直接在里面搜索React即可。
  • CDN引入(注意顺序)
    1. 引入React:http://…/react.min.js
    2. 引入ReactDOM:http://…/react-dom.x.min.js
  • 演示示例
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>从BootCDN引入React</title>
  </head>
  <body>
      <script src="https://www.geekschool.org/wp-content/uploads/2021/01/1610174615.399317.jpg"></script>
    <script src="https://www.geekschool.org/wp-content/uploads/2021/01/1610102823.9984016.jpg"></script>
  </body>
</html>
  • cjs和umd的区别
    1. cjs:全称为CommonJS,是Node.js支持的模块规范
    2. umd:统一模块定义,兼容各种模块规范(含浏览器)
    3. 理论上优先使用umd,同时支持Node.js和浏览器。最新的模块规范是使用importexport关键字。

2、通过webpack引入

  • 全局安装React
yarn add react react-dom
  • import ... from ...
import React from 'react';
import ReactDOM from 'react-dom';
  • 其他

    除webpack外,rollup、parcel也支持上面写法

3、create-react-app–创建React项目

create-react-app 类似于 @Vue/cli的脚手架工具,它能为我们创建一个对应的react项目,它会自动为我们配置好react的相关文件。

新手用:create-react-app

老手用:webpack/rollup

  • 全局安装create-react-app
yarn global add create-react-app
  • 创建一个React项目
cd /* 选择你创建项目的位置 */
create-react-app /* 这里写你的项目名 */
/* 
    如何在当前目录创建项目
    create-react-app react-demo .  =>看清楚个点'.'
*/

三、JSX语法

x表示扩展,jsx就是对JavaScript的扩展

  • 对比Vue

    Vue有Vue-loader,能在Vue组件中写<template><script><style>

    React有JSX,能将<button onClick='add'>+1</button>变成React.createElement('button',{onClick:...},'+1')。但是React不是用jsx-loader,而是用babel-loader取代,而babel-loader被webpack内置了。

    React组件中的返回也必须有一个包裹的标签

1、使用JSX

  • 方法一、BootCDN

    引入babel.min.js,将<script>改成<script type='text/babel'>

    babel会自动进行转译

  • 方法二、webpack+babel-loader

  • 方法三、create-react-app

2、JSX基本语法

  • 类名 -- 使用className–而不是class
<div className='red'>类名-demo</div>
=> 转译为:React.createElement('div',{className:'red'},"n")
  • 插入变量

标签里面的所有JS代码使用{}包起来

  • {}用法
let n = 10;
<div>变量n:{n}</div>
  • return后面加()

在return后面加()的原因:js会自动在return 后面补上undefined

function fn(a,b) {
    return 
    a+b;
}
fn(1,2);    //不好意思,这里打印出undefined
  • <React.Fragments><React.Fragments>占位符

React与Vue一样,返回的HTML里面,最外层必须有一个包裹的标签。但是我们又不想有多余的div等标签,怎么办?使用React提供的占位符咯。

<React.Fragments><React.Fragments> 缩写 => <></>

const App=()=>{
    let n=10;
    return (
        <>
          <div>div1</div>
          <span>显示一行文字</span>
          <div>变量n:{n}</div>
          /* 打印对象时,最外层{}表示{}里面是JS语法,第二层{}表示对象{name:'frank',age:18} */
          <div>对象obj:{{name:'frank',age:18}}</div>
        </>
    )
}

四、控制语句 — 对比Vue

1、条件判断

  • Vue的条件判断
<template>
    <div>
        <div v-if='n%2===0'>n是偶数</div>
        <div v-else>n是奇数</div>
    </div>
</template>
  • JSX的条件判断
const Component=()=>{
    return (
        n%2 ? <div>n是奇数</div>:<div>n是偶数</div>
    )
}
# 或者
const Component=()=>{
    return (
        <div>
            n%2 ? <div>n是奇数</div>:<div>n是偶数</div>
        </div>
    )
}
# 或者
    .
    .
    .

小结

  1. 在Vue里:只能用Vue提供的语法进行判断
  2. 在React里:你想™怎么写就™怎么写,你就是在写JS

2、循环语句

  • Vue的循环语句
<template>
    <div>
        <div v-for="(n,index) in numbers" :key="index">
            下标:{{index}}
            <hr/>
            值:{{n}}
        </div>
    </div>
</template>
  • React的循环语句

因为React就是在写JS,所以可以使用一些数组的API进行遍历循环等。

const Component1=(props)=>{
    return (
        props.numbers.map((n,index)=>{
            return <div>下标:{index}--值:{n}</div>
        })
    )
}
# 或者
const Component2=(props)=>{
    const array=[];
    for(let i=0;i<props.numbers.length;i++){
        array.push(<div>下标:{index}--值:{props.numbers[i]}</div>)
    }
    return <div>{array}</div>
}

五、React初体验–实现+1功能

题目:在页面上要求有个变动的值n和一个内容为’+1’的button按钮。点击’+1’按钮后n值变化并自增1,在页面中更新显示。

  • HTML代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title> 实现+1功能 </title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
  • JSX代码--后缀还是js,只不过编译器会提示你更改为JSX模式
import React from 'react';
import ReactDOM from 'react-dom';
const App=()=>{
    const [n,setN]=React.useState(0);
    return (
        <>
            <div>n:{n}</div>
            <button onClick={()=>setN(i=>i+1)}>+1<button>
        </>
    )
}
ReactDOM.render(<App />,document.getElementById('root'));
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。