React环境搭建

一.安装node.js

官方下载地址https://nodejs.org/en/
尽量安装最新的稳定版,react对node.js有版本要求

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

JavaScript一般都是在浏览器中执行的,而node.js就是提供了一个可独立执行JavaScript的环境,这样我们就有了一个可以独立部署的前端工程。

通过以下命令检查是否安装成功
node -v
npm -v

二.npm包管理工具 基本使用

NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:
1.允许用户从NPM服务器下载别人编写的第三方包到本地使用。
2.允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
3.允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

本地安装

npm install 包名@版本号
uninstall同理

  1. 将安装包放在 ./node_modules 下(运行 npm 命令时所在的目录
    ),如果没有 node_modules 目录,会在当前执行 npm 命令的目录
    下生成 node_modules 目录。

全局安装

npm install -g 包名@版本号
uninstall同理

  1. 将安装包放在 /usr/local 下或者你 node 的安装目录。
  2. 可以直接在命令行里使用。

其他常见命令
npm list -g 查看安装的包列表
npm list grunt

三.创建并运行react项目

npm install -g create-react-app 安装官方提供的生成react项目demo工具
create-react-app hello-react 在当前目录下创建名为hello-react的项目

如果安装包太慢,可以改为国内的淘宝源
npm config set registry https://registry.npm.taobao.org

cd hello-react 进入项目目录
npm start 运行

四.项目目录结构介绍

yarn.lock 安装包版本号
package.json 运行npm start 命令就是运行该文件里的内容
node_modules 外部包文件
public/index.html 页面上显示的html的内容
public/manfest.json PWA 如果是作为一个app,定义app的图标,主体
src /index.js 项目的执行入口

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 其实在今年年初,就初略的写过一篇关于react项目创建的详细步骤的文章,但那时候都是在最后实践完成之后自己凭借着回...
    Swimly阅读 8,344评论 0 2
  • 在当下前端热潮中,一大批前端开发者,迷失了学习和追求的方向,面对日夜更迭的前端技术,我想大多数人跟我一样会觉得自己...
    wenzirang阅读 3,704评论 0 3
  • React环境搭建(一):webpack author: lordkhandate: 2017-02-08refe...
    lordkhan阅读 3,754评论 0 0
  • 周末呆了两天星巴克,通读了一遍react以及部分npm,webpack的文档,终于可以给一些像我一样被前端杂乱的工...
    MMoooooon阅读 6,421评论 2 2
  • 选择工具 开发react的工具很多,我们这里选择atom,首先去atom的官网下载https://atom.io ...
    者薄阅读 5,860评论 0 1