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>