文档章节

通过yeoman创建React-webpack项目

IT_小翼
 IT_小翼
发布于 2016/06/28 13:58
字数 483
阅读 1079
收藏 2
点赞 1
评论 0

说明

通过yo创建React项目, 并且学习React和Redux


环境要求

  1. 环境要求 node js环境 ,请安装最新node js 版本
  2. 打开cmd(win下)或者终端(mac & linux)执行npm -v 后可以看到显示版本号, 以后所有执行都是指在命令行或者终端下执行
  3. 安装Yeoman 、Bower、Grunt 、Gulp,Mac下可能需要sudo 安装,执行下面命令 npm install -g yo bower grunt-cli

Yeoman安装和使用详解


构建一个项目

  1. 执行 yo

  2. 选择 Install a generator

  3. 搜索关键字 react , 稍等片刻(根据网络环境)会出现一些列表, 选择安装 React Webpack

  4. 退出yo, 创建一个目录, mkdir reactTest, 进入 cd reactTest

  5. 执行yo, 选择React Webpack, 可以给project起名或者用默认的

  6. 选择css语言, 默认即可

  7. 是否打开 postcss , 根据需求选择 y or N

  8. 然后等待项目自动构建, 此时会从网络下载相关的依赖库, 网络环境会影响时间

  9. 当看到下面图案时就完成了, 如果错误可以删除node_modules文件夹, 然后执行 npm install 重新下载依赖


运行项目

  1. npm run start 即可运行项目
  2. 打开package.json, 可以看的scripts下的命令都可以运行, 功能如名称所示

ES6学习

在React和Redux的dome代码中会有涉及到ES6的语法, 可以在学习过程中一并学习


React学习

1.建议直接学习官方的教程

React官方
中文React

2.教程里面的例子最好都跟着手敲一边, 不要拷贝粘贴, 有些例子中文中无法跑通, 官方可以


Redux学习

1.建议直接学习官方的教程

Redux官方
Redux中文

2.教程里面的例子最好都跟着手敲一边, 不要拷贝粘贴, 有些例子中文中无法跑通, 官方可以

本文转载自:https://github.com/vkingw/learn-react

共有 人打赏支持
IT_小翼

IT_小翼

粉丝 41
博文 150
码字总数 36364
作品 0
西安
程序员
gulp常用插件大全

编译 gulp-sass - 通过 libsass将Sass编译成 CSS gulp-ruby-sass - 通过 Ruby Sass将Sass编译成CSS gulp-compass - 通过 Ruby Sass和CompassSass编译成CSS gulp-less - Less编译成 CSS. gul......

bug_killer ⋅ 2017/12/22 ⋅ 0

Yeoman-- 一个强大的前端构建工具

原文还是在简书上: Yeoman-- 一个强大的前端构建工具,我只是自己的搬运工!! 上期跟大家试了试Vue-cli这个构建工具,这个让我想起了很多其他的前端工具,其中一个就是Yeoman(上次就剧透了...

乖小鬼YQ ⋅ 2017/11/29 ⋅ 0

使用JavaScript构建工具和自动化系统

  JavaScript已经成为当今世界各地Web开发人员非常流行的工具。您可以构建大量项目,例如Web应用程序,移动应用程序等等。   然而,在开发过程中,一些任务是非常重要的,如缩小,单元测...

爱前端 ⋅ 2017/12/12 ⋅ 0

Vuejs自己的构建工具

最近, 尤大在和人对喷的时候,悄然放出了一个大招,于是为了追赶他的步伐,赶紧试验了下,并且把原文给大家翻译下。 原文地址:Announcing vue-cli 译文源地址: Vuejs自己的构建工具 先上原...

乖小鬼YQ ⋅ 2017/11/29 ⋅ 0

ReactJS webpack 报错 [WDS] Disconnected!

  在慕课网学习ReactJS时,由于老师的教程比较早,现有的yeoman的generator-react-webpack框架构建出来之后,发现框架已经移除了grunt,只用了webpack来进行打包,版本是Version: webpack ...

OriginLeon ⋅ 2016/12/15 ⋅ 0

WebStorm 11 发布,更好的 TypeScript 支持

WebStorm 11 正式版发布下载,此版本主要改进: 改进 TypeScript 支持 Flow 和 React 支持改进 初步支持 Angular 2 npm 脚本 Yeoman 集成 此外还支持 ECMAScript 2015,提供运行单个 Mocha ...

oschina ⋅ 2015/11/03 ⋅ 35

前端工程工具(Gulp、Browerify、Webpack、Bower、Yeoman)

Gulp(http://gulpjs.com/):一个NodeJS项目构建工具。 1.全局安装 或 或开发模式安装且加入到package.json中 2.常用gulp插件 gulp-react 可以将jsx文件转换为js文件 3.gulpfile.js 4.exampl...

jedi_knight ⋅ 2015/10/13 ⋅ 0

React+Webpack快速上手指南

前言 这篇文章不是有关React和Webpack的教程,只是一篇能够让你快速上手使用目前这两种热门技术的前端指南,并假设你对两者有一个基本的认识。如果你想先行了解下React,可以放肆的移步至 Re...

王春-海子 ⋅ 2016/08/20 ⋅ 0

译:使用 Webpack & Babel 搭建 React ES6 开发环境

网上对于 React 的相关教程层出不穷,官方文档也对其中的技术要点做出了充足的解释,只是不那么简洁易懂。但有了这篇译文,我们可以从最简单的组件开始,通过对 Babel、Webpack 的了解与实践...

韩亦乐 ⋅ 2017/08/08 ⋅ 0

react yeoman 第一次创建自己的app

最近因为比较闲的原因,所以就抽空研究了一下react,本来是直接把facebook的开源项目down下来的,但是发现需要配置好多环境,所以我们就暂且缓缓,之后我在网上找了很多实例,真的是找了好多...

i5--lou ⋅ 2016/03/24 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

使用 vue-cli 搭建项目

vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli 一、 安装 node.js 首先需要安装node环境,可以直接到中...

初学者的优化 ⋅ 18分钟前 ⋅ 0

设计模式 之 享元模式

设计模式 之 享元模式 定义 使用共享技术来有效地支持大量细粒度对象的复用 关键点:防止类多次创建,造成内存溢出; 使用享元模式来将内部状态与外部状态进行分离,在循环创建对象的环境下,...

GMarshal ⋅ 33分钟前 ⋅ 0

SpringBoot集成Druid的最简单的小示例

参考网页 https://blog.csdn.net/king_is_everyone/article/details/53098350 建立maven工程 Pom文件 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM......

karma123 ⋅ 今天 ⋅ 0

Java虚拟机基本结构的简单记忆

Java堆:一般是放置实例化的对象的地方,堆分新生代和老年代空间,不断未被回收的对象越老,被放入老年代空间。分配最大堆空间:-Xmx 分配初始堆空间:-Xms,分配新生代空间:-Xmn,新生代的大小一...

算法之名 ⋅ 今天 ⋅ 0

OSChina 周日乱弹 —— 这么好的姑娘都不要了啊

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @TigaPile :分享曾惜的单曲《讲真的》 《讲真的》- 曾惜 手机党少年们想听歌,请使劲儿戳(这里) @首席搬砖工程师 :怎样约女孩子出来吃饭,...

小小编辑 ⋅ 今天 ⋅ 8

Jenkins实践3 之脚本

#!/bin/sh# export PROJ_PATH=项目路径# export TOMCAT_PATH=tomcat路径killTomcat(){pid=`ps -ef | grep tomcat | grep java|awk '{print $2}'`echo "tom...

晨猫 ⋅ 今天 ⋅ 0

Spring Bean的生命周期

前言 Spring Bean 的生命周期在整个 Spring 中占有很重要的位置,掌握这些可以加深对 Spring 的理解。 首先看下生命周期图: 再谈生命周期之前有一点需要先明确: Spring 只帮我们管理单例模...

素雷 ⋅ 今天 ⋅ 0

zblog2.3版本的asp系统是否可以超越卢松松博客的流量[图]

最近访问zblog官网,发现zlbog-asp2.3版本已经进入测试阶段了,虽然正式版还没有发布,想必也不久了。那么作为aps纵横江湖十多年的今天,blog2.2版本应该已经成熟了,为什么还要发布这个2.3...

原创小博客 ⋅ 今天 ⋅ 0

聊聊spring cloud的HystrixCircuitBreakerConfiguration

序 本文主要研究一下spring cloud的HystrixCircuitBreakerConfiguration HystrixCircuitBreakerConfiguration spring-cloud-netflix-core-2.0.0.RELEASE-sources.jar!/org/springframework/......

go4it ⋅ 今天 ⋅ 0

二分查找

二分查找,也称折半查找、二分搜索,是一种在有序数组中查找某一特定元素的搜索算法。搜素过程从数组的中间元素开始,如果中间元素正好是要查找的元素,则搜素过程结束;如果某一特定元素大于...

人觉非常君 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部