在 React 项目中启用 JSX 语法|学习笔记

简介: 快速学习在 React 项目中启用 JSX 语法

开发者学堂课程【React 入门与实战在 React 项目中启用 JSX 语法】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/585/detail/8083


在 React 项目中启用 JSX 语法


目录:

一、React 项目示例

二、JSX 语法概念

三、JSX 本质

四、启动 JSX


一、React 项目示例

1.创建 index.js

//第一步:导入包

import React from 'react'

import ReactDoM from 'react-dom'

//第二步:创建虚拟 DOM ,构建好属性也可不在此构建

const mydiv = React.createElement( 'div', ( id: 'mydiv', title: 'div aaa' ),"这是一个div元素’)

//第三步:调用 render 函数渲染

//调用 ReactDOM ,给一个 DOM 元素容器

ReactDoM . render(mydiv,document.getElementByid ( ' app ' ))

2.创建 Index.html

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

<head>

<meta charset="UPE-8">

<title>Index首页</title>

<!-- <script src=" . ./ dist/main.js"></ script> -->

<!-- <script src=" / main .js"></script> -->

</ head>

<body>

<!--创建一个容器,将来渲染的虚拟DoM,会放到容器内显示--><div id="app ></div>

</ body>

</ html>

3. 运行项目

(1) 打开终端输入:

//使用 npm

PS C:\Users\liulongbin\DesktopIreact-day1

代码\e1.webpack-base> npm run dev

(2) 弹出浏览器

0cb27c8ae989a1a1cfeb063c30e4456.jpg

回顾:什么时虚拟 DOM ?

JS 对象的形式来表示 DOM DOM 之间的嵌套关系

HTML是最优秀的标记语言;

想要创建虚拟 DOM ,在页面上即使普通标签

官网封装代码:

Const mydiv=<div id=mydiv title=div aaa>

这是一个 div 元素</div>

//类似于 html 标签语言,但不符合 js 代码规范

////注意:Js 文件中,默认不能写这种类似于 HTM 的标记;否则打包会失败;

const mydiv = React.createElement( 'div', ( id: 'mydiv', title: 'div aaa' ),"这是一个div元素’)

效果一样

运行代码:

1139a9d0c890fbd5eae7d9f33b712f5.jpg

报错解决:

可以使用 babel 来转换这些 Js 中的标签;

Const 是一个简单的js对象,要么是一个复杂的 js 对象,在 js 中混合写入类似于HTTML 的语法叫做 JSX 语法

二、JSX语法

1.概念

Js 中,混合写入类似于 HTM 的语法,叫做 Jsx 语法;

符合 XML 规范的 JS 语法

Jsx 默认情况下浏览器不识别,可以把 jsx 语法转一下,通过 babel 工具转化为 react,createElement 语法来执行

2.本质

Jsx 语法的本质,还是在运行的时候,被转换成了 React.createElement 形犹来执行的

转化后通过 API 调用转换好之后运行在页面

3.启动jsx

1)安装 babel 插件

//安装两套包

运行

Cnpm i    babel-core   babel-loader     babel-plugin-transform-runtime -D

安装执行结果:

e842c924c8a0dd2b4e4cee6c71f98f9.jpg

//两个语法:第一个预防 env,第二个语法 stage-0

运行cnpm i babel-preset-errv babel-preset-stage-e -D

安装执行结果:

1111d37a3d5941a39b82b69f3ca61e2.jpg

打开webpack.config.js

添加:

//向外暴露一个打包的配置对象;因为 webpack 是基于 Node 构建的;所以 webpack 支持所有Node API 和语法

//webpack 默认只能打包处理.js后缀名类型的文件,像 .png,vue 无法主动处理,所以要配置第三方 loader

module.exports = {

mode: 'development', ll developmentproduction

// webpack 4.x 中,有一个很大的特性,就是约定大于配置﹑约定,默认的打包入口路径是

src -> index.js

plugins: [

htm1P1ugin

] ,

//只要 webpack 遇见不能处理的东西,都会第一时间需要第三方模块

module: {//所有第三方模块的配置规则

Rules:{//第三方匹配规则,js 或者 jsx 文件结尾的

//一个loader可以写为字符串,多个需要写为数组

//一定要添加exclude,否则整个项目是运行不起来的,会报错

{test:/\.js|jsx$/,use:babel-loader’,exclude/node_modules/}

//千万别忘记添加排除项

]

}

}

2)安装能够识别转换 jsx 语法的包

babel-preset-react

//把不认识的jsx语法转换为识别的语法

运行cnpm i babel-preset-react -D

(3)添加.babelrc] 配置文件

Bebel 项目文件一般放入项目的根目录下,命名为.babelrc ,千万不要忘记添加.,要符合 js 语法规则,双引号且不能写注释

{

//数组:放置所有语法

"presets" : [ "env", "stage-0" , "react"],

//数组:放置所有插件

"plugins": ["transform-runtime""]

//顺序没有差别

}

配置好 bebal 后运行代码:

3cd13b86b45e6637847c3db49a8ad7a.jpg

实现嵌套:在 index.js 中添加代码:

Const mydiv=<div id=mydiv title=div aaa>

这是一个 div 元素</div>

<h1>这是一个大大的H1</h1>

运行代码:

df7e9dcefb683e23dfcc33d7055b0a9.jpg

这样很方便,当时它不是直接把标签丢在页面,内部是转换的过程。

相关文章
|
1月前
|
JSON 前端开发 JavaScript
React源码解析-JSX
React源码解析-JSX
41 1
|
1月前
|
前端开发 API 数据安全/隐私保护
【第45期】一文解决React项目的权限管理
【第45期】一文解决React项目的权限管理
32 0
|
1月前
|
Web App开发 资源调度 JavaScript
竟然可以在一个项目中混用 Vue 和 React?
竟然可以在一个项目中混用 Vue 和 React?
|
1月前
|
前端开发 JavaScript API
Github 上 8 个很棒的 React 项目
Github 上 8 个很棒的 React 项目
|
1月前
|
存储 Dart 前端开发
为什么说 Compose 的声明式代码最简洁 ?Compose/React/Flutter/SwiftUI 语法对比
为什么说 Compose 的声明式代码最简洁 ?Compose/React/Flutter/SwiftUI 语法对比
36 1
|
2月前
|
前端开发 开发工具 git
React项目包结构的作用
React项目包结构的作用
20 0
|
2月前
|
前端开发
React 中 react-i18next 切换语言( 项目国际化 )
React 中 react-i18next 切换语言( 项目国际化 )
35 0
|
2月前
|
前端开发 应用服务中间件 数据安全/隐私保护
部署React项目到云服务器(步骤清晰)
部署React项目到云服务器(步骤清晰)
|
2月前
|
前端开发 JavaScript 开发者
React中JSX语法入门
React中JSX语法入门
|
2月前
|
前端开发 API
react如何进行项目配置代理
react如何进行项目配置代理
24 0