自己实现一个自定义React项目脚手架「ReactCli」

简介: 自己实现一个自定义React项目脚手架「ReactCli」

前言


首先为什么想到自己实现一个React脚手架呢?是因为之前刚接触create-react-app时,觉得不太灵活。虽然文件目录很清晰,但是还是觉得不如VueCLI的可以自定义配置更加灵活。当然React官方提供了可以暴露配置的命令npm run eject,说再多不如自己实现一个。


脚手架一览


微信截图_20220505183154.png


文档


Project operation


Install


npm install


Start


npm run dev


Build


npm run build


Document implication


build


Webpack configuration item.


mock


Analog data.


public


Template file.


.babelrc


Babel configuration.


.gitignore


There is no need to add NPM packages.


postcss.config.js


Postcss configuration file.


src


Project home folder.


SRC folder main file


assets


Static folder.


component


Place to store components.


request


HTTP request configuration.


router


Routing configuration.


store


State management.


utils


Tool library.


view


Where the page is stored.


App.jsx


Project template.


index.js


Project entry document.


源码地址


https://github.com/maomincoding/ReactCli


结语


可以根据自己的需求自己再进行二次加工。欢迎Star!



相关文章
|
3月前
|
人工智能 自然语言处理 前端开发
SpringBoot + 通义千问 + 自定义React组件:支持EventStream数据解析的技术实践
【10月更文挑战第7天】在现代Web开发中,集成多种技术栈以实现复杂的功能需求已成为常态。本文将详细介绍如何使用SpringBoot作为后端框架,结合阿里巴巴的通义千问(一个强大的自然语言处理服务),并通过自定义React组件来支持服务器发送事件(SSE, Server-Sent Events)的EventStream数据解析。这一组合不仅能够实现高效的实时通信,还能利用AI技术提升用户体验。
303 2
|
4月前
|
前端开发
React | 修改React脚手架的默认端口号?
React | 修改React脚手架的默认端口号?
167 64
|
3月前
|
XML 前端开发 JavaScript
react学习笔记一:入门级小白到脚手架(create-react-app)开发项目
这篇文章是React的学习笔记,覆盖了从React的基础用法到高级特性,包括组件化、状态管理、生命周期、虚拟DOM等主题,适合React初学者参考。
128 0
react学习笔记一:入门级小白到脚手架(create-react-app)开发项目
|
2月前
|
前端开发 JavaScript
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
|
4月前
|
前端开发
React给antd中TreeSelect组件左侧加自定义图标icon
本文介绍了如何在React中为Ant Design的TreeSelect组件的每个树节点添加自定义图标,并解决了因缺少key属性而导致的警告问题,展示了如何通过递归函数处理treeData数据并为每个节点添加图标。
237 2
React给antd中TreeSelect组件左侧加自定义图标icon
|
4月前
|
前端开发 NoSQL MongoDB
React技术栈-基于react脚手架编写评论管理案例
这篇文章介绍了在MongoDB中使用sort和投影来对查询结果进行排序和限制返回的字段,通过具体的命令示例展示了如何实现这些操作。
66 6
React技术栈-基于react脚手架编写评论管理案例
|
4月前
|
前端开发 Python
React技术栈-React路由插件之自定义组件标签
关于React技术栈中React路由插件自定义组件标签的教程。
80 4
React技术栈-React路由插件之自定义组件标签
|
3月前
|
前端开发 JavaScript API
自定义React Hooks综合指南
本文介绍了React Hooks及其在组件开发中的作用,重点讲解了自定义Hook的创建和使用方法。通过实例展示了如何创建`useWindowWidth`、`useFetch`和`useForm`等自定义Hook,并分享了使用自定义Hook的最佳实践。文章强调了自定义Hook在提高代码复用性和组件可维护性方面的重要性。
99 0
|
4月前
|
前端开发 JavaScript
React技术栈-react的脚手架创建应用案例
本文介绍了如何使用React的官方脚手架工具create-react-app快速创建React项目,并展示了项目的目录结构和基本的代码文件,以及如何启动和运行React应用。
47 2
|
5月前
|
前端开发 JavaScript 中间件
React脚手架create-react-app简介
【8月更文挑战第13天】React脚手架create-react-app简介
307 4