浅谈React 的引入

1. CDN 引入

和普通的 JS 库或框架一样，React 也可以从 CDN 引入。

在使用 CDN 引入之前需要了解两种类型的 JS 文件，一个是 cjs ，一个是 umd。

cjs：全称为 CommonJS，是 Node.js 支持的模块规范

umd：全称为 Universal Module Definition 是统一模块定义，是包含 Node.js 使用的 cjs 的，兼容包含浏览器、Node.js 的模块规范。

新模块规范：最新的模块规范是使用 import 和 export 关键字。

因此一般在引入 React 时，会优先使用 umd 版本，可同时支持 Node.js 和浏览器。

React 的 CDN引入需要引入 2 个 JS 库文件，即 react 和 react-dom，这里以 BootCDN 引入为例。

在下列的引入中也都是引入 umd 版本，并且其引入顺序一定得是先引入 react ，后引入 react-dom。

1.1 react (先引入)

这里又分为 development 和 production 版本，一个是开发者版，一个是产品版，两个都可以，产品版可能功能比开发者更全些，但占内存更多些。这里以引入 production 版本为例：

<script src="https://cdn.bootcss.com/react/16.13.1/umd/react.production.min.js"></script>

1.2 react-dom (后引入)

同上述的 react，react-dom 的引入方式类似， production 版本，记得是 umd 版本，最好版本号和 react 的一样。

<script src="https://cdn.bootcss.com/react-dom/16.13.1/umd/react-dom.production.min.js"></script>

1.3 查看是否成功引入 react

<script>
  console.log(React);
  console.log(ReactDOM);
</script>

如果能成功输入 React 和 ReactDOM 两个对象就是引入成功！

2. Webpack 引入

在 Webpack 配置环境下使用 import ... from 引入，命令如下：

//安装 react react-dom
yarn add react react-dom

//引入 react react-dom
import React from "react"
import ReactDOM from "react-dom"

除了 Webpack 外，rollup、parcel 也支持上述写法引入。

3. create-react-app

Webpcak 引入 React 对于老手来说更加灵活，但对于新手来说，Webpack 的配置很复杂，为了引入 React，还要配置复杂的 Webpack，就更加深了难度，因此，像 Vue 配备了 Vue cli 一样，React 也配备了 React 开发的标准工具，即 create-react-app 工具，和 Vue cli 是类似的，都内置了 Webpack ，帮我们配置好了 React 的开发环境，直接使用就好了。

对于新手来说，create-react-app 工具更容易上手。

//全局安装 create-react-app
yarn global add create-react-app

//查看版本号
create-react-app --version

//创建 React 文件，进入到要创建的目录中，执行创建命令
create-react-app 项目名

以上就是浅谈React 的引入的详细内容，更多关于React 的引入的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 详解React中Props的浅对比

    上一周去面试的时候,面试官我PureComponent里是如何对比props的,概念已经牢记脑中,脱口而出就是浅对比,接着面试官问我是如何浅对比的,结果我就没回答上来. 趁着周末,再来看看源码里是如何实现的. 类组件的Props对比 类组件是否需要更新需要实现shouldComponentUpdate方法,通常讲的是如果继承的是PureComponent则会有一个默认浅对比的实现. // ReactBaseClasses.js function ComponentDummy() {} Compo

  • React事件节流效果失效的原因及解决

    React事件节流效果失效的原因及解决

    今天做react项目中,给一个 input onKeyDown 事件做节流,出现了节流效果失效. 问题代码: render() { return ( <div className="search-bar"> <input className="search-input" type="text" placeholder="请输入要搜索的用户名(英文)" onKeyDown={this.throttle(this

  • React合成事件详解

    react合成事件指的是react用js模拟了一个Dom事件流.(fiber树模拟Dom树结构) 合成事件的事件流在fiber树中发生捕获和冒泡. 从点击输入框开始 当你点击input输入框,react在根节点(注1)监听到focus事件(注2)(注3). 如何从原生事件找到对应的虚拟Dom? 此时,react得到的信息只有原生事件对象(nativeEvent).react通过nativeEvent对应的Dom(eventTarget),沿着Dom树向上找到距离该eventTarget最近的被r

  • 详解antd+react项目迁移vite的解决方案

    antd+react+webpack往往是以react技术栈为主的前端项目的标准组合,三者都有成熟的生态和稳定的表现,但随着前端圈的技术不断革新,号称下一代构建平台vite2的发布,webpack似乎不那么香了,为什么这么说呢,因为vite太快了.经过一段时间的尝试,决定在项目中把webpack替换成vite试试,遂写成本文分享给大家. Vite是什么 作为本文的主角,首先简单介绍一下vite这个构建工具,该工具是尤雨溪推出的[下一代前端开发和构建工具],vite其实也不是一个新的工具,早在一年

  • React为 Vue 引入容器组件和展示组件的教程详解

    如果你使用过 Redux 开发 React,你一定听过 容器组件(Smart/Container Components) 或 展示组件(Dumb/Presentational Components),这样划分有什么样的好处,我们能否能借鉴这种划分方式来编写 Vue 代码呢?这篇文章会演示为什么我们应该采取这种模式,以及如何在 Vue 中编写这两种组件. 为什么要使用容器组件? 假如我们要写一个组件来展示评论,在没听过容器组件之前,我们的代码一般都是这样写的: components/Comment

  • react国际化react-intl的使用

    react国际化react-intl的使用

    react怎么实现国际化?react-intl插件提供了一套实现react国际化的方法,具体实现如下~~ 一 搭建react环境和下载相应插件 默认你已经安装了nodejs 如果没有装的百度装下 这里不再细讲 利用react官方脚手架搭建react项目,已经存在有的react项目也可忽略搭建这步:然后下载相关依赖 react-intl npx create-react-app react-intl-demo npm i react-intl -S 等待下载完成 找到项目根目录下的src文件夹 在

  • React中如何引入Angular组件详解

    前言 为了在我的编辑器中使用 Angular,我用 Angular 编写了一个重命名功能.而为了使用它,我得再次使用一次 customEvent ,而在这个微前端架构的系统中,其事件通讯机制已经相当的复杂.在这部分的代码进一步恶化之前,我得尝试有没有别的方式.于是,我想到了之前在其它组件中使用的 Web Components 技术,而 Angular 6 正好可以支持. 下面话不多说了,来一起看看详细的介绍吧 HTML 中引入 Web Components 我所需要做的事情也相当的简单,只需要将

  • React使用高德地图的实现示例(react-amap)

    React使用高德地图的实现示例(react-amap)

    pc版React重构,使用到了高德地图.搜了资料,发现有一个针对React进行封装的地图插件react-amap.官方网址:https://elemefe.github.io/react-amap/components/map,有兴趣的可以看下里面的API. react-amap 安装 1.使用npm进行安装,目前是1.2.8版本: cnpm i react-amap 2.直接使用sdn方式引入 <script src="https://unpkg.com/react-amap@0.2.5

  • react项目引入scss的方法

    react项目引入scss的方法

    首先下载依赖 yarn add sass-loader node-sass 然后在项目路径 node_modules/react-scripts/config/webpack.config.js 打开文件 找到 加入红线内的代码 { test:/\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader'] }, 就可以使用scss了 知识点扩展: React pwa的配置 在到webpack配置文件中添加插件 const Wor

  • 浅谈React 的引入

    浅谈React 的引入

    1. CDN 引入 和普通的 JS 库或框架一样,React 也可以从 CDN 引入. 在使用 CDN 引入之前需要了解两种类型的 JS 文件,一个是 cjs ,一个是 umd. cjs:全称为 CommonJS,是 Node.js 支持的模块规范 umd:全称为 Universal Module Definition 是统一模块定义,是包含 Node.js 使用的 cjs 的,兼容包含浏览器.Node.js 的模块规范. 新模块规范:最新的模块规范是使用 import 和 export 关键字

  • 浅谈React中组件逻辑复用的那些事儿

    基本每个开发者都需要考虑逻辑复用的问题,否则你的项目中将充斥着大量的重复代码.那么 React 是怎么复用组件逻辑的呢?本文将一一介绍 React 复用组件逻辑的几种方法,希望你读完之后能够有所收获.如果你对这些内容已经非常清楚,那么略过本文即可. 我已尽量对文中的代码和内容进行了校验,但是因为自身知识水平限制,难免有错误,欢迎在评论区指正. 1. Mixins Mixins 事实上是 React.createClass 的产物了.当然,如果你曾经在低版本的 react 中使用过 Mixins,

  • 浅谈React双向数据绑定原理

    浅谈React双向数据绑定原理

    目录 什么是双向数据绑定 实现双向数据绑定 数据影响视图 视图影响数据 如果已经学过Vue,并且深入了解过Vue的双向数据绑定的话,就会明白 Vue 2.0 双向数据绑定的核心其实是通过Object.defineProperty来实现数据劫持和监听. 在 Vue 3.0 中则通过 Proxy来实现对整体对象的监听,对 Vue2.0 的优化. 什么是双向数据绑定 数据模型和视图之间的双向绑定. 当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化:可以这样说用户在视图

  • 浅谈react 16.8版本新特性以及对react开发的影响

    目录 react16.8版本更新 useEffect react16.8版本更新解决了什么问题 组件复用更便捷 hooks和reactdiff算法 总结 Facebook团队对社区上的MVC框架都不太满意的情况下,开发了一套开源的前端框架react,于2013年发布第一个版本. react最开始倡导函数式编程,使用function以及内部方法React.creactClass创建组件,之后在ES6推出之后,使用类组件Class构建包含生命周期的组件. react 16.8版本更新 react16

  • 浅谈React 属性和状态的一些总结

    一.属性 1.第一种使用方法:键值对 <ClaaNameA name = "Tom" /> <ClaaNameA name = {Tom} /> <ClaaNameA name = {"Tom"} /> <ClaaNameA name = {[1,2,3]} />//数组 <ClaaNameA name = {FunctionNAme} /> //定义一个函数 2.第二种方法:三个点的展开对象形式 var

  • 浅谈react.js中实现tab吸顶效果的问题

    在react项目开发中有一个需求是,页面滚动到tab所在位置时,tab要固定在顶部. 实现的思路其实很简单,就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时,将tab的position变为fixed. 在react中,我在state中设置一个navTop属性,切换这个属性的值为true或者false,然后tab标签使用classnames()这个方法来利用navTop的值添加类名fixed. 一开始我是这样写的: import cs from 'classnam

  • 浅谈react+es6+webpack的基础配置

    这是模块化开发.主流框架和最新版的ECMAScript语法规范的一个小demo 准备工作 安装 nodeJs 首先进入node官网,去下载最新版的nodeJs webpack 安装webpack npm install webpack -g 参数-g表示全局安装webpack,你在cmd命令中哪个文件夹下都可以使用webpack的命令,如果不加-g的话,是只可以在你安装webpack的目录下使用webpack这个命令 webpack 也有一个 web 服务器 npm install webpac

  • 浅谈python import引入不同路径下的模块

    python 包含子目录中的模块方法比较简单,关键是能够在sys.path里面找到通向模块文件的路径. 下面将具体介绍几种常用情况: (1)主程序与模块程序在同一目录下: 如下面程序结构: `-- src     |-- mod1.py     `-- test1.py 若在程序test1.py中导入模块mod1, 则直接使用 import  mod1或from mod1 import *; (2)主程序所在目录是模块所在目录的父(或祖辈)目录 如下面程序结构: `-- src     |--

  • 浅谈react.js 之 批量添加与删除功能

    浅谈react.js 之 批量添加与删除功能

    最近做的CMS需要用到批量添加图片的功能:在添加文件的容器盒子内,有两个内容,分别是:添加按钮与被添加的选择文件组件. 结构分析: 被添加的组件,我们称为:UploadQiNiuFiles(七牛文件上传组件),含一个删除当前组件的删除按钮 添加按钮的事件 被添加组件存放的容器 做这个效果只需要明白三个方法的用途就OK: 直接绑定要删除组件的  deleteType(),它是调用删除index数量的方法  removeContent() //删除{qiniu}与{deleteQiNiu}内容,是把

  • 浅谈React Native打包apk的坑

    浅谈React Native打包apk的坑

    RN的打包,大家可以根据官网一步一步来,但这里有几个地方注意,一下简单介绍: 生成一个签名密钥 在项目的目录下打开cmd命令窗口输入一下命令运行: keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 这条命令会要求你输入密钥库(keystore)和对应密钥的密码,然后设置一些发行相关的信息.最后它会生成一个叫做my-re

随机推荐