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. Lock关键字

    public abstract class CountBase { public abstract void Increment(); public abstract void Decreament( ...

  2. 查看SQL语句的真实执行计划

    DBMS_XPLAN包中display_cursor函数不同于display函数,display_cursor用于显示SQL语句的真实的执行计划,在大多数情况下,显示真实的执行计划有助于更好的分析SQ ...

  3. php面试题五之nginx如何调用php和php-fpm的作用和工作原理

    nginx如何调用php 采用nginx+php作为webserver的架构模式,在现如今运用相当广泛.然而第一步需要实现的是如何让nginx正确的调用php.由于nginx调用php并不是如同调用一 ...

  4. 10.13 新版本go on~

    上午1.5 终审 and 排期 合同管理那边又是切换选项时各种联动,我第一想法是 好麻烦,不想做这个...第二想法才是给我做吧 锻炼锻炼我 然后 分任务的时候 分给我了,,哈哈 开心 虽然我没想躲 但 ...

  5. ubuntu桌面环境安装中文环境

    apt install language-pack-zh-hans* language-pack-gnome-zh-hans* language-pack-kde-zh-hans* apt insta ...

  6. jenkins源码管理git分支参数化

    多个分支来回切换构建时,每次都需要去很多个job里面改分支名称,比较费时,分支参数化后可以只改一处就ok啦 步骤: 1.进入系统管理--系统设置 2.勾选全局变量,然后输入分支变量名和对应的分支名称 ...

  7. Difference between MB Star C3 and MB Star C4

    Many times ago, i saw a blog about MB sd connect C4 for benz, the author said he like this tool very ...

  8. 记一次Java Core Dump分析过程

    #背景提要 很久没有亲自动手部署代码了,命令行的亲切感越来越低.放飞了键盘,习惯了鼠标操作的windows环境.冷不丁实操部署也是不错的. 常常在部署时,运维同学对于[hs_err_pid]文件视而不 ...

  9. 为什么说Redis是单线程的以及Redis为什么这么快!

    参考文章:https://blog.csdn.net/xlgen157387/article/details/79470556 redis简介 Redis是一个开源的内存中的数据结构存储系统,它可以用 ...

  10. 初识XMind基本操作

    花了一些时间来学习了XMind,梳理了一下学习基础部分的内容,分为输入文字,添加分支,超级链接或附件,以及美化操作四个部分.