node是运行引擎,通过他可以直接在后端运行js语法

webpack是打包工具

react是前端框架

通过 npm 使用 React

我们建议在 React 中使用 CommonJS 模块系统,比如 browserify 或 webpack,本教程使用 webpack。

国内使用 npm 速度很慢,你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

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

这样就可以使用 cnpm 命令来安装模块了:

$ cnpm install [name]

更多信息可以查阅:http://npm.taobao.org/


使用 create-react-app 快速构建 React 开发环境

create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境。

create-react-app 自动创建的项目是基于 Webpack + ES6 。

执行以下命令创建项目:

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

npm/cnpm命令:

➜  react_redux cnpm install -h

Usage:

  npminstall
npminstall <pkg>
npminstall <pkg>@<tag>
npminstall <pkg>@<version>
npminstall <pkg>@<version range>
npminstall <folder>
npminstall <tarball file>
npminstall <tarball url>
npminstall <git:// url>
npminstall <github username>/<github project>
npminstall --proxy=http://localhost:8080 Can specify one or more: npminstall ./foo.tgz bar@stable /some/folder
If no argument is supplied, installs dependencies from ./package.json. Options: --production: won't install devDependencies
--save, --save-dev, --save-optional, --save-exact: save installed dependencies into package.json
-g, --global: install devDependencies to global directory which specified in '$npm config get prefix'
-r, --registry: specify custom registry
-c, --china: specify in china, will automatically using chinses npm registry and other binary's mirrors
-d, --detail: show detail log of installation
--trace: show memory and cpu usages traces of installation
--ignore-scripts: ignore all preinstall / install and postinstall scripts during the installation
--forbidden-licenses: forbit install packages which used these licenses
--engine-strict: refuse to install (or even consider installing) any package that claims to not be compatible with the current Node.js version.
--flatten: flatten dependencies by matching ancestors' dependencies
--registry-only: make sure all packages install from registry. Any package is installed from remote(e.g.: git, remote url) cause install fail.
--cache-strict: use disk cache even on production env.

1、http://www.ruanyifeng.com/blog/2015/03/react.html

2、npm的淘宝镜像:http://npm.taobao.org/

3、http://www.runoob.com/react/react-tutorial.html

4、http://www.runoob.com/w3cnote/webpack-tutorial.html

5、http://facebook.github.io/react/

6、https://facebook.github.io/react/docs/react-component.html

7、http://www.infoq.com/cn/dive-into-react

node/webpack/react的更多相关文章

  1. webpack+react+redux+es6开发模式

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  2. webpack+react+es6开发模式

    一.前言 实习了两个月,把在公司用到的前端开发模式做个简单的整理.公司里前端开发模式webpack+react+redux+es6,这里去掉了redux. webpack, react, redux等 ...

  3. webpack+react+redux+es6

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  4. 手把手教你如何使用webpack+react

    上一篇随笔讲述了新手入门入门前端 里面提到的第四阶段跟上当前前端的发展需要入门一个框架和自动化工具,当时推荐的是webpack+react 今天正好有空,也把自己入门webpack + react 的 ...

  5. Node.js + React + MongoDB 实现 TodoList 单页应用

    之前用 Ant Design 开发了一个项目,因此对 React 的特性有了一定的了解,React 使用封装组件的思想,组件各自维护自己的状态和 UI, 组件之间通过 props 传递数据和方法.当状 ...

  6. Webpack+React项目入门——入门及配置Webpack

    一.入门Webpack 参考文章:<入门Webpack,看这篇就够了> 耐心看完这篇非常有帮助 二.React+Webpack环境配置 参考文章:<webpack+react项目初体 ...

  7. Webpack+React+ES6 最新环境搭建和配置(2017年)

    刚刚学习React,发现React在ES6下的语法才是本体,结合ES6新的语言特性,使组件化开发显得更加直观.而且现在的Angular2也开始使用支持强类型的TypeScript,转译(transpi ...

  8. 最小白的webpack+react环境搭建

    本文也同步发表在我的公众号“我的天空” 从零开始,用最少的配置.最少的代码.最少的依赖来搭建一个最简单的webpack+react环境. 最近在玩webpack+react+移动端,那么第一步自然是搭 ...

  9. 搭建 webpack + react 框架爬坑之路

    由于工程实践需要搭一个 webpack + react 框架,本人刚开始学,就照b站上的react黑马视频做,爬过无数个坑...希望读者能引以为戒.我的是macos系统 https://www.bil ...

随机推荐

  1. IOS开发学习笔记034-UIScrollView-xib实现分页

    通过xib实现分页功能的封装 1.首先实现xib UIView 的尺寸为300*130,因为准备的图片为600*260. scrollView属性设置如下: 2.新建一个和xib同名的类 2.1 类方 ...

  2. IOS开发学习笔记028-UITableView单组数据显示代码优化

    1.如果表格中又几百条数据的话,系统会自动加载显示在界面上得数据,逐一加载 添加100个数据到UITableView中 ; i < ; i ++) { NSString *icon = [NSS ...

  3. cegui 编译过程详解(cegui-0.8.2)

    cegui配置整了好长时间了,在一位大牛帮助下终于搞定了,网上的教程大多是老版本的,cegui-0.8.2版的配置寥寥无几,现在总结一下,献给正在纠结的小白们. 准备工作 第一步,先下载cegui-0 ...

  4. MOCTF 简单注入

    最近在练习sql注入写脚本,记录一下思路,刚学的and 1=1也拿出来溜溜 http://119.23.73.3:5004/?id=1 首先,没有被过滤是正常显示. 没有被过滤但是查询不到就是空白,比 ...

  5. day02_01.能被3整除的数

    第1题 能被3整除的数 编程思想的初步形成 把人的正常思维放大化,用放大镜去放大你的每个思考过程 你会发现,原来编程没有你想象的那么难 题目:输出100以内(不含100)能被3整除的所有整数 < ...

  6. 菜鸟之路——机器学习之BP神经网络个人理解及Python实现

    关键词: 输入层(Input layer).隐藏层(Hidden layer).输出层(Output layer) 理论上如果有足够多的隐藏层和足够大的训练集,神经网络可以模拟出任何方程.隐藏层多的时 ...

  7. jquery对象与js对象

    对于已经是一个 DOM 对象,只需要用 $() 把DOM对象包装起来,就可以获得一个 jQuery 对象了,使用[index]和.get(index)可以转为DOM对象 jQuery 对象是通过 jQ ...

  8. 关于设置组件的state时遇到的一些问题

    在使用react-bootstrap的时候设置showModel的值来控制Model的显示与隐藏,但是setState这个函数是异步的. 当你进行数据更新的时候,接着执行函数获取这个模态框的dom是获 ...

  9. 创建外网 ext

    虽然外部网络是已经存在的网络,但我们还是需要在 Neutron 中定义外部网络的对象,这样 router 才知道如何将租户网络和外部网络连接起来. 上一节我们已经为创建外部网络配置了ML2,本节将通过 ...

  10. [LeetCode] Count and Say 字符串

    The count-and-say sequence is the sequence of integers beginning as follows:1, 11, 21, 1211, 111221, ...