React

最新推荐文章于 2024-06-13 22:22:23 发布

Acrisabld

最新推荐文章于 2024-06-13 22:22:23 发布

阅读量261

点赞数

分类专栏： React 文章标签： react.js 前端前端框架 Powered by 金山文档

本文链接：https://blog.csdn.net/Langlous2000817/article/details/128692369

版权

React 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、什么是React

React是一个用于构建用户界面的JS库

从MVC角度来看，React仅仅只是视图层（V），只是负责视图的渲染，并非提供了完整的M和C功能

React特点

1.声明式
2.基于组件
3.学习一次，随处使用

1.声明式

你只需要描述UI（Html）看起来是什么样的，就跟写HTML一样
React负责渲染UI，并在数据变化时更新UI

const jsx=<divclassName="app"><h1>Hello React!动态变化数据：{count}</h1></div>

2.基于组件

组件是React最重要的内容

3.学习一次，随处使用

可以开发Web应用
可以开发移动端原生应用（react-native）
可以开发VR应用（react 360）

二、React的基本使用

React的安装

npm i react react-dom

react包是核心，提供创建元素、组件等功能
react-dom 包提供DOM相关功能等
react负责创建元素，react-dom负责将元素渲染到页面中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01-react基本使用</title>
</head>

<body>
    <!-- 1.引入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>
    <div id="root"></div>
    <script>
        //  2.创建react元素
        // 参数一：元素名称
        // 参数二：元素属性
        // 参数三及其以后的参数：元素的子节点
        const title = React.createElement('h1', null, 'Hello React')
        // 3.渲染react元素
        // 参数一：要渲染的react元素
        // 参数二：挂载点
        ReactDom.render(title, document.getElementById('root'))
    </script>
</body>

</html>

方法说明

React.createElement()（了解即可，创建复杂的应用不友好）

返回值：React元素
参数1：要创建的React元素名称
参数2：该React元素的属性
参数3及其以后的参数：该React元素的子节点

ReactDom.render()

参数一：要渲染的react元素
参数二：挂载点
ReactDom.render(title, document.getElementById('root'))

三、使用React脚手架

1.初始化项目

npx create-react-app my-app

2.启动项目

npm start

npx命令介绍

是npm v5.2.0 引入的一条命令
目的：提升包内提供的命令行工具的使用体验（不用npm i了）
原来：先安装npm 包，再使用npm命令
使用npx 无需安装npm包，就可以直接使用命令

yarn介绍

yarn是Facebook发布的包管理器，可以看做是npm的替代品，功能与npm相同
yarn 具有快速、可靠和安全的特点
初始化新项目：yarn init
安装包: yarn add 包名称
安装项目依赖项：yarn

详情看yarn文档

在脚手架中使用React

1.导入react和react-dom两个包
importReactfrom'react'importReactDOMfrom'react-dom'

2.同上，创建元素，挂载元素

四、JSX

本章的基本学习目标

1.能够知道什么是JSX
2.能够使用JSX创建React元素
3.能够在JSX中使用JS表达式
4.能够使用JSX的条件渲染和列表渲染
5.能够给JSX添加样式

createElement()的问题

编辑

JSX简介

JSX是JavaScript XML的简写，表示在JS代码中写XML格式的代码

优势：声明式语法更加直观、与HTML结构相同，降低了学习成本、提升开发效率
JSX是React框架的核心

推荐使用JSX语法创建React元素

写JSX就跟写HTML一样，更加直观、友好

JSX语法更能体现React的声明式特点（描述UI长什么样子）

使用步骤

const title=<div>Hello JSX</div>

reactDOM.render(title,document.getElementById('root'))

为什么脚手架中可以使用JSX语法？

1.JSX不是标准的ES语法，它是ES的语法扩展，所以是不能直接使用的
2.需要使用babel编译处理后，才能在浏览器环境中使用
3.create-react-app脚手架中已经默认有该配置，无需手动配置
4.编译JSX语法的包为 @babel/preset-react

JSX的基本使用

注意点：

1.React元素的属性名使用驼峰命名法
2.特殊属性名：class->className,for->htmlFor,tabindex->tabIndex
3.没有子节点的React元素可以使用/>结束
4.推荐：使用小括号包裹JSX，从而避免JS中自动插入分号陷阱