react小白学习快速上手

第一步:安装node.js 下载链接https://nodejs.org/en/
如何查看是否安装成功:黑窗口(命令行)中输入:node -v 

图片.png

第二步:安装tnpm这个是国外的网站下载jar比较快:
在黑窗口(命令行)中输入:npm install tnpm -g --registry=http://registry.npm.alibaba-inc.com
第三步:安装 dva-cli链接
通过 npm 安装 dva-cli 并确保版本是 0.7.0
 或以上。
$ npm install dva-cli -g$ dva -v0.7.0
第四步:创建新应用学习链接
安装完 dva-cli 之后,就可以在命令行里访问到 dva
 命令([不能访问?](http://stackoverflow.com/questions/15054388/global-node-modules-not-installing-correctly-command-not-found))。现在,你可以通过 dva new
 创建新应用。
$ dva new dva-quickstart

这会创建 dva-quickstart
 目录,包含项目初始化目录和文件,并提供开发服务器、构建脚本、数据 mock 服务、代理服务器等功能。
第五步:如果拉的是别人的demo小例子:项目的.git或者.svn这级目录
在黑窗口(命令行)中输入:tnpm install --verbose   //拉下来代码后要执行tnpm install 下载js的依赖包。verbose是为了查看下载包的进度
react代码demo:https://github.com/zuiidea/antd-admin
第六步:启动项目:
然后我们 在黑窗口(命令行)中输入:cd
进入 dva-quickstart
目录,并启动开发服务器:
$ cd dva-quickstart
$ npm start

图片.png

第五步:在浏览器中进行访问demo
几秒钟后,你会看到以下输出:
Compiled successfully!The app is running at: http://localhost:8000/Note that the development build is not optimized.To create a production build, use npm run build.

在浏览器里打开 [http://localhost:8000](http://localhost:8000/) ,你会看到 dva 的欢迎界面。
第六步:学习文档:
1、react目录结构介绍:

https://github.com/dvajs/dva-docs/blob/master/v1/zh-cn/tutorial/01-%E6%A6%82%E8%A6%81.md/

2、快速上手学习文档:http://ant-tool.github.io/dora.html
3、12步学会react:

https://github.com/sorrycc/blog/issues/18 https://www.npmjs.com/package/roadhog

4、React 技术栈

https://github.com/ruanyf/jstraining/blob/master/docs/react.md

5、h5app前端代码:

http://gitlab.alibaba-inc.com/aliyun/sales-console-frontend-mobile

6、react代码demo:

https://github.com/zuiidea/antd-admin

7、redux文档:

http://redux.js.org(中文文档)

8、学习es6:

http://es6.ruanyifeng.com/#docs/array

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏布尔

js用于树型结构级联选择 支持三态级联选择

<html> <head> <meta http-equiv="Content-Type" content="text/html; chars...

2029
来自专栏地方网络工作室的专栏

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十)打包项目并发布到子目录

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十)打包项目并发布到子目录 前情回顾 通过上一章《Vue2+VueRou...

1958
来自专栏blackheart的专栏

0.[Andriod]之从零安装配置Android Studio并编写第一个Android App

0. 所需的安装文件 笔者做了几年WP,近来对Android有点兴趣,尝试一下Android开发,废话不多说,直接进入主题,先安装开发环境,笔者的系统环境为wi...

22410
来自专栏王磊的博客

npm上传自己的项目

npm安装就不介绍了,自行度娘。本文介绍npm上传 先初始化:npm init  根据提示填完系统介绍信息(package.json); 再登录npmjs: n...

2796
来自专栏大内老A

如何实现IIS 7.0对非HTTP协议的支持

在《再谈IIS与ASP.NET管道》介绍各种版本的IIS的设计时,我们谈到IIS 7.0因引入WAS提供了对非HTTP协议的支持。这个对于WCF的服务寄宿来说意...

22610
来自专栏www.96php.cn

[ecshop模板]ecshop会员中心点击查询包裹报错修改方法

会员中心中点击跟踪包裹,显示链接错误。您是否遇到过这个问题呢,修改方法其实很简单,操作如下: ? 修改themes/68ecshop_XXX/user_tran...

2914
来自专栏Java架构师历程

mac执行git命令出现xcrun: error: invalid active developer path解决方法

xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools...

782
来自专栏龙渊阁测试精英

Jmeter(二十三)_插件扩展

安装插件的方法有两种,一种是传统的方式,即官网下载,本地配置,重启jmeter。现在有一种快捷的方法可以自定义安装插件-插件管理器

1533
来自专栏Albert陈凯

mac执行git命令出现xcrun: error: invalid active developer path解决方法

运行git clone的时候报错 xcrun: error: invalid active developer path (/Library/Developer...

2807
来自专栏小二的折腾日记

Sublime Text3使用总结

保存为Sublime Text3\Packages\User\addCurrentTime.py

522

扫码关注云+社区