React一基础

酒茶白开水

已于 2025-04-09 10:35:15 修改

阅读量1.1k

点赞数 10

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： react.js 前端前端框架脚手架组件 JSX 条件

于 2024-07-15 15:00:38 首次发布

本文链接：https://blog.youkuaiyun.com/jiuchabaikaishui/article/details/140438383

代码下载

React 概述

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

特点：

声明式——只需要描述UI看起来是什么样式，就跟写HTML一样，React负责渲染UI
基于组件——组件时React最重要的内容，组件表示页面中的部分内容，组合、复用多个组件，可以实现完整的页面功能
学习一次，随处使用——使用React可以开发Web应用，使用React可以开发移动端，可以开发VR应用

React 基本使用

1、安装 React，在终端执行命令 npm i react react-dom：

react 包是核心，提供创建元素、组件等功能
react-dom 包提供 DOM 相关功能等

2、引入 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>

3、创建 React 元素并渲染 React 元素到页面中：

<body>
    <div id="root"></div>
</body>

<script>
    const title = React.createElement('h2', null, 'React 基本使用')
    ReactDOM.createRoot(document.getElementById('root')).render(title)
</script>

React.createElement 方法说明：

返回值：React元素
第一个参数：要创建的React元素名称
第二个参数：该React元素的属性
第三个及其以后的参数：该React元素的子节点

const title = React.createElement('h2', null, 'hello, world!', React.createElement('a', { href: 'https://www.baidu.cn/' }, '百度'))

ReactDOM.createRoot(dom).render(el) 方法说明：要渲染的React元素渲染到页面中的指定位置。

React 脚手架

脚手架官方文档

React脚手架意义：

脚手架是开发现代Web应用的必备
充分利用 Webpack，Babel，ESLint等工具辅助项目开发
零配置，无需手动配置繁琐的工具即可使用
关注业务，而不是工具配置

React 脚手架初始化项目：
1、初始化项目，命令：npx create-react-app my-app

npx 命令是 npm v5.2.0 引入的一条命令：

目的：提升包内提供的命令行工具的使用体验
原来：先安装脚手架包，再使用这个包中提供的命令
现在：无需安装脚手架包，就可以直接使用这个包提供的命令

2、启动项目，在项目根目录执行命令：npm start

补充

脚手架创建项目的方式：
1、推荐使用：npx create-react-app my-app

2、npm init react-app my-app

3、如果安装了 yarn，可以使用 yarn create react-app my-app

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

在脚手架中使用 React

1、导入 react 和 react-dom 两个包：

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

2、调用 React.createElement() 方法创建 react 元素，并使用 ReactDOM 渲染到页面中：

const title = React.createElement('h2', null, 'hello, world!')
ReactDOM.createRoot(document.getElementById('root')).render(title)

JSX

通过createElement()方法创建的React元素有一些问题，代码比较繁琐，结构不直观，无法一眼看出描述的结构，不优雅。

JSX是JavaScript XML 的简写，表示在JavaScript代码中写HTML格式的代码，JSX优势就是声明式语法更加直观，与HTML结构相同，降低了学习成本，提升开发效率。

使用 JSX 语法创建 react 元素，并使用 ReactDOM 渲染到页面中：

const hiJSX = <h2>hello JSX!</h2>
ReactDOM.createRoot(document.getElementById('hiJSX')).render(hiJSX)

思考，为什么在脚手架中可以使用JSX语法？

JSX 不是标准的ECMAScript语法，它是ECMAScript的语法拓展
需要使用babel编译处理后，才能在浏览器环境中使用
create-react-app脚手架中已经默认有该配置，无需手动配置
编译JSX语法的包： @bable/preset-react

使用 JSX 注意点：

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

co

最低0.47元/天解锁文章

200万优质内容无限畅学