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链接

c 复制代码

通过 npm 安装 dva-cli 并确保版本是 0.7.0
 或以上。
$ npm install dva-cli -g$ dva -v0.7.0

第四步：创建新应用学习链接

java 复制代码

安装完 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:点击跳转

第六步：启动项目：

java 复制代码

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

在浏览器中进行访问demo

java 复制代码

几秒钟后，你会看到以下输出：
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目录结构介绍：

java 复制代码

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

2、快速上手学习文档：

快速上手学习文档

3、12步学会react：

java 复制代码

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

4、React 技术栈

java 复制代码

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

5、h5app前端代码：

java 复制代码

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

6、react代码demo：

java 复制代码

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

7、redux文档：

java 复制代码

http://redux.js.org（中文文档）

8、学习es6：

java 复制代码

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