使用create-react-app或者antd创建一个React项目

2024-04-22 17:51:28

转载请注明出处：王亟亟的大牛之路

距离上一次提及React的内容差不多也快1年多了，然后这一年里平胸而论觉得进步不多，然后最近因为业务需要然后都在做一些前端的工作。
然后以前都是从npm init一路自己撸到配置package.json到写scripts那些，现在脚手架一行撸穿，还是感叹懒人的世界6666

老规矩开篇前先案例：https://github.com/ddwhan0123/Useful-Open-Source-Android （一篇前端文章贴安卓东西合适吗？哈哈哈哈）

废话不多说介绍下用得比较顺手的脚手架一个是FaceBook的create-react-app

一个是阿里的Ant Design of React

安装 create-react-app

先装脚手架

npm install -g create-react-app

然后运行

create-react-app 你的项目名

然后噼里啪啦就ok了
cd 进去

npm run start

他会创建一个很纯粹的React项目
引用到的就是

 "dependencies": {"react": "^16.2.0","react-dom": "^16.2.0","react-scripts": "1.1.1"}

没有其他依赖，所以如果要自己加一些库（UI组件什么的）就自己弄了

安装 antd

先装脚手架

npm install antd-init -g

然后cd到你要建项目到目录

antd-init

然后跑项目

npm start

antd脚手架的依赖也就是多了一个自己的套餐antd

 "dependencies": {"antd": "^3.0.0","moment": "^2.19.3","react": "^16.2.0","react-dom": "^16.2.0"}

升级版本

基于dva的脚手架

首先是安装脚手架

npm install dva-cli -g

然后创建项目

dva new dvatest

运行项目

npm start

效果如图

创建出来的就是一个有项目目录，有“路霸“，有打包脚本的“高完成度“项目了

简化了你的“立项成本“，简单好用！

但是说实话roadhog的封装解释的东西相对浅显，爬坑。。。爬坑。。。。

使用create-react-app或者antd创建一个React项目相关推荐

vue react angular 分别如何创建一个新项目
前提,这三个框架都需要依赖node.js 环境,并且node.js 包含npm环境 Vue: (vue-cli 3之前的版本) 1. 全局安装vue-cli 和 webpack npm install ...
react项目_保证一看就会 | 手把手教你创建一个React项目
一.如何使用 git 在 GitHub 上创建一个项目新建一个项目首先,在github上注册自己的账号,然后登录后,可以看到如下界面,是你的主页.点击右边的➕号,选择第一个选项填写项目信息此时 ...
初学者用pycharm创建一个django项目和一个app时需要注意的事项
目录如何新建一个djiango项目: 如何创建一个app: 如何启动一个django项目: 新建一个django项目,需要注意以下几项配置: 如何新建一个djiango项目: 1.在pycharm中 ...
如何创建一个 react 项目及如何运行？
如何创建一个 react 项目及如何运行? 一.安装 create-react-app 二.检测 create-react-app 是否安装成功三.创建 react 项目四.运行 react 项目 ...
HM-3220: Create a Hexahedral Mesh（创建一个六面体网格）
HM-3220: Create a Hexahedral Mesh(创建一个六面体网格) Solids are geometric entities that define a three-dimen ...
如何创建一个React项目（超简单）
1.安装Node.js(官网Node.js下载) 2.运行node -v和npm -v两条命令(检验是否下载成功Node.js) 3.npm install -g cnpm --registry=ht ...
从零开始创建一个vue项目 1
从零开始创建一个vue项目创建空文件夹,存放相关目录,cmd进入命令行 vue init webpack token 创建项目(除eslint,其它都yes) 打包配置config下面的index. ...
树莓派Android Things物联网开发：创建一个Things项目
[转载请注明出处:http://blog.csdn.net/leytton/article/details/77854144] <树莓派Android Things物联网开发>系列文章专栏 ...
创建一个vue-cli项目到运行的完整流程
创建一个新的vue项目进行开发的完整流程安装vue 安装vue-cli 创建一个项目修改babel.config.js 预处理器安装 Sass 安装Less 安装stylus 在项目中.vue文 ...

最新文章

热门文章