reactjs学习--01
准备工作
安装webpack => 编译打包ES6语法
webpack基于nodejs,电脑上得有node
这里安装的是webpack 4.x,因此还得安装webpack-cli。因为webpack 4.x
中的打包命令被分离进webpack-cli中。
执行 npm i –D webpack webpack-cli webpack-dev-server
安装webpack插件
执行 npm i –D html-webpack-plugin
安装babel及其相关插件
执行 npm i –D babel-core babel-loader babel-plugin-transform-runtime
执行 npm i –D babel-preset-env babel-preset-react babel-preset-stage-0
babel-plugin-transform-runtime作用:抽离运行时重复的函数作为模块复用
babel-preset-react 作用:将js中JSX内容转换成react相关的语法
注意:babel-core和babel-loader版本得对应
webpack.config.js的配置
webpack 4.x => 约定大于配置 (无需配置入口文件和出口文件)
入口文件默认找src目录下的index.js 出口文件默认在dist目录下的main.js
这里的mode属性必须配置,否则会报错 => webpack 4.x新增属性
.babelrc的配置
这里的参数同样可以配置进webpack.config.js中
loader-options //单个loader时可以像上面那样写
有多个loader时要用use属性
use支持字符串,支持数组,支持对象, 支持对象数组
use: ‘babel-loader’
use: [‘style-loader’,’css-loader’]
use: {
loader: ‘babel-loader’,
options: {
presets: ["env","stage-0","react"],
plugins: ["transform-runtime"]
}
}
use: [{
loader: ‘babel-loader’,
options: {
presets: ["env","stage-0","react"],
plugins: ["transform-runtime"]
}
},{
loader: ‘url-loader’
options:{
limit:8192
}
}]
安装react
执行 npm i –S react react-dom
reactjs的使用
react原生api创建DOM渲染页面
模块导入
创建虚拟DOM
使用虚拟DOM渲染页面
html作用域
注意:这里两个参数都是DOM对象
JSX语法糖 => 模版语言创建模版对象(DOM对象)
原因:直接用reactjs创建DOM的api来写代码太麻烦了
前提准备:需要安装并配置babel相关loader和插件来解析JSX (前面已经配置好了)
babel-preset-react 作用:将js中JSX内容转换成reactjs相关的语法
==> 其实就是将JSX模版对象转成reactjs的api创建的DOM对象
核心 =>{}中写js表达式
a 数据的定义
b 模版对象的定义
c 使用模版渲染页面
结果: