node/webpack/react
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的更多相关文章
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- webpack+react+es6开发模式
一.前言 实习了两个月,把在公司用到的前端开发模式做个简单的整理.公司里前端开发模式webpack+react+redux+es6,这里去掉了redux. webpack, react, redux等 ...
- webpack+react+redux+es6
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- 手把手教你如何使用webpack+react
上一篇随笔讲述了新手入门入门前端 里面提到的第四阶段跟上当前前端的发展需要入门一个框架和自动化工具,当时推荐的是webpack+react 今天正好有空,也把自己入门webpack + react 的 ...
- Node.js + React + MongoDB 实现 TodoList 单页应用
之前用 Ant Design 开发了一个项目,因此对 React 的特性有了一定的了解,React 使用封装组件的思想,组件各自维护自己的状态和 UI, 组件之间通过 props 传递数据和方法.当状 ...
- Webpack+React项目入门——入门及配置Webpack
一.入门Webpack 参考文章:<入门Webpack,看这篇就够了> 耐心看完这篇非常有帮助 二.React+Webpack环境配置 参考文章:<webpack+react项目初体 ...
- Webpack+React+ES6 最新环境搭建和配置(2017年)
刚刚学习React,发现React在ES6下的语法才是本体,结合ES6新的语言特性,使组件化开发显得更加直观.而且现在的Angular2也开始使用支持强类型的TypeScript,转译(transpi ...
- 最小白的webpack+react环境搭建
本文也同步发表在我的公众号“我的天空” 从零开始,用最少的配置.最少的代码.最少的依赖来搭建一个最简单的webpack+react环境. 最近在玩webpack+react+移动端,那么第一步自然是搭 ...
- 搭建 webpack + react 框架爬坑之路
由于工程实践需要搭一个 webpack + react 框架,本人刚开始学,就照b站上的react黑马视频做,爬过无数个坑...希望读者能引以为戒.我的是macos系统 https://www.bil ...
随机推荐
- 隐匿攻击-ICMP
ICMP隐蔽隧道从入门到精通 概述 众所周知传统socket隧道已极少,tcp.upd大量被防御系统拦截,dns.icmp.http/https等难于禁止的协议(当然还有各种xx over dns/i ...
- Python+Selenium练习篇之10-刷新当前页面
本文介绍如何调用webdriver中刷新页面的方法. 相关脚本代码如下: # coding=utf-8import timefrom selenium import webdriver driver ...
- Python+Selenium练习篇之8-利用css定位元素
前面介绍了,XPath, id , class , link text, partial link text, tag name, name 七大元素定位方法,本文介绍webdriver支持的最后一个 ...
- backpropagation算法示例
backpropagation算法示例 下面举个例子,假设在某个mini-batch的有样本X和标签Y,其中\(X\in R^{m\times 2}, Y\in R^{m\times 1}\),现在有 ...
- [oldboy-django][4python面试]面试前需要熟练掌握的知识点(待更新)
python基础 - 生成器 - 装饰器 - 迭代器 - 列表生成式 - 引用,传参 - 面向对象,继承 前端Html: - 词法分析 - 作用域 - 语法分析 - this - Jsonp mysq ...
- nyoj 题目20 吝啬的国度
吝啬的国度 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 在一个吝啬的国度里有N个城市,这N个城市间只有N-1条路把这个N个城市连接起来.现在,Tom在第S号城市, ...
- [HNOI2007][bzoj1187] 神奇游乐园 [插头dp]
题面: 传送门 给定一个四联通棋盘图,每个格子有权值,求一条总权值最大的回路 思路: 插头dp基础教程 棋盘? 回路? n,m<=10? 当然是插头dp啦~\(≧▽≦)/~ 然后发现这道题并不是 ...
- 卷积神经网络用语句子分类---Convolutional Neural Networks for Sentence Classification 学习笔记
读了一篇文章,用到卷积神经网络的方法来进行文本分类,故写下一点自己的学习笔记: 本文在事先进行单词向量的学习的基础上,利用卷积神经网络(CNN)进行句子分类,然后通过微调学习任务特定的向量,提高性能. ...
- 开启dns服务时,/etc/init.d/named start 卡住了的解决办法。
在命令行输入 rndc-confgen -r /dev/urandom -a 再次开启服务 /etc/init.d/named start ok
- 【13】vuex2.0 之 state
Vuex 的核心是 store, 它是一个通过 Vuex.Store 构造函数生成的对象.为什么它会是核心呢?因为我们调用这个构造函数创建store 对象的时候,给它传递参数中包装了state, mu ...