React知识点一：基础知识点

React基础知识点

什么是React （★★★）

React是一个用于构建用户界面的javaScript库，起源于facebook的内部项目，后续在13年开源了出来

特点

• 声明式

`你只需要描述UI看起来是什么样式，就跟写HTML一样，React负责渲染UI

• 基于组件

React最重要的内容，组件表示页面中的部分内容

• 学习一次，随处使用

使用React可以开发Web应用，使用React可以开发移动端，可以开发VR应用

React基本使用

node.js的安装及环境配置

Vue安装及环境配置、开发工具_袁小萌同学的博客-CSDN博客_vue安装及环境配置

React的安装

vscode终端：npm i react react-dom

• react 包是核心，提供创建元素，组件等功能

• react-dom 包提供DOM相关功能

React的使用

• 引入react和react-dom的两个js文件

<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

• 创建React元素

// 创建元素节点
// 1. 元素名称
// 2. 元素属性 传递的是个对象
// 3. 元素内容
let title = React.createElement('li', null, 'hellow react');

    渲染到页面

// 渲染到页面
ReactDOM.render(title, root)

 

• 总结

  <script>
      // 2 创建react元素
      //React.createElement了解
      // 参数一：元素名称
      // 参数二：元素属性
      // 第三个及其以后：元素的子节点
      const title = React.createElement('h1', {
              title: '我是title',
              id: 'p1'
          }, 'Hello React')
  ​
      // 3 渲染react元素
      // 参数一：要渲染的react元素
      // 参数二：挂载点
      ReactDOM.render(title, document.getElementById('root'))
   </script>

React脚手架（★★★）

React脚手架意义

• 脚手架是开发现代Web应用的必备

• 充分利用 Webpack，Babel，ESLint等工具辅助项目开发

• 零配置，无需手动配置繁琐的工具即可使用

• 关注业务，而不是工具配置

使用React脚手架初始化项目

• 初始化项目，命令： npx create-react-app my-pro

  • npx 目的：提升包内提供的命令行工具的使用体验

  • 原来：先安装脚手架包，再使用这个包中提供的命令

  • 现在：无需安装脚手架包，就可以直接使用这个包提供的命令

  • create-react-app 这个是脚手架名称 不能随意更改

  • my-pro 自己定义的项目名称

  • cd到my-pro

• 启动项目，在项目根目录(my-pro)执行命令： npm start

yarn命令简介

• yarn 是Facebook发布的包管理器，可以看做是npm的替代品，功能与npm相同

• yarn具有快速，可靠和安全的特点

• 初始化新项目：yarn init

• 安装包： yarn add 包名称

• 安装项目依赖： yarn

脚手架中使用React

在my-pro->src->index.js中：

• 导入react和react-dom两个包

import React from 'react'
import ReactDOM from 'react-dom'

• 创建元素

let h1 = React.createElement('h1',null,'我是标题')

• 渲染到页面

ReactDOM.render(h1,document.getElementById('root'))

渲染到：my-pro->public->index.html

• 错误：

程序正常运行，控制台报错：react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more:......

原因： 由于React 18 不再支持 ReactDOM.render

解决：

// 被注释的是之前ReactDOM.render的代码

import React from 'react';
// import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
const title = React.createElement('h2', null, 'hhh');
// ReactDOM.render(title, document.getElementById('root'))
//以上一句代码被下面两行代替
const root = createRoot(document.getElementById("root"));
root.render(title);