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

 

安装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 id="myh1" title="this is a 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 id="mydiv" title="div aaa">

这是一个div元素

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

</div>