react的基本配置安装及使用babel

   2023-03-08 学习力0
核心提示: 安装react 步骤 //cnpm i react react-dom -S 安装react//导入//1.这两个导入的时候,接收的成员名称,必须这么写import Reaact from 'react' //创建组件、虚拟 DOM 元素,生命周期import ReactDOM from 'react-dom' //把创建好的组件和虚拟 DOM 放到页面
 
安装react 步骤
 
//cnpm i react react-dom -S 安装react
//导入
//1.这两个导入的时候,接收的成员名称,必须这么写
import Reaact from 'react' //创建组件、虚拟 DOM 元素,生命周期
import ReactDOM from 'react-dom' //把创建好的组件和虚拟 DOM 放到页面上展示的


//2.创建虚拟 DOM 元素
//参数1:创建的元素的类型、字符串、表示元素的名称
//参数2:是一个对象或 null ,表示 当前这个 DOM 元素的属性
//参数3:子节点(包括 其他 虚拟 DOM 获取文本子节点)
//参数n:其他子节点
// <h1 >这是一个大大的h1</h1>
// const myh1 =React.createElement('h1','null','这是一个大大上午h1')
const myh1=React.createElement('h1',{id:'myh1',title:'this is a h1'},'这是一个大大的h1')

const mydiv=React.createElement('div',null,'这是一个div元素',myh1)
 
//渲染 页面上的DOM 结构,最好的方式,就是写 HTML 代码

//const mytest=<div>aaaaa</div>


//3.使用 ReactDOM 把虚拟 DOM 渲染到页面上
// 参数1:要渲染的那个虚拟 DOM 元素
// 参数2:指定页面上的 DOM 元素,当作容器
ReactDOM.render(mytest,document.getElementById('app'))
 
 
 
==============================================================================================
 
基本使用配置
 
//1.安装babel插件
// cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
// cnpm i babel-prest-env babel-preset-stage-0 babel-preset-react -D


//2.配置webpack.json的
// module: { // 所有第三方 模块的配置规则
// rules: [ // 第三方匹配规则
// { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }, // 千万别忘记添加 exclude 排除项
// ]
// }

//3.配置 .babelrc
// {
// "presets": ["env", "stage-0", "react"],
// "plugins": ["transform-runtime"]
// }

// HTML 是最优秀的标记语言;
// 注意: 在 JS 文件中,默认不能写 这种 类似于 HTML 的标记;否则 打包会失败;
// 可以使用 babel 来转换 这些 JS 中的标签;
// 大家注意:这种 在 JS 中,混合写入类似于 HTML 的语法,叫做 JSX 语法; 符合 XML 规范的 JS ;
// 注意: JSX 语法的本质,还是 在运行的时候,被转换成了 React.createElement 形式来执行的;
//4,
const mydiv = <div >
这是一个div元素
<h1>这是一个大大的H1</h1>
</div>
 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • React实现基于Antd密码强度校验组件示例详解
    React实现基于Antd密码强度校验组件示例详解
    目录引言效果预览组件思想组件开发引言最近在开发 Nest 和 Umi 技术栈的个人项目,在用户管理模块需要用到一个密码强度校验组件,在网上寻找一方资料,没有找到自己想要的,特此自己造轮子!效果预览组件思想既然是密码强度校验,那么强度就必须有个梯度,这
    03-16
  • 03 React快速入门(三)——实现从一个输入框中添加完数据后此输入框内容清除的功能
    03 React快速入门(三)——实现从一个输入框中
    功能描述:      我们在一个输入框输入内容,然后点击添加按钮,此输入框的内容就会添加到页面上,但是此输入框中还存在上次输入的内容,我们想在每次输入添加完成之后,此输入框中的内容就会清除,如图:   实现思路:      我们可以先在输入框上定
    03-08
  • react编译器jsxTransformer,babel
    1.JSX是什么JSX其实是JavaScript的扩展,React为了代码的可读性更方便地创建虚拟DOM等原因,加入了一些类似XML的语法的扩展。2.编译器——jsxTransformerJSX代码并不能直接运行,需要将它编译成正常的JavaScript表达式才能运行,jsxTransformer.js就是这一编
    03-08
  • G2( bizCharts ) React 绘制混合图例
    G2( bizCharts ) React 绘制混合图例
     G2( bizCharts ) React 绘制混合图例,// data-set 可以按需引入,除此之外不要引入别的包import React from 'react';import { Chart, Axis, Tooltip, Geom, Legend, Label } from 'bizcharts';import DataSet from '@antv/data-set';// 下面的代码会被作为
    03-08
  • React-多页面应用 react怎么写页面
    React-多页面应用 react怎么写页面
    1初始化项目npm init create-react-app my-app2.修改indeximport React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';ReactDOM.render(App /, document.getElementById('root')
    03-08
  • react-native start 启动错误解决方法
    ERRORError watching file for changes: EMFILE{"code":"EMFILE","errno":"EMFILE","syscall":"Error watching file for changes:","filename":null}Error: Error watching file for changes: EMFILE
    03-08
  • React兄弟组件通信(发布者-订阅者模式)
    // eventProxy.js'use strict';const eventProxy = {onObj: {},oneObj: {},on: function(key, fn) {if(this.onObj[key] === undefined) {this.onObj[key] = [];}this.onObj[key].push(fn);},one: function(key, fn) {if(this.oneObj[key] === undefined) {thi
    03-08
  • React笔记_(7)_react路由 react路由配置
    路由路由(routing)是指分组从源到目的地时,决定端到端路径的网络范围的进程。路由器当然是作为一个转发设备出现的,主要是转发数据包来实现网络互联。那么react的路由到底指的是什么呢?举个栗子~~~在网页中点击后,从A页面跳到B页面,跳转过程中url发生变
    03-08
  • react-native关闭所有黄色警告 react native st
     将以下这两句话加在index.js(入口文件)中,放在AppRegistry.registerComponent('App', () = App)之前即可1 console.ignoredYellowBox = ['Warning: BackAndroid is deprecated. Please use BackHandler instead.','source.uri should not be an empty str
    03-08
  • react中style的写法 react styles
    div style={{width: 20px; height=30px}}style的写法/div 
    03-08
点击排行