热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Dahlia:一个现代化的React框架

React是什么?按照官方的说法,React是一个用于构建用户界面的JavaScript库,所以它不是一个框架。在前端中,框架是什么?也许很难下定义,但很容易举例,Angular就是一个框架。Dahlia是什么?它是一个框架,是一个基于React开发的框架。你可以认为它是一个和Angular同级别的东西。

什么是前端框架

React 是什么?按照官方的说法,React 是一个用于构建用户界面的 Javascript 库,所以它不是一个框架。

在前端中,框架是什么?也许很难下定义,但很容易举例,Angular 就是一个框架。

Dahlia 是什么

Dahlia 是什么?它是一个框架,是一个基于 React 开发的框架。你可以认为它是一个和 Angular 同级别的东西。

Dahlia 是一个大而全的框架,包括了很多东西:

  • CLI 工具
  • 路由集成
  • 状态管理
  • Http Client
  • GraphQL Client
  • 表单
  • 弹窗
  • 国际化
  • ...

为什么创建 Dahlia

我为什么不用直接使用 Angular 或者 Vue,最重要的原因是:老了,记忆力衰退。记不住 ngFor,记不住 ngModal,记不住 v-on,接不住 v-show... 记不住众多的的框架 Api。

因为老了,所以 Dahlia 这个框架暂时也只支持 TypeScript,因为如果没有 TypeScript, dangerouslySetInnerHTML 这样的 Api 也会令我抓狂,因为 dangerouslySetInnerHTML 这个单词我可能要背好几周才能写出来。

React 以灵活著称,为什么还要搞一个框架呢?因为懒得折腾,如果我记忆力足够好,我应该会选择 Angular,可惜不够好,所以搞了一个大而全 Dahlia,希望能少折腾、多做事、早下班。

Dahlia 有什么特点

  • TypeScript 是一等公民,提供良好的开发体验
  • 基于 create-react-app ,不用关心 Webpack 配置,享受 React 社区最优秀的 setup、develop、build 工具
  • 渐进式 地开发模式,可以快速上手,也可以开发复杂应用

Dahlia 非常多地方借鉴了 Next.js,如果说和 Next.js 有什么不同,那可能是比 Next.js 更加框架化,使用 Dahlia 你会有更高开发效率和更好的开发体验,Dahlia 让你真正的专注于业务的开发,快速解决为各种需求,而不是在各种捣鼓和选择中迷失自我。

如何使用

安装 Dahlia CLI:

yarn global add dahlia-cli

初始化应用:

dh new myapp

它将在当前文件夹中创建一个名为 myapp 的目录,目录结构如下:

.
├── package.json
├── pages
│   └── index.tsx
└── tsconfig.json

启动开发服务器:

cd myapp
dh start

Dahlai 现在还在不断改善完善中,我们团队已在项目使用,欢迎 PR。

  • Github 地址: https://github.com/forsigner/...
  • 详细文档: https://dahlia.js.org

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 我们


推荐阅读
  • 在package.json中有如下两个对象:husky:{hooks:{pre-commit:lint-staged}},lint-staged:{src** ... [详细]
  • 本文介绍了使用AJAX的POST请求实现数据修改功能的方法。通过ajax-post技术,可以实现在输入某个id后,通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用,以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况,并解释了JavaScript等待服务器响应的机制。 ... [详细]
  • Webmin远程命令执行漏洞复现及防护方法
    本文介绍了Webmin远程命令执行漏洞CVE-2019-15107的漏洞详情和复现方法,同时提供了防护方法。漏洞存在于Webmin的找回密码页面中,攻击者无需权限即可注入命令并执行任意系统命令。文章还提供了相关参考链接和搭建靶场的步骤。此外,还指出了参考链接中的数据包不准确的问题,并解释了漏洞触发的条件。最后,给出了防护方法以避免受到该漏洞的攻击。 ... [详细]
  • 单页面应用 VS 多页面应用的区别和适用场景
    本文主要介绍了单页面应用(SPA)和多页面应用(MPA)的区别和适用场景。单页面应用只有一个主页面,所有内容都包含在主页面中,页面切换快但需要做相关的调优;多页面应用有多个独立的页面,每个页面都要加载相关资源,页面切换慢但适用于对SEO要求较高的应用。文章还提到了两者在资源加载、过渡动画、路由模式和数据传递方面的差异。 ... [详细]
  • 1、安装patch-packagepatch-package包可以通过npm进行安装。npmipatch-package--save-dev或者也可以通过yarn进行安装。yarn ... [详细]
  • Vue3 拥抱 TypeScript 的完整项目结构搭建
    大厂技术高级前端Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群一个完整的Vue3Ts项目,支持.vue和.tsx写法项目地 ... [详细]
  • NB:我看到我的草稿中已有将近两年的教程,所以我决定将其发布。在本教程中,我将构建一个简单的reactJs应用程序,该应用程 ... [详细]
  • 这是原文链接:sendingformdata许多情况下,我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单,但是 ... [详细]
  • 如何使用Java获取服务器硬件信息和磁盘负载率
    本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务,并获取服务器的磁盘信息,并将结果输出。然后在本地使用JS编写一个AJAX脚本,远程请求服务端的程序,得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ... [详细]
  • 本文记录了在vue cli 3.x中移除console的一些采坑经验,通过使用uglifyjs-webpack-plugin插件,在vue.config.js中进行相关配置,包括设置minimizer、UglifyJsPlugin和compress等参数,最终成功移除了console。同时,还包括了一些可能出现的报错情况和解决方法。 ... [详细]
  • 网址:https:vue.docschina.orgv2guideforms.html表单input绑定基础用法可以通过使用v-model指令,在 ... [详细]
  • uniapp开发H5解决跨域问题的两种代理方法
    本文介绍了uniapp开发H5解决跨域问题的两种代理方法,分别是在manifest.json文件和vue.config.js文件中设置代理。通过设置代理根域名和配置路径别名,可以实现H5页面的跨域访问。同时还介绍了如何开启内网穿透,让外网的人可以访问到本地调试的H5页面。 ... [详细]
  • 随着前端技术的发展,越来越多的开发者开始使用react、vue等web框架,但很少有人深入理解这些框架的源码。然而,这些框架底层都是由原生的javascript构建而成。对于初学前端的人来说,可能会认为javascript很容易上手,但实际上只是因为它被高度封装了。与能够使用封装类的人相比,能够理解框架原理的人则处于另一个层面。本文将深入剖析jquery源码,探寻框架底层的原理,帮助读者更好地理解web框架的运行机制。 ... [详细]
  • 前言折腾了一段时间hadoop的部署管理,写下此系列博客记录一下。为了避免各位做部署这种重复性的劳动,我已经把部署的步骤写成脚本,各位只需要按着本文把脚本执行完,整个环境基本就部署 ... [详细]
  • 如何在Vue项目中安装和使用VUX组件?
    vux2模板fork自webpack模板,基本和官方同步。1、默认为webpack2模板npminstallvue-cli-g如果还没安装vueinitairyla ... [详细]
author-avatar
左文欣936
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有