本篇文章将介绍 React 前端框架的环境配置以及项目搭建方法, 其中涉及到了 node.JS(JS 运行平台),NPM(依赖包管理工具) 等内容.
React 作为时下较为热门的前端框架, 由 Facebook 公司开创, 用于搭建响应式的前端页面, 这里不作太多介绍. 下面我们直接开始搭建 React 框架运行环境:
1, 首先, 我们需要安装 node.JS, 直接搜索并在官网下载安装包.
node.JS 官网: https://nodejs.org/en/
选择适合的版本后下载下来, 并打开安装程序, 如下图所示
2, 然后, 根据安装提示安装 node.JS,NPM 包管理工具也会一同安装.
安装完成后, 打开 cmd 命令行, 输入 node -v 和 NPM -v 来查看版本号, 如果显示则安装完成.
3, 现在我们成功安装了 node 和 NPM, 然后我们来用 NPM 创建新的项目, 首先用 NPM 安装 create-react-App 工具, 其可以自动地在本地目录中创建 react 项目.
在 cmd 命令行中输入:
NPM install -g create-react-App
4, 等待其安装, 意思是全局安装 create-react-App 脚手架工具, 然后就可以使用命令创建新的 react 项目. 在 cmd 中输入:
- create-react-App my-new-App
- (默认安装在用户目录下, 想更换目录可以参照如下命令)
- d: (选择 D 盘)
- cd '文件夹路径' (进入 D 盘中的指定文件夹)
然后再输入 create-react-App my-new-App 则可安装在特定目录下
接下来需要等待较长时间, 然后我们就可以在安装路径中看到创建完的文件夹, 打开后, 内部如下所示:
其中, node_modules 用于存放项目的依赖包, 也就是构建这个 React 项目可能会用到的工具,
--public 文件夹中是 index.html 存放目录, 也就是 React 根页面的所在地
--src 中用于存放 JS 文件, 也就是项目开发中的主要区域
--package.JSON 用于记录项目信息, 以及外部依赖包的导入信息等
--JSON 文件不能直接打开, 需要用到文本编辑器, 本人用的是 VScode
5, 然后, 在命令行中 "cd" 该目录, 输入如下命令, 部署 NPM, 以及导入 react-dom 依赖包.
cmd 中输入:
NPM init (然后一路回车) NPM install --save react react-dom ( 在该目录下导入 react 和 react-dom) NPM install --save react-router-dom (react 路由, 以后会用到)
NPM 获取有些耗时间, 这里建议大家使用淘宝团队的 cnpm, 安装方法请另行搜索. 以后会用 cnpm 代替 NPM, 效果一样.
然后就可以通过 NPM start 来启动项目, 自动弹出 localhost:3000 的网页窗口, 内容如下:
想关闭项目的话, 直接关闭 CMD 窗口就可以, 或者使用 Ctrl+C , 输入 Y 后退出
来源: http://www.css88.com/qa/react/15938.html