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

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

相关文章:

  • Django中间件讲解
  • Python小酷库系列:Python中的JSON工具库(2)
  • CQF预备知识:Python相关库 -- 准蒙特卡洛方法 scipy.stats
  • MySQL常用函数详解之数值函数
  • 【FastAPI高级实战】结合查询参数与SQLModel Joins实现高效多表查询(分页、过滤、计数)
  • 用AI配合MCP快速生成n8n工作流
  • 本地访问远程vps中的sqlite数据库中的内容之(二)使用Python和web访问远程sqlite
  • Go语言2个协程交替打印
  • 使用Netlify进行简单部署
  • Git+Jenkins-Docker搭建企业级CI/CD平台
  • 基于OpenManus的跨平台部署方案及远程访问安全机制
  • CSS 第四天 复合选择器、CSS特性、背景属性、显示模式
  • P6 QT项目----汽车仪表盘(6.2)
  • 原型模式Prototype Pattern
  • 第二十九场 蓝桥算法赛
  • 华为OD机试_2025 B卷_运维日志排序(Python,100分)(附详细解题思路)
  • 136. 只出现一次的数字
  • CSP 2024 入门级第一轮(88.5)
  • NodeJS中老生代和新生代和垃圾回收机制
  • Luckfox Pico Pi RV1106学习<3>:支持IMX415摄像头
  • 上海网站建设定/软文模板app
  • 学校网站建设的流程/2023年10月疫情还会严重吗
  • 百度给做网站收费多少/成人教育培训机构
  • 芜湖县住房建设局网站/最有吸引力的营销模式
  • 什么网站做简历免费下载/上海今天刚刚发生的新闻
  • 永济市网站建设/html网页制作软件有哪些