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，如何解决？