文档章节

通过yeoman创建React-webpack项目

IT_小翼
 IT_小翼
发布于 2016/06/28 13:58
字数 483
阅读 1174
收藏 2

说明

通过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_小翼

粉丝 42
博文 153
码字总数 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
0
写一个自己的 Yeoman Generator

https://leozdgao.me/write-yeoman-generator/ 由于自己经常会写一些 demo,或者学习新工具库的使用,然后又比较依赖 npm 的模块管理(这个是重点)和 webpack 的代码打包功能,所以每次都要...

leozdgao
2016/02/14
0
0
Yeoman-- 一个强大的前端构建工具

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

乖小鬼YQ
2017/11/29
0
0
Vuejs自己的构建工具

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

乖小鬼YQ
2017/11/29
0
0
使用JavaScript构建工具和自动化系统

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

爱前端
2017/12/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周三乱弹 —— 你是靠自己努力才失败的

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 小小编辑:推荐歌曲 《Raveena》- Raveena 《Raveena》- Raveena 手机党少年们想听歌,请使劲儿戳(这里) 11月18日,俞敏洪在某论坛演讲中称...

小小编辑
59分钟前
313
7
firewalld

1. firewalld 是什么 CentOS中默认是有 firewalld, iptables, etablesd firewalld 是 CentOS7/RadHat7 中默认的防火墙管理工具. firewalld 工具用来管理里netfilter, 不过底层还是调用的还是...

Fc丶
今天
4
0
Java 源代码和 C 源代码的运行区别

与其他程序的执行方式和编译方式不同。 Java 源代码需要进行编译成字节码后在 Java 虚拟机上运行,这样 Java 程序能够保持独立性和跨平台功特性。 请参考下图。 https://www.cwiki.us/pages...

honeymose
今天
6
0
Apache限定目录解析PHP,限制user_agent,PHP相关的配置

Apache限定目录解析PHP 配置前访问upload/index.php [root@test-a ~]# curl -x192.168.77.139:80 'www.test.com/upload/index.php'This is upload diretory 配置,/usr/local/apache2.4/......

野雪球
今天
6
0
java.util.Concurrent.Exchanger源码

类图 源码: package java.util.concurrent;import java.util.concurrent.atomic.AtomicInteger;import java.util.concurrent.atomic.AtomicReference;import java.util.concurrent......

狼王黄师傅
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部