文档章节

通过yeoman创建React-webpack项目

IT_小翼
 IT_小翼
发布于 2016/06/28 13:58
字数 483
阅读 1189
收藏 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
西安
程序员
私信 提问
写一个自己的 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
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
使用JavaScript构建工具和自动化系统

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

爱前端
2017/12/12
0
0
ReactJS webpack 报错 [WDS] Disconnected!

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

OriginLeon
2016/12/15
289
0

没有更多内容

加载失败,请刷新页面

加载更多

composer安装

前言:随着开源的东西越来越多,一些好的代码我们是可以直接拿过来用的,github更是加快了这一节奏,在github上我们可以看到一些开源的项目、代码块、函数库、类结构等,我们可以直接Fork,然...

echojson
28分钟前
2
0
Longest Palindrome(leetcode409)

Given a string which consists of lowercase or uppercase letters, find the length of the longest palindromes that can be built with those letters. This is case sensitive, for exa......

woshixin
46分钟前
0
0
mysql grant 用户权限总结

用户权限管理主要有以下作用: 1. 可以限制用户访问哪些库、哪些表 2. 可以限制用户对哪些表执行SELECT、CREATE、DELETE、DELETE、ALTER等操作 3. 可以限制用户登录的IP或域名 4. 可以限制用...

Airship
今天
1
0
RabbitMQ学习(3)

1. 消费端 1. 消费端通过推模式或者拉模式从RabbitMQ中获取并消费消息,当消费者确认处理消息后,可以手动确认消息已被接收,然后就会将该消息从RabbitMQ的队列中标记再清除,消费者端还可以...

江左煤郎
今天
1
0
linux mysql(5.7)开启慢查询

一、有3个配置需要设置, 1:相关开关 2:日志目录文件 3:慢查询的时间限制 二、设置完之后重启mysql service mariadb restart 三、重启后做个测试 连接mysql 并查询: select sleep(6); 四...

chro008
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部