说明:

分为2步:

首先导入react 和 react-dom:保证了虚拟DOM的创建和使用
使用babel转码器: 由于DOM结构太多,每次使用React.createElement创建虚拟DOM会给开发带来很大压力,因此采用html的写法,通过babel转码器转换成React语法,可以很大程度上提高开发效率

项目源代码

在项目中使用react

运行cnpm i react react-dom -S 安装包

react: 专门用于创建组件和虚拟DOM,同时组件的生命周期都在这个包中
react-dom: 专门进行DOM操作的,最主要的应用场景, 就是ReactDOM.render() [ps]: 通过react包创建的dom是在内存中的.因此需要react-dom来获得内存中的DOM
-S: 代表项目从开发到上线都要用到的包
-D: 开发时用到的工具

在index.html页面中,创建容器:

<!-- 容器,将来使用 React 创建的虚拟DOM元素,都会被渲染到这个指定的容器中 -->
<div id="app"></div>

导入包:

import React from 'react'
import ReactDOM from 'react-dom'

创建虚拟DOM元素:

const myh1 = React.createElement('h1', { title:'啊,栗子', id: 'myh1'}, '糖炒栗子')

渲染:

ReactDOM.render(myh1, document.getElementById('app'));

使用模板字符串

对于复杂的UI结构来说,使用React.createElement创建虚拟DOM的写法会很复杂.
HTML是最优秀的标记语言.
联想到,手写标签的形式来创建虚拟DOM.
如果直接采用下面的形式来书写,会报错:
[书写]: const mydiv = <div id="mydiv" title="div aaa">这是一个div元素</div>
[报错]: You may need an appropriate loader to handle this file type
[原因]: 在js文件中,默认不能写类似于HTML的标记,否则打包会失败.
[解决办法]: 可以使用各种包来转换这些JS中的标签.

JAX语法:

在JS中,混合写入类似于HTML的语法,符合XML规范的JS
JSX语法的本质,还是在运行的时候,被转码器转换成 React.createElement 形式来执行
[面试]: JSX是直接在页面中渲染的嘛? 不,会先经过转码器转换成 React.createElement形式来执行

使用Babel来将JSX转化成可以在浏览器上运行的DOM

如何启用jsx语法?

安装babel插件
- 运行 cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
- 运行 cnpm i babel-preset-env babel-preset-stage-0 -D
安装能够识别jsx语法的包 babel-preset-react
- 运行 cnpm i babel-preset-react -D
在webpack.config.js中添加匹配规则.
- 在webpack中,默认只能打包处理.js后缀名类型的文件
- 像 .png、.vue 无法主动处理
- 所以要配置第三方的loader

// webpack.config.js
module:{rules:[{ test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }]
}

添加 .babelrc 配置文件

{"presets": ["env", "stage-0", "react"],"plugins": ["transform-runtime"]
}

webpack --- 在项目中使用React相关推荐

vue-cli+webpack 的项目中怎么导入bootstrap与jquery
vue-cli+webpack 的项目中怎么导入bootstrap与jquery 虽然vue.js中有很多jquery的效果,引入jquery的好处我认为有两点: 1.很多前端工程师都是从学jquer ...
如何利用 webpack 在项目中做出亮点
大家好,我是若川.最近这几年,在前端代码打包器领域内,webpack 算得上是时下最流行的前端打包工具. 它可以分析各个模块的依赖关系,最终打包成我们常见的静态文件:.js . .css . .jpg ...
在项目中使用react
1. 运行 'cnpm i react react-dom -S' 安装包 react:专门用于创建组件和虚拟DOM,同时组件的生命周期都在这个包中 react-dom:专门进行DOM操作,主要应用场 ...
webpack 项目使用--转换为React项目（4）
在上面的几篇博客中我们创建了webpack项目,现在我们需要将webpack项目转换为react项目,如何进行转换 1.将项目中的node_modules 文件夹删除 2. 安装dom 和react- ...
React基础篇（三）之 webpack打包项目配制
1.本篇章配置一个 webpack 打包项目 2.简述 jsx 语法配置支持 1 初始化项目使用 IDE 打开目录在命令行中初化化项目 npm init -y 然后安装 webpack cnpm ...
webpack入门学习笔记10 —— 在项目中使用图片资源
1. 写在前面在前端项目中,图片是必不可少的一种资源.在使用图片的时候,我们可以有以下几种方式: 在 .html 文件中,通过 <img src="" alt=" ...
vue+webpack项目中px2rem的例子
引言: gitchat里有更详细的实战例子 Vue+Webpack 把 PX 转化成 REM 的实战例子本文重点: 项目环境搭建此处省略,不再赘述,需要的请查阅相关资料. 本篇只介绍,如果在vue+ ...
ReactNative 在丁香医生项目中引入的踩坑日记
ReactNative 在丁香医生项目中引入的踩坑日记 this没绑定到函数导致空指针参考 React-Native 踩坑第二弹-undefined is not a function(evalua ...
4、在已有的Android应用中使用React Native
这一篇记录的是如何在已有的Android应用中使用React Native,在官方的文档上也有介绍:http://reactnative.cn/docs/embedded-app-android.ht ...

webpack --- 在项目中使用React

说明:

在项目中使用react

使用模板字符串

JAX语法:

使用Babel来将JSX转化成可以在浏览器上运行的DOM

webpack --- 在项目中使用React相关推荐

最新文章

热门文章