React 基本使用和 JSX 语法

简介: 本文简单介绍了 React 是什么,以及使用官方脚手架工具,快速启动了一个 React 项目, 并演示了一个核心方法 `createElement` 方法的使用。同时简单介绍了 JSX 语法的基本使用。

React 介绍

React 起源于 Facebook 的内部项目。因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,于是在 2013 年 5 月开源了。

React 是一个用于构建用户界面的 JavaScript 库也是目前最流行的前端框架之一

image-20220811234705140

React 特点

React 矿建具备三个核心特点:

  • 声明式 UI: UI 更清晰简洁
  • 组件化:方便复用,开发更灵活
  • 跨端开发:支持 SPA,SSR, Native App,VR 多平台开发

使用 React 脚手架创建项目

创建一个 React 项目方式一般有三种:

  • 自己使用 webpack 或者 vite 从零搭建
  • 使用官方脚手架快速创建项目

一般我们都是采用脚手架。

使用脚手架也有两种方式,一是先全局安装脚手架,再使用脚手架创建项目:

# 全局安装脚手架
npm i -g create-react-app 
# 创建项目,project-name 项目名称
create-react-app <project-name>

二是使用 npx / pnpm 远程调用脚手架创建项目:

# 以 pnpm 为例
pnpm create react-app 01.basic

# 进入项目并启动:
cd 01.basic
pnpm start

启动成功,打开浏览器访问:

image-20220812000405760

React 基本使用

第一个简单例子:使用 createElement 创建 React 元素

使用脚手架创建的项目,目录结构为:

image-20220812000701614

修改项目入口文件 src/index.js 的内容:

// React的核心包,主要实现了虚拟dom,用于创建 React 元素
import React from 'react';

// React 开发前端页面的核心包,负责将 React 元素渲染到页面
import ReactDom from 'react-dom';

// createElement 方法用于创建一个 React 元素
// 参数1:标签名称
// 参数2:属性集合  
// 参数3:标签子节点
const element = React.createElement('h1', { id: 'title' }, 'Hello, React');

// 将创建的元素渲染到html文件中的 root 节点上
ReactDom.render(element, document.getElementById('root'));

保存代码后,浏览器会自动刷新:

image-20220812000508376

JSX 的使用

JSX 基本概念

JSXJavaScript XML 的简写,表示了在 JavaScript 中书写 XML 格式的代码。

它是 React 的核心内容,可以让我们在 React 中创建元素更加简单,更加直观,提高开发效率。

需要注意的是,JSXJavaScript语法扩展,是一种语法糖,而不是一门新的语言。

这是原来创建一个 React 元素的写法:

import React from 'react';

import ReactDom from 'react-dom';

const element = React.createElement('h1', { id: 'title' }, 'Hello, React');

ReactDom.render(element, document.getElementById('root'));

换成 JSX 就是:

import ReactDom from 'react-dom';

const element = <h1 id="title">Hello, React</h1>

ReactDom.render(element, document.getElementById('root'));

我们现在默认安装的 React 版本都是 18.x了。从 React17 以后,React 核心包就可以不必显式导入了。脚手架工具在使用 Babel 编译 jsx 文件的时候会自动导入。

可以看到,JSX 语法相比 createElement 方法,更加简洁、直观、高效

JSX 的语法和一些注意点

JSX 语法,使用一对标签来表示一个组件。

为了和原生 HTML 标签区分,原生标签使用小写,React 组件使用大写

有几个特殊属性,写法不同,class 要写成 classNamefor 要写成htmlFor

节点没有内容的可以使用单标签

JSX 必需有根节点,如果没有根节点,可以使用 <></> 进行包裹。

如果 JSX 有换行,最好使用 () 包裹。

代码示例:

  • 特殊属性
// 特殊属性要修改:class -> className;for -> htmlFor 
<div className="box">
  <label htmlFor="username"></label>
  <input id="username" type="text" />
</div>
  • 没有内容的节点,可以使用单标签
<span></span> 
// 没内容可以写成单标签
<span />
  • 必须有根节点。有两种方式。
// 1. 使用 React.Fragment 组件
import React from 'react';
import ReactDom from 'react-dom';

const element = (
  <React.Fragment>
    // .....
  </React.Fragment>
);

ReactDom.render(element, document.getElementById('root'));


// 2. 使用 <></>,其实是 React.Fragment 的简写
import ReactDom from 'react-dom';
const element = (
  <>
    // ......
  </>
);
ReactDom.render(element, document.getElementById('root'));
  • 内容太多使用小括号包裹
const element = (
  <>
     // ......
  </>
);

JSX 使用表达式

JSX中可以写 JS 表达式,需要放在大括号{} 中。

常用的表达式形式包括:

  • 展示数据
  • 进行运算
  • 三元运算
  • 使用函数
  • 使用 JSX
  • 使用注释
import React from 'react';
import ReactDom from 'react-dom';

// 数据
const data = {  name: 'kw',  age: 18,};

// 函数
const up = () => {  return data.name.toUpperCase();};

// jsx 表达式
const list = (  
    <ul>  
        <li>jack</li> 
        <li>tony</li>  
    </ul>
);

const element = (  
    <div>    
        {/* 1. 使用数据。 JSX 注释也要写在 {} 中  */}    
        <div>姓名:{ data.name }</div>    
        <div>年龄:{ data.age }</div>    
        
        {/* 2. 使用运算 */}
        <div>明年几岁:{ data.age + 1 }</div>   
        
        {/* 3. 使用三元 */}    
        <div>是否成年:{ data.age > 18 ? '是' : '否' }</div> 
        
        {/* 4. 使用函数 */}    
        <div>姓名大写:{ up() }</div>  
        
        {/* 5. 使用JSX ,jsx也是表达式 */} 
        <div>朋友:{ list }</div> 
    </div>);

ReactDom.render(element, document.getElementById('root'));

小结

本文简单

小结

本文简单介绍了 React 是什么,以及使用官方脚手架工具,快速启动了一个 React 项目, 并演示了一个核心方法 createElement 方法的使用,它用来创建一个 React 元素,然后调用 render 方法,可以将其渲染到页面上。

同时, 可以发现使用 createElement 来写页面的话,非常麻烦,可读性差,所以实际开发中更推荐使用 JSX 来写真正的声明式 UI。

之后又简单介绍了 JSX 的一些常用写法和注意事项。下文会继续介绍 JSX 的其他用法。

目录
相关文章
|
1月前
|
前端开发 JavaScript
React中react-redux的基本使用
React中react-redux的基本使用
|
1月前
|
JSON 前端开发 JavaScript
React源码解析-JSX
React源码解析-JSX
41 1
|
1月前
|
存储 Dart 前端开发
为什么说 Compose 的声明式代码最简洁 ?Compose/React/Flutter/SwiftUI 语法对比
为什么说 Compose 的声明式代码最简洁 ?Compose/React/Flutter/SwiftUI 语法对比
36 1
|
1月前
|
存储 前端开发 JavaScript
第三十章 React的路由基本使用
第三十章 React的路由基本使用
|
2月前
|
前端开发 JavaScript 开发者
React中JSX语法入门
React中JSX语法入门
|
2月前
|
前端开发 JavaScript
react JSX是什么,作用是什么
react JSX是什么,作用是什么
33 0
|
2月前
|
前端开发
React createContext 与 useContext 的基本使用
React createContext 与 useContext 的基本使用
14 0
|
2月前
|
前端开发 JavaScript
【React学习】—jsx语法规则(三)
【React学习】—jsx语法规则(三)
|
2月前
|
前端开发 CDN
在单html页面中使用react并配置jsx
在单html页面中使用react并配置jsx
23 0
|
4月前
|
存储 前端开发 JavaScript
React的诱惑: React-Redux-三大原则和React-Redux-基本使用、优化、综合运用、其他组件使用
React的诱惑: React-Redux-三大原则和React-Redux-基本使用、优化、综合运用、其他组件使用
20 1