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

136次阅读

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

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

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

什么是 Remix

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

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

批改后记得更新下数据库,执行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

正文完
 0