reactjs学习01--webpack准备和jsx语法简单使用

准备工做

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

结果：