⚡️Blitz.js - React on Rails

여러분, 블리츠.js 아세요?
⚡️Blitz.js-rils Instar에서 제작한 전체 스택 React 프레임워크!
React 엔지니어가 WEB 사이트를 구축하기 전에 여러 가지 생각과 도입 도구가 있습니다!
'사용하기 쉬운 Form 라이브러리가 무엇인지','ORM이 무엇인지','디렉터리 구성이 무엇인지','linter 설정'등을 결정해야 합니다!
큰일났다!🤮
Rails와 Laravel이라는 강력한 프레임 덕분에 당장 본질적인 작업에 들어가고 싶은 당신!
⚡️Blitz.js 아세요?
https://github.com/blitz-js/blitz

Introduction

어쨌든 웹 사이트를 만들어라!blitz CLI의 글로벌 설치

$ yarn global add blitz # npm i -g blitz

$ blitz new myAppName

React Final Form 또는 React Hook Form 어떤 것을 사용하느냐고 물었습니다.좋아하는 사람 말씀하세요.
선택하면 항목이generate됩니다.

일단generate에 의해

Your new Blitz app is ready! Next steps:

   1. cd myApp
   2. blitz db migrate (when asked, you can name the migration anything)
   3. blitz start

$ cd myAppName
$ blitz db migrate

blitz db migrate시 마이그레이션을 수행합니다.

다음 파일을 생성합니다.

자세한 설명은 지연되지만 사용자 테이블이 생성됩니다.

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

datasource db {
  provider = ["sqlite", "postgres"]
  url = "***"
}

generator client {
  provider = "prisma-client-js"
}

// --------------------------------------

model User {
  id             Int       @default(autoincrement()) @id
  createdAt      DateTime  @default(now())
  updatedAt      DateTime  @updatedAt
  name           String?
  email          String    @unique
  hashedPassword String?
  role           String    @default("user")
  sessions       Session[]
}

model Session {
  id                 Int       @default(autoincrement()) @id
  createdAt          DateTime  @default(now())
  updatedAt          DateTime  @updatedAt
  expiresAt          DateTime?
  handle             String    @unique
  user               User?     @relation(fields: [userId], references: [id])
  userId             Int?
  hashedSessionToken String?
  antiCSRFToken      String?
  publicData         String?
  privateData        String?
}

초기 설정에서 sqlite에 연결되기 때문에 프로그램만 시작해도 데이터를 저장합니다.
그럼 blitz start 하세요.

$ blitz start

는 http://localhost:3000/에서 사이트를 펼친다.

아, Sign Up버튼과 Login버튼이 있습니까?
회원 로그인과 로그인 기능이 이미 실시되었다.
Sign Up

Login

처음부터 파리 공연이 있었는데.

강력한 CLI

시작 화면에 표시된 명령을 실행해 보십시오.

$ blitz generate all project name:string

칙

$ blitz generate all project name:string

You are using alpha software - if you have any problems, please open an issue here:
    https://github.com/blitz-js/blitz/issues/new/choose

✔ Model for 'project' created successfully:

> model Project {
>   id        Int      @default(autoincrement()) @id
>   createdAt DateTime @default(now())
>   updatedAt DateTime @updatedAt
>   name      String
> }

Now run blitz db migrate to add this model to your database

CREATE    app/projects/pages/projects/[projectId]/edit.tsx
CREATE    app/projects/pages/projects/[projectId].tsx
CREATE    app/projects/pages/projects/index.tsx
CREATE    app/projects/pages/projects/new.tsx
CREATE    app/projects/components/ProjectForm.tsx
CREATE    app/projects/queries/getProject.ts
CREATE    app/projects/queries/getProjects.ts
CREATE    app/projects/mutations/createProject.ts
CREATE    app/projects/mutations/deleteProject.ts
CREATE    app/projects/mutations/updateProject.ts

테이블뿐만 아니라 페이지를 포함한 1개의 기능을 포함하는 CRUD를 생성했다.

Page( app/project/pages/* )

Form( app/project/components/* )

Query( app/project/query/* )

Mutations( app/project/mutations/* )

잊지 마세요.

$ blitz db migrate

http://localhost:3000/projects에 가면 CRUD가 실상인 것을 알 수 있다.

뛰어난 Database Viewer

blitz db studio를 입력하십시오.

$ blitz db studio

Generating Prisma Client ... done
Studio started at http://localhost:5555

시http://localhost:5555다음 화면이 상승합니다.
이 편안한 화면으로 데이터의 열람과 제작을 빨리 끝낼 수 있습니다!

제로 API

그럼 방금 생성된 파일 내용에 대한 이야기입니다.( getProject.ts )
app/projects/queries/getProject.ts

import { NotFoundError, SessionContext } from "blitz"
import db, { FindOneProjectArgs } from "db"

type GetProjectInput = {
  where: FindOneProjectArgs["where"]
  // Only available if a model relationship exists
  // include?: FindOneProjectArgs['include']
}

export default async function getProject(
  { where /* include */ }: GetProjectInput,
  ctx: { session?: SessionContext } = {}
) {
  ctx.session!.authorize()

  const project = await db.project.findOne({ where })

  if (!project) throw new NotFoundError()

  return project
}

매개 변수where의 형식을 채택하다
app/projects/pages/projects/[projectId].tsx

...
import { Head, Link, useRouter, useQuery, useParam, BlitzPage } from "blitz"
import getProject from "app/projects/queries/getProject"
...

export const Project = () => {
  const projectId = useParam("projectId", "number")
  const [project] = useQuery(getProject, { where: { id: projectId } })
...

useQuery에서 getProject를 호출하여 방문합니다.이게 다야!
내부에 GraphiQL을 사용한 것 같지만 GraphiQL 같은 코드가 생기지 않아도 데이터 접근이 원활합니다!

React의 실험 기능 가져오기

또 리액트Conceurent 모드(병렬 모드)를 가져와 사용할 수 있다Suspense와 ErrorBoundary.(generate용 소스 파일)

blitz console

orm의 리플입니다!Blitz.js에서도 mutation 할 수 있어요!

뮤테이션도 해야지!대단해!
(단, auth인증getProject이 있어서 싸우기가 좀 힘들 것 같은데...)

Blitz.js on Next.js

Blitz.js는 Next입니다.js로 구성되어 있기 때문에 넥스트가 할 수 있는 일은 두터운 지지를 받았다.
Blitz에서는 Recipeblitz install <recipe>로 사용할 수 있습니다.
예를 들어, tailwind를 가져올 때

$ blitz install tailwind

이렇게 하면 귀하께 필요한 포장과 디자인 파일을 설치하고 수정할 수 있습니다.
CLI에서 인터랙티브 확인이 있어서 Enter 누르면 끊임없이 해드려요!

끝나면 테일윈드 스타일링만 남았어요!

...
    <ul className="bg-blue-500">
...

https://blitzjs.com/docs/using-recipes
Recipe에 대응하는 물건은 Giithub을 보면 확인할 수 있습니다.
https://github.com/blitz-js/blitz/tree/canary/recipes

지금, chakra,emotion,material-ui,render,tailwind에 대응합니다.
blitzjs, 아주 힘있어, 아주 좋아!
꼭 건드려 주세요!

Reference

솔직히 브랜든의 영상을 기사에 올렸을 뿐인데 이것만 봐도 블리츠의 생산성을 느낄 수 있어요!