1.安装node

  下载: https://nodejs.org/en/download/

  测试--->返回版本号即为安装成功:

    $ node -v

    $ npm -v

2.安装全局create-react-app

  $ sudo npm install -g create-react-app

3. 构建React开发环境create-react-app

  $ create-react-app my-app

4.安装babel---@babel/standalone

  1)进入my-app

    $ cd my-app

  2) npm 初始--->一路回车

    $ npm init

  3)安装bable/standalone

    $ npm install --save-dev @babel/standalone

5.运行

  $ cd my-app

  $ npm start

6.本地引用路径

<script src="/my-app/node_modules/@babel/standalone/babel.js"></script>

<script src="/my-app/node_modules/react/umd/react.development.js"></script>

<script src="/my-app/node_modules/react-dom/umd/react-dom.development.js"></script>

Mac下搭建react及bable的更多相关文章

  1. Mac下搭建react native开发环境

    安装必需软件 Homebrew Homebrew, Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件. /usr/bin/ruby -e "$(curl -fsSL htt ...

  2. Mac下搭建react开发环境

    安装node 官网下载 https://nodejs.org/en/ 双击安装,接下来都是默认选择即可,直至安装成功 测试是否安装成功,分别输入以下命令: node -v npm -v 如下图所示,说 ...

  3. react-native —— 在Windows下搭建React Native Android开发环境

    在Windows下搭建React Native Android开发环境 前段时间在开发者头条收藏了 @天地之灵_邓鋆 分享的<在Windows下搭建React Native Android开发环 ...

  4. Mac下搭建hexo

    Mac下搭建hexo 并部署到gitcafe 1.安装brewhome ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homeb ...

  5. MAC下搭建及使用XAMPP的详细教程

    Windows和Linux都可以搭建本地伺服器(LAMP和IIS),Mac當然也可以,下面教你怎麼使用XAMPP在Mac下搭建一個功能齊全的本地伺服器 所需條件 1.Mac系統(廢話) 2.最好有可用 ...

  6. 1、在MAC上搭建React Native开发环境

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  7. Mac下搭建php开发环境教程

    方案一:原生安装 这篇文章主要介绍了Mac下搭建php开发环境教程,Mac OS X 内置了Apache 和 PHP,这样使用起来非常方便.本文以Mac OS X 10.6.3为例,需要的朋友可以参考 ...

  8. 手把手教你在Windows下搭建React Native Android开发环境

    最近看到React Native好像好厉害的样子,好奇心驱使之下体验了一下并将在Window下搭建React Natvie Android环境的步骤记录下来,并有需要的朋友参考.(我都是参考官方文档的 ...

  9. mac 下搭建 Android 开发环境

    因工作需要,要在mac 下搭建 Android 开发环境.谷歌.度娘了好久,没有找个一个完整又系统的方法,很是苦恼.最终,皇天不负有心人,找到了下面这篇文档,结合亲身体验,特此记录.也为有这方面需求的 ...

随机推荐

  1. 在ASP.NET MVC中使用Area区域

    在大型的ASP.NET mvc5项目中一般都有许多个功能模块,这些功能模块可以用Area(中文翻译为区域)把它们分离开来,比如:Admin,Customer,Bill.ASP.NET MVC项目中把各 ...

  2. 从汇编层面解释switch语句判断快速的原因

      源码如下: #include <stdio.h>   void main(){     int flag;     flag=1;     switch (flag){         ...

  3. python中type、class、object之间的关系

    先看一段代码 # -*- coding:UTF-8 -*- __autor__ = 'zhouli' __date__ = '2018/11/13 18:40' a = 1 b = 'abc' pri ...

  4. Mysql——数据库和数据表的基本操作

    /*创建数据库--- CREATE DATABASE 数据库名;*/ CREATE DATABASE itschool; /*查看已经存在的数据库*/ SHOW DATABASES; /*查看某个已创 ...

  5. 根据需要查找需要的第三方pyhton库

    1.可以在https://awesome-python.com/这个网站上按照分类去寻找,上面收录了比较全面的第三方库.比如我们想要找爬虫方面的库时,查看Web Crawling这个分类,就能看到相应 ...

  6. 给 Chrome浏览器 添加 Javascript小书签,查看当前页面全部加载的javascript文件及代码片段

    小书签又名 Bookmarklet,由英文单词 Bookmark 和 Applet 组合而来.简单地说,小书签就是把一段带有特定功能的 JavaScript 代码保存至收藏夹,当你需要的时候点击它来实 ...

  7. vue-computed计算属性

    计算属性:用来封装你想对一个属性进行的操作 computed VS mothod实现的效果和定义一个methods中的function相同,但是他们的区别在于:methods的function当触发重 ...

  8. BZOJ1015或洛谷1197 [JSOI2008]星球大战

    BZOJ原题链接 洛谷原题链接 发现正着想毫无思路,所以我们可以考虑倒着思考,把摧毁变成建造. 这样很容易想到用并查集来维护连通块,问题也变的很简单了. 建原图,先遍历一遍所有边,若某条边的两端点未被 ...

  9. Spring MVC 中的输入验证 Vlidator

    在 Spring MVC 中有两种方式可以验证输入:1. Spring 自带的验证框架:2. 利用 JSR 303 实现,即 Java Specification Requests Converter ...

  10. ABP框架系列之八:(Introduction-介绍)

    Introduction We are creating different applications based on different needs. But implementing commo ...