react小白学习快速上手

文章目录

• • • • [第一步：安装node.js 下载链接https://nodejs.org/en/](#第一步：安装node.js 下载链接https://nodejs.org/en/)
      • 第二步：安装tnpm这个是国外的网站下载jar比较快：
      • 第三步：安装 dva-cli[链接](https://ant.design/docs/react/practical-projects-cn#安装-dva-cli))
      • 第四步：创建新应用[学习链接](https://ant.design/docs/react/practical-projects-cn#创建新应用))
      • 第五步：如果拉的是别人的demo小例子：项目的.git或者.svn这级目录
      • • react代码demo：
      • 第六步：启动项目：
      • • 在浏览器中进行访问demo
        • 第七步：学习文档：
        • • 1、react目录结构介绍：
          • 2、快速上手学习文档：
          • 3、12步学会react：
          • [4、React 技术栈](#4、React 技术栈)
          • 5、h5app前端代码：
          • 6、react代码demo：
          • 7、redux文档：
          • 8、学习es6：

---

第一步：安装node.js 下载链接https://nodejs.org/en/

如何查看是否安装成功：黑窗口（命令行）中输入：node -v 

第二步：安装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：

react代码demo:点击跳转

第六步：启动项目：

然后我们 在黑窗口（命令行）中输入：cd
进入 dva-quickstart
目录，并启动开发服务器:
$ cd dva-quickstart
$ npm start

在浏览器中进行访问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、快速上手学习文档：

快速上手学习文档

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