Mac下搭建React开发环境

Mac下搭建React开发环境

  1. 安装node
  2. 安装create-react-app
  3. 安装TypeScript

1. 安装Node

方式一:直接在官网上下载:http://nodejs.cn/download/
在这里插入图片描述
下载完成后点击安装包安装即可,Win/Mac均可以通过此方式下载。

方式二:命令行安装,前提是mac上已经安装了homebrew

brew install node

Node即JavaScript开发环境,安装好之后就本地可以编写运行javascript脚本了。

2. 安装create-react-app

Create React App是FaceBook的React团队官方推出的一个构建React单页面应用的脚手架工具。它本身集成了Webpack,并配置了一系列内置的loader和默认的npm的脚本,可以轻松实现零配置快速开发React应用。

sudo npm install -g create-react-app

这个时候有可能遇到Error: EACCES: permission denied错误,该问题有两种官方解决方案

  1. 重新安装一个node(官方推荐方式)
    参考地址:https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
  2. 修改npm默认路径(博主采用的方法)

运行如下命令:

(1)创建npm global安装目录
mkdir ~/.npm-global
(2)配置npm使用刚刚创建的目录
npm config set prefix '~/.npm-global'
(3)在~/.zshrc文件中增加配置(如果没有使用zsh,应改为~/.profile)
export PATH=~/.npm-global/bin:$PATH
(4)配置文件立即生效(如果没有使用zsh,应改为~/.profile)
source ~/.profile
(5)重新执行命令
npm install -g create-react-app

即可正常安装。

至此,基于JavaScript的React开发环境已经搭建完成,可以参考官方入门教程开发一个井字棋游戏来快速上手,这个例子非常适合入门,博主稍后也会出一篇讲解该例子的博客。

如果在运行react项目时,发现如下报错:
ERR_OSSL_EVP_UNSUPPORTED
或者
Error: error:0308010C:digital envelope routines::unsupported

这是因为我们在官网或者命令行下载的node版本较高,对Open SSL的支持有改动引起的,可以在~/zshrc(原生shell换成~/.profile)加上:

export NODE_OPTIONS=--openssl-legacy-provider

3. 安装TypeScript

目前大部分前端项目都是使用typescript开发的,所以最后一步我们安装typescript。

TypeScript 由微软开发的自由和开源的编程语言,它是JavaScript 的一个超集,支持 ECMAScript 6 标准(ES6 教程)。
TypeScript 设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上。
在这里插入图片描述

我们已经安装了npm即node package manger,可以仅使用一行命令安装typescript

npm install -g typescript

参考文献

  1. TypeScript教程
  2. 使用npm命令时报错误Error: EACCES: permission denied,如何解决?
  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值