学习React前的准备工作

  学习React前提必须拥有Javascript和DOM知识。这个门槛已经很低了。但是很多的教程里面都提到npm,nodejs.要先安装nodejs。在零基础的情况,我一度以为学习React的运行必须依靠nodejs环境。其实不是这样子的。

  一、常用工具介绍
  1.nodejs: Node.js? is a JavaScript runtime built on Chrome’s V8 JavaScript engine.  how to understand?首先node.js是一个JavaScript运行环境。一般我们了解的JavaScript是运行在浏览器中的。所以就能理解它是基于Chrome‘s V8 JavaScript engine的原因了。有了nodejs,就可以抽象javascript公共组件单独部署到nodejs上提供公共服务了。前端的可能性,从此更加具有想象力。

  2.npm:(node package manager)node包管理器,主要管理node包安装,卸载、更新、查看、搜索和发布。将开发者从繁琐的包管理工作(版本、依赖)中解放出来。nodejs已经集成了npm,所以安装nodejs的时候npm也一并安装好了。

  3.nvm:node version manager,用它可以方便的在机器上安装并维护多个Node的版本.那么为什么需要多个版本呢?场景有很多,比方说:你可能同时进行两个项目,而不同项目所使用的node版本是不一样的;又或者你要用更新的版本是做一些实验。这种情况下,如果没有NVM自己去安装和维护多个版本的node也是一件比较麻烦的事情。这就是nvm的价值。

  4.webpack:webpack is a module bundler(webpack就是一个模块打包机)。它就是分析你当前项目的结构把项目中用的浏览器不能理解的东西(SCSS , jade, Typescript等),按照合适的方式打包并把它翻译成浏览器可以理解的 css和js。在webpack中一切都是模块(图片、CSS也是)。

  注意:学习React要安装nodejs,主要的原因不是React依赖nodejs,而是webpack依赖nodejs.下面主要讲讲具体在Windows环境下安装nvm、nodejs(npm)和webpack的方法。

  二、nodejs在windows下的安装

  1.下载、安装、使用 nvm和nodejs

  下载nvm包地址: https://github.com/coreybutler/nvm-windows/releases
  选择nvm-setup.zip进行下载,安装。如图:

  程序安装过程中,在 Set Node.js Symlink 这一步目录设置,是待会 nvm use 存放你的 nodejs 程序的目录 [C:\\DevTools\\nodejs]。

nvm v // 查看版本 => 1.1.1
nvm install latest // 下载最新的 node 版本 v7.2.1
nvm install 4.4.4 // 安装不同版本
nvm install 6.2.0 32 // 默认是64位,32位需指定
nvm uninstall 6.2.0 #卸载对应的版本

  下载完成后,会在 \nvm 文件夹下多个 v7.2.1 文件夹。

nvm use 4.4.4 // 引入使用
nvm list // 查看已安装的 node 版本

  2.配置npm全局安装路径

  执行下面的命令:

npm config set prefix "E:\nodejs\npm-global"

  C:\\Users\\XXX\\ 会生成个 .npmrc 文件,内容如下:prefix=E:\nodejs\npm-global

  去装些全局的东西:

npm install webpack -g
npm install webpack-dev-server -g

  全局的所有包都在这:E:\nodejs\npm-global\node_modules。以后我们只要用npm安装包的时候加上 -g 就可以把包安装在我们刚刚配置的全局路径下了。
  修改环境变量:变量名为:NPM_HOME,变量值为 :E:\nodejs\npm-global。在Path的最前面添加;%NPM_HOME%
  最后,可以通过npm -v 查看安装的版本.

时间: 2024-08-13 11:57:38

学习React前的准备工作的相关文章

学习webpack前的准备工作

前言 由于vue和react的流行,webpack这个模块化打包工具也已经成为热门.作为前端工程师这个需要不断更新自己技术库的职业,真的需要潜下心来学习一下. 准备工作(针对mac用户) 安装 homebrew $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 安装nodejs $ brew install node 安装 n 来管理

tomcat源码分析前的准备工作

Tomcat源码学习前的准备工作 注:由于网上的帖子大部分没有配套的图片和错误的分析,所有费了半天劲整理了此篇博客,希望大家少走弯路吧 下面我们就开始我们的Tomcat源码学习之旅. 1. 下载Tomcat6.0的源代码 首先,我们得下载Tomcat6.0的源代码.Tomcat源代码的版本控制工具不是CVS,而是Subversion,如果您的机器上没有安装Subversion,请从http://subversion.tigris.org/servlets/ProjectDocumentList?

[深入理解Android卷一全文-第一章]阅读前的准备工作

由于<深入理解Android 卷一>和<深入理解Android卷二>不再出版,而知识的传播不应该因为纸质媒介的问题而中断,所以我将在CSDN博客中全文转发这两本书的全部内容. (出版社排版好的PDF版正在向出版社申请,到时候会通过CSDN下载资源发布) 第一章  阅读前的准备工作 本章主要内容 本章简单介绍Android系统架构.编译环境的搭建以及一些工具的使用. 1.1  系统架构 1.1.1  Android系统架构 Android是Google公司推出的一款手机开发平台.该平

学习NGUI前的准备NGUI的相关信息

学习NGUI前的准备NGUI的相关信息 第1章  学习NGUI前的准备 NGUI是Unity最重要的插件,在Unity资源商店(Asset Store)的付费排行榜中始终名列前茅,如图1-1所示.本章作为本书的第一讲,内容主要包括以下几个部分本文选自NGUI全面实践教程: q  NGUI的购买/下载和导入过程: q  熟悉NGUI资源的构成: q  熟悉NGUI主菜单的各菜单项: q  熟悉NGUI支持的鼠标快捷操作: 本章的内容可以让读者更加全面的认识NGUI,同时也为本书后面章节的讲解做铺垫

学习LINUX前,学习的内容(20170410)

学习Linux前,教导学习的是计算机基础 CPU与存储之间 操作系统(内核:Kernel负责管理硬件资源,并且把硬件资源虚拟成其他样子,提供给上层所需要运行的应用程序) API(Application progrem interface) 库:Library 本身也是应用程序,它不能独立运行,它只能被其他应用程序调用才能运行 库调用(LIB call) 系统调用(System Call)--api 应用程序本身可以调用库,也可以直接跟内核交互 应用程序随系统的启动而启动 也有根据需要而启动--交

Kinect 开发 &mdash;&mdash; 开发前的准备工作

Kinect SDK v1.5 支持托管语言和非托管语言 Xbox360的游戏是基于Xbox360开发工具包 (XDK)开发的,Xbox 360和Windows是两个完全不同的系统架构.使用Kinect for windows SDK 编译的代码并不能直接部署到Xbox环境中 Kinect 应用程序必须在一个原生操作系统环境下编译,运行 -- 无法在虚拟机上运行 Kinect 开发 —— 开发前的准备工作,布布扣,bubuko.com

通过迁移的方式解决Active Directory服务器问题之1-迁移前的准备工作

前言 "重装是最好.最快的解决方法".在使用Windows操作系统一段时间之后,尤其是经常频繁打补丁.升级.添加删除软件后,系统会比较慢,有的可能会出现一些"莫名其妙"的问题,这个时候,果断备份.重装.恢复系统,是我们经常做的方法.但是,企业网络中的服务器,如果使用几年之后出问题,你能下定决心重装吗?如果重装,怎么重装才能不丢失数据.在重装过程中不影响使用.本文通过一个具体的案例,介绍通过迁移的方法彻底解决Active Directory服务器存在问题的方法. 正文

[转]微信公众平台(测试接口)开发前的准备工作(转载自walkingmanc的专栏)

本文转自:http://blog.csdn.net/jiangweicpu/article/details/21228949 http://blog.csdn.net/walkingmanc/article/details/21457097第二讲 探秘微信公众号 1.   申请微信公众号 我们要进行微信公众平台的开发,第一步当然是要有公众号了.什么?不知道什么是微信公众号,看来你还要先回炉炼炼了,呵呵.通俗的说,我们微信平台就好像是一个大社会,里面有个体人,也有各种组织机构.你自己使用的普通微信

React前后端如何同构,防止重复渲染

首先解释React前后端同构.React首屏渲染的概念.然后通过这2个概念解决服务端渲染完成后浏览器端重复渲染的问题. 什么叫前后端同构? 为了解决某些问题(比如SEO.提升渲染速度等)react 提供了2个方法在服务端生成一个HTML文本格式的字符串.在得到了这个HTML格式的字符串之后,通常会将其组装成一个页面直接返回给用户的浏览器. 到这里,服务端的活已经干完了,然后就是浏览器这边干活. 浏览器拿到HTML文本后,立刻进行渲染将内容呈现给用户.然后加载页面所需的 .js 文件,然后执行 J