react——初识

简介

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。

官网:React 中文文档（Beta 版） | React 中文文档 | React 中文网

环境集成

脚手架

我们首先要下载官方的脚手架工具

npm install -g create-react-app

之后步骤

$ create-react-app my-app	/*创建项目,应用名称不要有大写字母*/
$ cd my-app/	/*进入项目目录*/
$ npm run start		/*启动项目*/

 因为底层打包工具是 webpack ，所以会有点慢

vite搭建

npm init vite@latest

后面按需选择即可

语法

插值表达式

与vue的插值表达式（即 “{{ }}” ）有小小的不同，react中的插值表达式使用的是 “ { } ”

插值表达式的使用

变量

let show="Here is jony"

<p>{show}</p>

成员访问

import React from 'react'

export default function App() {
    let obj={msg:"this is msg"}
    let arr=["hello"]
    return (
        <div>
            <p>{obj.msg}</p>
            <p>{arr[0]}</p>
        </div>
    )
}

//为了方便，所有代码只展示关键部分，就不写全了

运算表达式

即加减乘除，取余等，包括三目运算表达式

let a=15

<p>{a+15}</p>
<p>{(a>16)?"yes":"no"}</p>

逻辑表达式

let a=0
let b=''
let c=5

<p>{a||c}</p>
<p>{b&&c}</p>

方法

let fn=()=>{
    return "you have found me"
}


<p>{fn()}</p>

let fn=()=>{
    console.log("you are my hero")
}

<div onclick={fn}>do</div>

使用场景

标签内使用

let a=555

<div>{a}</div>

属性内使用

<div style={{color:"red",fontSize:"22px"}}>this is my world</div>

注意，上图中的 “{{ }}”不是插值表达式，只有外层是，内层是对象

事件

无参事件

见上方方法图二

有参事件

let fn=(msg)=>{
    console.log(msg)
}

<div onclick={()=>{fn("I am here")}}>do</div>

组件类型认识

在react中，有两种组件类型：函数组件 和 类组件

react中没有像vue中那样的模板文件，在react里一切都是以js来实现的

函数组件（hook）

React Hook是React 16.8版本之后添加的新属性，用最简单的话来说，React Hook就是一些React提供的内置函数

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

类组件

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}