关于react.js:Remix是个啥混音不是一个很新的全栈式前端框架上

2次阅读

共计 4047 个字符，预计需要花费 11 分钟才能阅读完成。

想不到吧，我还会前端框架，还是类比 next.js 的框架。这个也算机缘巧合，为了晋升工作效率，保护了一个共事基于 remix 开发的小工具。感觉还挺好玩的，就想着联合官网文档写个初入门文章 ( 重点是共事交接给我后，不给我文档，只能去看官网文档)。

重点还是和之前的 mermaid 一样，次要跟大家讲下有这个货色，如果讲得不正确以官网为主。

Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff.

老套路，一句话总结，就是全栈式的前台框架，而后再提前剧透下，因为在援用里是没有写的，remix 还应用了 Prisma，一个号称下一代 Node.js 和 TypeScript 的 ORM 数据库。

官网举荐的环境前提：

Node.js version (^14.17.0, or >=16.0.0)
npm 7 or greater
A code editor (VSCode is a nice one)

好，先疾速搭建一个 helloworld 工程

npx create-remix@latest --template remix-run/indie-stack blog-tutorial

之后按需抉择，比方工程的目录名需不需要自定义，整体语言应用 js 还是 ts，最初一步需不需要帮你运行npm install。最初这个我选的是否，因为我想用 pnpm。

最初在运行前记得吧工程目录下.env.example 文件改名为.env，否则会始终报短少环境变量的错，就算应用npx prisma migrate deploy 也不行。最初关上localhost:3000，呈现一下界面即为胜利

首先批改下主界面

<div className="mx-auto mt-16 max-w-7xl text-center">
  <Link
    to="/posts"
    className="text-xl text-blue-600 underline"
  >
    Blog Posts
  </Link>
</div>

回到界面点击必定是 404 的，因为都还没有 posts 的路由，所以接下来就是去创立路由，在 app/routes 下创立一个 posts 的文件夹。留神，这里的目录名和下面代码的名字要一样，换句话说，是依据目录名去渲染路由的。

在 posts 文件夹上面再创立一个index.tsx 的文件

export default function Posts() {
  return (
    <main>
      <h1>Posts</h1>
    </main>
  );
}

回去界面从新点击下链接

上一步就是简略入门了，接下来讲下怎么加载用户数据，提前剧透下，加载数据用到的是 useLoaderData 这个 hook.

这个 hook 是在加载路由的就会渲染数据，当初给前一步的主界面增加静态数据

import {json} from "@remix-run/node";
import {Link, useLoaderData} from "@remix-run/react";

export const loader = async () => {
  return json({
    posts: [
      {
        slug: "my-first-post",
        title: "My First Post",
      },
      {
        slug: "90s-mixtape",
        title: "A Mixtape I Made Just For You",
      },
    ],
  });
};

export default function Posts() {
  // 通过 useLoaderData 这个 hook 渲染静态数据，拿到静态数据
  const {posts} = useLoaderData<typeof loader>();
  console.log(posts);
  return (
    <main>
      <ul>
        {posts.map((post) => (<li key={post.slug}>
            <Link
              to={post.slug}
              className="text-blue-600 underline"
            >
              {post.title}
            </Link>
          </li>
        ))}
      </ul>
    </main>
  );
}

原理在下面正文中也说过了，当初再次点击 posts 界面的链接，看下是否有两个超链接

一般来说读数据和写数据都是后盾的工作，前台只是调用接口或者调用办法去获取数据。还记得吗，后面介绍 remix 的时候就说过是这个全栈式框架，所以解析来吧博客数据放到后盾中。

在下图目录下创立一样的文件

内容如下：

type Post = {
  slug: string;
  title: string;
};

export async function getPosts(): Promise<Array<Post>> {
  return [
    {
      slug: "my-first-post",
      title: "My First Post",
    },
    {
      slug: "90s-mixtape",
      title: "A Mixtape I Made Just For You",
    },
  ];
}

再来革新下posts 路由的 index 主界面，这样就可能从 remix 的后盾中取数据了。

后面同样提到过，remix 集成了 prisma，也就是说能够从数据库获取数据，首先得在数据库中新增一个表，批改以下文件

model Post {
  slug     String @id
  title    String
  markdown String

  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

批改后记得更新下数据库，执行npx prisma db push。

接下来和静态数据差不多，咱们 先预置表数据 ，这一步须要批改的是 seed.ts，seed 是收获的意思，就是种下咱们预置的数据。留神下官网给的数据结构，是有 文章题目和文章内容 的。

const posts = [
  {
    slug: "my-first-post",
    title: "My First Post",
    markdown: `
# This is my first post

Isn't it great?
    `.trim(),},
  {
    slug: "90s-mixtape",
    title: "A Mixtape I Made Just For You",
    markdown: `
# 90s Mixtape

- I wish (Skee-Lo)
- This Is How We Do It (Montell Jordan)
- Everlong (Foo Fighters)
- Ms. Jackson (Outkast)
- Interstate Love Song (Stone Temple Pilots)
- Killing Me Softly With His Song (Fugees, Ms. Lauryn Hill)
- Just a Friend (Biz Markie)
- The Man Who Sold The World (Nirvana)
- Semi-Charmed Life (Third Eye Blind)
- ...Baby One More Time (Britney Spears)
- Better Man (Pearl Jam)
- It's All Coming Back to Me Now (Céline Dion)
- This Kiss (Faith Hill)
- Fly Away (Lenny Kravits)
- Scar Tissue (Red Hot Chili Peppers)
- Santa Monica (Everclear)
- C'mon N' Ride it (Quad City DJ's)
    `.trim(),},
];

for (const post of posts) {
  await prisma.post.upsert({where: { slug: post.slug},
    update: post,
    create: post,
  });
}

写完种子后记得运行命令行进行收获，npx prisma db seed。还记得后面加载静态数据的时候，后盾是怎么拜访数据的吗，是写定了的，当初咱们减少数据库之后，让后盾从数据库中读取数据。这里插一句题外话，这篇文章不是讲的 prisma，所以 prisma 的相干语法须要各位小伙伴本人钻研，或者后续也会出一篇文章。（斜眼笑）

批改内容如下

export async function getPosts(): Promise<Array<Post>> {return await prisma.post.findMany();
}

回去看 posts 路由，如果失常那就阐明没啥问题，同一张图我就不反复贴了。

如果好奇心比拟大的同学，在 posts 界面点击文章的时候就会发现 404 了，那是很失常的，因为咱们没有对应的路由嘛。而对于博客来说，个别路由都是间接跟博客名相干的，remix 同样提供了动静路由的性能。

创立一个动静路由的文件，touch app/routes/posts/&dollar;slug.tsx，而后批改文件内容

export default function PostSlug() {
  return (
    <main className="mx-auto max-w-4xl">
      <h1 className="my-6 border-b-2 text-center text-3xl">
        Some Post
      </h1>
    </main>
  );
}

失常状况下点击路由应该就能看到Some Post 界面，然而写到这里的时候发现不行，不能展现，始终都是 404。搜了一波发现是remix 出了 v2 的版本，感兴趣的同学能够本人钻研钻研，v2 其中一个就是扁平化了路由。

本文只是介绍 remix，就 基于 v1 的个性 来讲就好了

此时点击链接应该就能看到正确的界面了。因为篇幅无限，下篇更精彩。

Blog Tutorial (short) | Remix

正文完

react.js

发表至： react.js

2023-04-07

0

关于react.js:createreactapp脚手架新建项目后启动项目浏览器报错问题解决

关于react.js:React-Conf-2021

关于react.js:面试官react中的setState是同步的还是异步的

关于SegmentFault:该学vue还是react

关于python:新版Python-分布式爬虫与-JS-逆向进阶实战吾爱分xiang

关于react.js:Remix是个啥混音不是一个很新的全栈式前端框架上

什么是 Remix

创立第一个路由

加载数据

静态数据

减少后盾

数据库

动静路由

参考文献

站内搜索