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 使用模版渲染页面

结果：