React 环境搭建(起步)

前言

这篇文章没什么好分享的,只是记录下 React 的环境搭建,并且篇也不会很长。官网:https://reactjs.org/

安装

国内最好切找到淘宝的镜像,不然会很慢,甚至还很有可能安装不成功。

npm config set registry https://registry.npm.taobao.org

可以通过下面这个命令查看是否配置成功。

npm config get registry

如果配置成功,你会看到提示: https://registry.npm.taobao.org/。

安装 create-react-app

npm install -g create-react-app

下面就可以通过命令来安装 React 了。

# 安装 react 项目
npm init react-app react-blog
# 切换到项目目录
cd react-blog
# 启用项目
npm start

注意:必需要保存在执行 init react-app 之前已经安装了 create-react-app,不然没法安装成功。

如果是通过以下命令安装的话

# 安装 react 项目
create-react-app react-blog
# 切换到项目目录
cd react-blog
# 启用项目
npm start

有可能会提示 create-react-app 未找到命令,此时你可以配置下软链接。

sudo ln -s /home/zhaoxixiong/Software/node/bin/create-react-app /usr/local/bin/

创建完软链接后就可以通过 create-react-app 命令创建项目了。

使用 scss

要想在项目中使用 SCSS 也很简单,我们只需要安装 npm install node-sass 就行。

cnpm install node-sass --save

安装完后,把 .css 的文件修改成 .scss 就可以了。

详情可阅读:https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet

如果没法安装可以使用:

cnpm install node-sass --save

安装完成后就可以使用 scss 写样式了。

配置项

下面就是一些常用的配置项修改。

修改端口号

webpack 的配置文件 文件路径:react-blog/node_modules/react-scripts/scripts/start.js,找到端口号进行修改就好,比如:改成3006

const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3006;

使用代理

修改项目根目录下 packjson.js 文件,添加 proxy 属性

...... 忽略其它配置
"proxy": "http://localhost:3432",
...... 忽略其它配置

相关链接:

https://github.com/facebook/create-react-app