React学习之旅Part2：React的安装、createElement和render基本使用、JSX入门及Babel转换器的安装

2024-02-09 11:16:16

一、安装

使用React前当然需要先安装包

输入npm i react react-dom -S安装两个必须的包

react：专门用于创建组件同时组件的生命周期都在该包中
react-dom：专门进行DOM操作
最主要的应用场景就是ReactDOM.render() 实现渲染

(注：-S即-save的简写包会在package中的devDependencies对象中是在开发环境中要用到的
-D即-save-dev的简写包会在package中的dependencies对象中是在生产环境中要用到的
程序实际运行的时候并不需要用到的工具就用-D
而像React这种要在运行中使用的就用-S)

二、基本使用

1、导包

包安装完后在js入口文件中导入这两个包：

import React from 'react' // 创建组件和虚拟DOM元素 管理生命周期
import ReactDOM from 'react-dom' // 将创建好的组件和虚拟DOM放到页面中展示

这两个包在导入时接收的成员名称必须这么写：React和ReactDOM 一点都不能改

2、创建虚拟DOM元素

调用React对象的createElement()方法创建
语法：createElement(创建的元素的类型/名称 , 当前DOM元素的属性 , 子节点(包括其它虚拟DOM或文本子节点)[ , 其它子节点...])

例一：若要创建<h1>我是帅哥</h1>

const myh1=React.createElement("h1",null,"我是帅哥")

例二：若要创建<h1 id=“myid” class=“myclass”>我是帅哥</h1>

const myh1=React.createElement("h1",{id:"myid",class:"myclass"},"我是帅哥")

3、将虚拟DOM渲染到页面上

调用ReactDOM对象的render()方法创建
语法：render(要渲染的虚拟DOM元素 , 页面上的容器)

例如：
页面有个id为app的容器

<body>
    <!-- 容器 虚拟DOM将会放入该容器内以显示 -->
    <div id="app"></d>
</body>

ReactDOM渲染：

ReactDOM.render(myh1,document.getElementById("app"))

因为该JS入口文件会在HTML页面中被引入因此可以控制HTML的元素

值得注意的是 第二个参数接收的只能是DOM元素而不是字符串形式的选择器名称
不能是ReactDOM.render(myh1,"#app") 否则会报错

嵌套使用

const myh1=React.createElement("h1",{id:"myid",class:"myclass"},"我是帅哥")

const mydiv=React.createElement("div",null,"我很帅",myh1)

ReactDOM.render(mydiv,document.getElementById("app"))

但是这样过于麻烦 一个页面有很多元素每次创建都需要调用createElement()
渲染页面上的DOM结构最好的方式就写HTML代码而JS文件不允许写HTML代码
因此 React提供了一种方法可以在JS文件中写HTML代码 这就是JSX语法

三、JSX语法

JS中默认是不支持HTML语法规范的

const mydiv=<div id="mydiv">我是帅哥</div>
ReactDOM.render(mydiv,document.getElementById("app"))

这样会报错打包失败

在JS中这种混合写入且类似于HTML的语法叫做JSX语法 意即符合XML规范的JS
在浏览器中默认是不识别JSX语法的此时可使用Babel以转换这些JS中的HTML标签

JSX语法的本质是在运行时被转换为React.createElement()这种创建元素的方式
并不是写完标签直接转换到页面上了

安装Babel进行转换

安装Babel包：

npm i babel-loader -S
npm i @babel/core @babel/runtime  -D
npm i @babel/preset-env @babel/preset-react -D
npm i @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

其中 @babel/preset-react是用于转换JSX语法的

然后配置Babel

// webpack.config.js

module.exports={
    mode:"development", 
    plugins:[
        htmlPlugin
    ],
    // 第三方模块的配置规则
    // webpack默认只能打包处理js后缀名类型的文件
    module:{
        // 第三方匹配规则
        rules:[
            {test:/\.js|jsx$/,use:"babel-loader",exclude:/node_modules/} // exclude必须配置 否则会报错
        ]
    }
}

最后配置Babel的配置文件：
在项目根目录下创建一个名为.babelrc的文件
加入以下配置：

{
    "presets":["@babel/preset-env","@babel/preset-react"],
    "plugins":["@babel/transform-runtime","@babel/plugin-proposal-class-properties"]
}

启动项目即可看见元素被渲染到页面上了
(若启动时报错删除node_modules 然后npm i重新安装模块即可)

码农公寓