使用React前 当然需要先安装包 输入 (注：-S即-save的简写 包会在package中的devDependencies对象中 是在开发环境中要用到的 包安装完后 在js入口文件中导入这两个包： 这两个包在导入时接收的成员名称必须这么写：React和ReactDOM 一点都不能改 调用React对象的 例一：若要创建<h1>我是帅哥</h1> 例二：若要创建<h1 id=“myid” class=“myclass”>我是帅哥</h1> 调用ReactDOM对象的 例如： ReactDOM渲染： 因为该JS入口文件会在HTML页面中被引入 因此可以控制HTML的元素 值得注意的是 第二个参数接收的只能是DOM元素 而不是字符串形式的选择器名称 但是这样过于麻烦 一个页面有很多元素 每次创建都需要调用createElement() JS中默认是不支持HTML语法规范的 这样会报错 打包失败 在JS中 这种混合写入 且类似于HTML的语法 叫做JSX语法 意即 符合XML规范的JS JSX语法的本质是在运行时 被转换为 安装Babel包： 其中 @babel/preset-react是用于转换JSX语法的 然后配置Babel 最后 配置Babel的配置文件： 启动项目 即可看见元素被渲染到页面上了
一、安装
npm i react react-dom -S安装两个必须的包
最主要的应用场景就是ReactDOM.render() 实现渲染
-D即-save-dev的简写 包会在package中的dependencies对象中 是在生产环境中要用到的
程序实际运行的时候并不需要用到的工具 就用-D
而像React这种要在运行中使用的 就用-S)二、基本使用
1、导包
import React from 'react' // 创建组件和虚拟DOM元素 管理生命周期 import ReactDOM from 'react-dom' // 将创建好的组件和虚拟DOM放到页面中展示 2、创建虚拟DOM元素
createElement()方法创建
语法：createElement(创建的元素的类型/名称 , 当前DOM元素的属性 , 子节点(包括其它虚拟DOM或文本子节点)[ , 其它子节点...])const myh1=React.createElement("h1",null,"我是帅哥") const myh1=React.createElement("h1",{id:"myid",class:"myclass"},"我是帅哥") 3、将虚拟DOM渲染到页面上
render()方法创建
语法：render(要渲染的虚拟DOM元素 , 页面上的容器)
页面有个id为app的容器<body> <!-- 容器 虚拟DOM将会放入该容器内以显示 --> <div id="app"></d> </body> ReactDOM.render(myh1,document.getElementById("app"))
不能是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"))
渲染页面上的DOM结构最好的方式就写HTML代码 而JS文件不允许写HTML代码
因此 React提供了一种方法 可以在JS文件中写HTML代码 这就是JSX语法三、JSX语法
const mydiv=<div id="mydiv">我是帅哥</div> ReactDOM.render(mydiv,document.getElementById("app"))
在浏览器中 默认是不识别JSX语法的 此时 可使用Babel以转换这些JS中的HTML标签React.createElement()这种创建元素的方式
并不是写完标签直接转换到页面上了安装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 // webpack.config.js module.exports={ mode:"development", plugins:[ htmlPlugin ], // 第三方模块的配置规则 // webpack默认只能打包处理js后缀名类型的文件 module:{ // 第三方匹配规则 rules:[ {test:/.js|jsx$/,use:"babel-loader",exclude:/node_modules/} // exclude必须配置 否则会报错 ] } }
在项目根目录下创建一个名为.babelrc的文件
加入以下配置：{ "presets":["@babel/preset-env","@babel/preset-react"], "plugins":["@babel/transform-runtime","@babel/plugin-proposal-class-properties"] }
(若启动时报错 删除node_modules 然后npm i重新安装模块即可)
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
