React18学习Day2(基础篇)---保姆级

 (最近真的很爱这张图,必须跟大家分享)

写在前面的话:

React18已经放弃了对IE11的支持,在2022.6.15停止支持IE,如果需要兼容,需要回退到17版本.

在上一篇文章中,我给大家介绍了一下如何创建react项目,在这篇文章中,我会给大家介绍一下react的一些基础知识

需要说明的一点是,使用npx create-react-app xxx(项目名)创建出来的项目目录会与我上篇文章中有些许不同,不用质疑自己,上篇文章中我的截图是基于vite创建的项目

ok,接下来我们切入正题,开始今天的学习吧

1. 项目目录整理

 2.复习回顾

因为写过这个文,所以请移步一下

ES6的Class和extends_一大只胖头鱼的博客-CSDN博客

3.main.js入口文件解析

在18版本中,main.js里面修改了两个东西,一个是ReactDOM的引入位置修改成了react-dom/client,另外一个是新增了root api(将render升级为createRoot,creatRoot支持并发模式)

// 引入react模块,类似于vue中的引入vue
import React from "react";
// 这个模块用来方便react操作dom
import ReactDOM from "react-dom/client";
// 这个是我接下来要用到的组件,也是项目中的根组件,类似于vue中的App.vue
import App from "./App";
// 这里相当于vue中的挂载,先去获取root这个节点
const root = ReactDOM.createRoot(document.getElementById("root"));
// 然后将App这个组件渲染上去
root.render(<App />);

4.React基础知识介绍

1. react是什么

用于构建用户界面的JS库(是一个将数据渲染为HTML视图的开源JS库)

换成大白话来说就是,我们只需要关注数据,也就是说只要我们能够操作数据,就能改变视图

2.react的特点

以下特点现阶段可能不是很能理解,但是随着文章的推进,会更加深刻理解react的特点

• 采用组件化模式,声明式编码,提高开发效率及组件复用率

• 在React Native中可以使用React语法进行移动端开发

• 使用虚拟DOM+Diffing算法,尽量减少与真实DOM的交互

• 单向数据流

• 使用jsx语法

3.jsx是什么

jsx是javascript XML的的简称,简单来说就是可以将js和html混写

但是需要提到一点是浏览器其实是不认识这种书写方式的,所以脚手架内置的@babel/plugin-transform-react-jsx来转换

4.为什么要用jsx

• jsx可以更流畅的创建虚拟DOM

• jsx的本质是一个语法糖

5. JSX的特点

• JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。

• 它是类型安全的，在编译过程中就能发现错误。

• 使用 JSX 编写模板更加简单快速。

5.函数组件和类组件 

在进入内容之前,我们可以安装一些插件方便我们学习和编写代码

推荐安装Simple React Snippets

进入正题

首先,有了上面的铺垫知识之后,我们需要明确一个东西,就是react可以使用两种形式,一个是类组件(class)和函数组件(function)

书写方式

// 类组件   
import { Component } from "react";
// 注意,如果引入的是React,那需要书写为React.Component   
class App extends Component{
    render(){
        return(
// 注意,在react中需要一个根节点,可以使用<></>幽灵节点占位,它在DOM节点中不显示
            <>
            Hello Word
            </>
        )
  }
}
// 函数组件
function App() {
  return (
    <>
      <div>Hello Word</div>
    </>
  );
}

export default App

如果安装了上面的插件,后面可以通过rfc和rcc快捷生成 

接下来我会先使用到类组件

6. 书写JSX

首先需要明确jsx怎么写,注意以下格式

1. 标签的class变为className,因为class是react中的声明类关键字

<div className="box">
</div>

2.标签的for变为htmlFor,因为for是react中的for循环关键字

 <label htmlFor="like">喜好:</label>

3.书写行内样式style书写为{{}}格式

<span style={{ background: "pink" }}>我是测试样式的</span>

4.重点:jsx的变量一般放在{}中,凡是写js,都要放在{}中

ok,特点介绍完了我们来正式书写

1. JSX表达式书写

let name = "张三"
class App extends Component{
 render(){
    return(
<>
我的名字是:{name}
</>
    )
 }
}

注意:习惯了vue书写的宝贝不要写成{{name}}了哦