fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

提交网站

Remix
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:https://remix.run/
GitHub:https://github.com/remix-run/remix
网站描述:基于 React 和 Node 的全栈框架

Remix 是一个由 react Router 开发团队所开发的基于 React 和 Node 的全栈框架,以解决开发者在用 React 开发时面临的一些棘手问题,如今 Remix 关闭付费订阅模式,正式开源。

众所周知,在使用 React 开发单页面时,最常见的问题就是如果在 React 中使用客户端渲染(CSR,client-side rendering),就很难有好的 seo。这是因为在 CSR 之下,你在页面上看到的数据是由浏览器本身的 JavaScript 生成的,在这样的网站上同样也很难有动态的元数据。也正是因为这些原因,单页面通常被视为「非 SEO」友好的网站。

为了解决这些问题,不少开发者会选择另一个非常流行的 React 框架 —— Next.js。Next.js 也正是 Remix 在该领域的最大竞争对手。但由于此前 Next.js 开源而 Remix 需要付费使用,Remix 在两者的竞争中略处于下风。

Remix 作为一个框架,其特点包括:

  • 文件系统路由

  • 路由布局嵌套

  • 自动拆分代码

  • 数据驱动的元标签

  • 内置数据加载

  • 零配置构建

  • React Refresh

  • ……

代码示例:
export async function loader({ request }) {
return getProjects();
}

export async function action({ request }) {
const form = await request.formData();
return createProject({ title: form.get("title") });
}

export default function Projects() {
const projects = useLoaderData();
const { state } = useTransition();
const busy = state === "submitting";

return (
<div>
{projects.map((project) => (
<Link to={project.slug}>{project.title}</Link>
))}

<Form method="post">
<input name="title" />
<button type="submit" disabled={busy}>
{busy ? "Creating..." : "Create New Project"}
</button>
</Form>
</div>
);
}



链接: https://fly63.com/nav/3466

more>>
相关栏目
react
Facebook开发的一款高效、灵活、声明式设计的JS库
官网GitHub
AngularJS
Google推出有条理,可维护,易编程的MVVM框架
官网GitHub
backbone
提供:模型、集合、视图,开发重量级的javascript应用的框架
官网GitHub
jquery
一个快速、简洁的JavaScript代码库
官网GitHub
zepto.js
一个轻量级的针对现代高级浏览器的JavaScript库
官网GitHub
Ember
JavaScript MVC框架,它用来创建复杂的Web应用程序,消除了样板
官网GitHub
nw.js
轻量级桌面应用开发的捷径
官网GitHub
socket.io
一个WebSocket库,包括了客户端的js和服务器端的nodejs
官网GitHub
nuxt.js
基于 Vue.js 的轻量级、服务端渲染 (SSR) 应用框架
官网GitHub
Next.js
实现react的服务端渲染的框架
官网GitHub
Electron
基于Chromium 和 Node.js, 使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用
官网GitHub
htmx
无需JavaScript的动态HTML
官网GitHub
Nerv
一款由京东凹凸实验室打造的类React前端框架
官网GitHub
lodash
一致性、模块化、高性能的 JavaScript 实用工具库
官网GitHub
ocLazyLoad
AngularJS 的延迟加载(惰性加载)模块和组件
点击进入GitHub
weui.js
WeUI 的轻量级 js 封装
点击进入GitHub

手机预览