当前位置: 首页 > web >正文

react小白学习快速上手

在这里插入图片描述

文章目录

        • 第一步:安装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 技术栈
            • 5、h5app前端代码:
            • 6、react代码demo:
            • 7、redux文档:
            • 8、学习es6:


第一步:安装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:

react代码demo:点击跳转

第六步:启动项目:
然后我们 在黑窗口(命令行)中输入: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、快速上手学习文档:

快速上手学习文档

3、12步学会react:
>https://github.com/sorrycc/blog/issues/18https://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
http://www.xdnf.cn/news/14493.html

相关文章:

  • Appium+python自动化(二十四) - 元素等待
  • 在虚拟机 银河麒麟|ubuntu 中安装和配置NVIDIA显卡驱动
  • 设计模式精讲 Day 2:工厂方法模式(Factory Method Pattern)
  • 多模态学习路线(3)——MLLMs主流大模型
  • 基于统计检验与机器学习模型对牛油果数据的分析与预测
  • Python 文件操作详解
  • 算法题(170):地毯填补问题
  • Proteus8.17-安装说明
  • 揭开MongoDB的神秘面纱:从陌生到初识
  • 【Elasticsearch】文档(一):新增 删除
  • vue中的h渲染函数
  • Java项目中使用到的技术——《异步调用》
  • java+vue+SpringBoo摄影师分享交流社区(程序+数据库+报告+部署教程+答辩指导)
  • 大模型笔记6:微调
  • Go多个协程实现顺序打印
  • 华为OD机试_2025 B卷_运维日志排序(Python,100分)(附详细解题思路)
  • sudo apt-get install openssh-serve安装失败解决
  • 自定义Spring Boot Starter开发指南
  • JS当中怎么定义一个类
  • 【Quest开发】初始项目环境配置
  • Hive集成Paimon
  • 华为云国际版有区块链吗
  • Windows 系统中扩大 WSL2 的内存限制
  • YSYX学习记录(九)
  • 2026 AAAI 投稿要求
  • vscode-monitor-pro | 提升开发效率的利器
  • 【递归】两两交换链表中的节点(medium)
  • Oracle03-PL/SQL Developer
  • 深入解析Jersey框架及其与Spring MVC的核心差异
  • linux多线程之互斥锁