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

reactjs学习--01

安装webpack插件

执行 npm i –D html-webpack-plugin

reactjs学习--01

安装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相关的语法

reactjs学习--01

注意:babel-core和babel-loader版本得对应

webpack.config.js的配置

webpack 4.x => 约定大于配置 (无需配置入口文件和出口文件)

入口文件默认找src目录下的index.js     出口文件默认在dist目录下的main.js

reactjs学习--01

这里的mode属性必须配置,否则会报错 => webpack 4.x新增属性

.babelrc的配置

reactjs学习--01

这里的参数同样可以配置进webpack.config.js中

reactjs学习--01

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学习--01

reactjs的使用
react原生api创建DOM渲染页面

模块导入

reactjs学习--01

创建虚拟DOM

reactjs学习--01

使用虚拟DOM渲染页面

reactjs学习--01

html作用域

reactjs学习--01

注意:这里两个参数都是DOM对象

JSX语法糖 => 模版语言创建模版对象(DOM对象)

原因:直接用reactjs创建DOM的api来写代码太麻烦了

前提准备:需要安装并配置babel相关loader和插件来解析JSX (前面已经配置好了)

babel-preset-react 作用:将js中JSX内容转换成reactjs相关的语法

==> 其实就是将JSX模版对象转成reactjs的api创建的DOM对象

核心 =>{}中写js表达式 

a 数据的定义

reactjs学习--01

b 模版对象的定义

reactjs学习--01

c 使用模版渲染页面

reactjs学习--01

结果:

reactjs学习--01

相关推荐