(一)React开发环境搭建

一.安装Nodejs

(一)React开发环境搭建

1.下载windows平台nodejs环境安装包,nodejs官网,找到DOWNLOADS点击,找到Windows Installer 如果为64位电脑可以选择64位版本,点击下载后安装。

2.开启cmd命令视窗,打上 npm -v 查看npm是否可正常执行,我们使用Nodjs的npm作为包管理器。

(一)React开发环境搭建

3.npm安装package速度较慢慢,改用taobao的npm registry,可下如下指令:

npm install -g cnpm --registry=https://registry.npm.taobao.org

4.npm 基本指令说明 
       在package.json所在目录下使用npm install,-g 为安装全域的包、--save是安装为项目依赖包、而--save-dev则是安装成开发用依赖包。 
       使用npm update 可以把当前目录下node_modules子目录里边的对应模块更新至最新版本,(项目有相容性时,不可轻易使用)。 
       使用npm cache clear可以清空npm本地缓存。 
       在package.json所在目录下使用npm install,则会自动安装项目所需的依赖包。

二.安装Python

主要是用于后面方便我们安装Atom的plugin

(一)React开发环境搭建

1.在python官网上下载和自己本机匹配的python版本。

2.设定其环境变量%PYTHON_HOME%和%PATH%,如下图:

(一)React开发环境搭建(一)React开发环境搭建

三.安装开发工具Atom

Atom 是 GitHub 打造的现代编辑器,速度快,跨平台,支持各种插件以及可以异常方便地自定义扩展。
今天不介绍其他功能,只介绍几个开发React插件组合,绝对让你的工作效率飙升好几倍。

(一)React开发环境搭建

主要安装下列的React Plugin控件:

1.atom-React-autocomplete Plugin 对组件名及状态的自动补全

(一)React开发环境搭建

2.autocomplete-js-import Plugin 对模块导入智能提示

(一)React开发环境搭建

3.emmet-jsx-css-modules Plugin 对React内的Emmet补全,非单纯的expand【class => className 】

(一)React开发环境搭建

4.language-JavaScript-jsx Plugin 对 JavaScript, ES6, ES7, React JSX, Flow语法支持。

5.language-babel Plugin 写React必不可少【atom内开发react的核心插件!!!】

6.react-es6-snippets Plugin 支持es6写法的react snippet,挺实用。

7.react-snippets Plugin 和react-es6-snippets的搭配的更好。

8.js-func-viewer Plugin 可以查看函数的结构。

(一)React开发环境搭建

9.autocomplete-modules Plugin 模块智能提示。

10.minimap Plugin 让你了解当前屏幕所处相对位置。

(一)React开发环境搭建

以上为基本开发React前期应该准备的工具。

相关推荐