RailsインスパイアのReactJsフレームワーク Blitzを試した
Blitzとは?
Blitzは、Ruby on Railsのようなサーバーレンダリングフレームワークのシンプルさと慣習を復活させ、 Reactとクライアントサイドレンダリングについて私たちが愛するすべてを維持します!
つまりRailsっぽくてクールなNextJs!!!(?)
Blitzでアプリケーションを作る
公式ドキュメントを参考に進める
form libraryは React Final Form (recommended)
を選びました
$ npm install -g blitz $ blitz new blitzTestApp You are using alpha software - if you have any problems, please open an issue here: https://github.com/blitz-js/blitz/issues/new/choose ? Pick a form library (you can switch to something else later if you want) … ▸ React Final Form (recommended) React Hook Form Formik ✔ Pick a form library (you can switch to something else later if you want) · React Final Form Hang tight while we set up your new Blitz app! CREATE .env CREATE .env.local CREATE .env.test.local CREATE .eslintrc.js CREATE .npmrc CREATE .prettierignore CREATE README.md CREATE app/auth/auth-utils.ts CREATE app/auth/components/LoginForm.tsx CREATE app/auth/components/SignupForm.tsx CREATE app/auth/mutations/login.ts CREATE app/auth/mutations/logout.ts CREATE app/auth/mutations/signup.ts CREATE app/auth/pages/login.tsx CREATE app/auth/pages/signup.tsx CREATE app/auth/validations.ts CREATE app/components/.keep CREATE app/hooks/useCurrentUser.ts CREATE app/layouts/.keep CREATE app/layouts/Layout.tsx CREATE app/pages/404.tsx CREATE app/pages/_app.tsx CREATE app/pages/_document.tsx CREATE app/pages/index.test.tsx CREATE app/pages/index.tsx CREATE app/users/queries/getCurrentUser.ts CREATE babel.config.js CREATE blitz.config.js CREATE db/index.ts CREATE db/migrations/.keep CREATE db/schema.prisma CREATE db/seeds.ts CREATE integrations/.keep CREATE jest.config.js CREATE package.json CREATE public/favicon.ico CREATE public/logo.png CREATE test/.keep CREATE test/__mocks__/fileMock.js CREATE test/setup.ts CREATE test/utils.tsx CREATE tsconfig.json CREATE types.ts CREATE utils/.keep CREATE .gitignore CREATE app/components/Form.tsx CREATE app/components/LabeledTextField.tsx ✔ Retrieving the freshest of dependencies ✔ Resolving packages ✔ Fetching packages ✔ Linking dependencies ✔ Building fresh packages ✔ Initializing SQLite database ✔ Committing your app Your new Blitz app is ready! Next steps: 1. cd blitzTestApp 2. blitz start $ cd blitzTestApp/ ~/work/node/blitzTestApp (master) $ blitz start You are using alpha software - if you have any problems, please open an issue here: https://github.com/blitz-js/blitz/issues/new/choose > ⚠️ Git config core.excludesFile is unset. Inferring .gitignore file locations. ✔ Prepped for launch Loaded env from /home/akinov/work/node/blitzTestApp/.blitz/caches/dev/.env warn - You have enabled experimental feature(s). warn - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk. ready - started server on http://localhost:3000 info - Using external babel configuration from /home/akinov/work/node/blitzTestApp/.blitz/caches/dev/babel.config.js
localhost:3000
にアクセスすると最初のページが表示されました
\Hello Wold/
migrationをしてみる
最初のページに書いてあるとおり、ページを生成、DBのmigrateをしてみる
構文などはほぼRailsである
$ 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 ~/work/node/blitzTestApp (master) $ blitz db migrate You are using alpha software - if you have any problems, please open an issue here: https://github.com/blitz-js/blitz/issues/new/choose Environment variables loaded from /home/akinov/work/node/blitzTestApp/.env Prisma schema loaded from db/schema.prisma ✔ Name of migration … y 📼 migrate save --name y Local datamodel Changes: // This is your Prisma schema file, // learn more about it in the docs: https://pris.ly/d/prisma-schema // -------------------------------------- model Project { id Int @default(autoincrement()) @id createdAt DateTime @default(now()) updatedAt DateTime @updatedAt name String } Prisma Migrate just created your migration 20201212115831-y in migrations/ └─ 20201212115831-y/ └─ steps.json └─ schema.prisma └─ README.md Run prisma migrate up --experimental to apply the migration Environment variables loaded from /home/akinov/work/node/blitzTestApp/.env Prisma schema loaded from db/schema.prisma 🏋️<200d> migrate up Changes to be applied: // This is your Prisma schema file, // learn more about it in the docs: https://pris.ly/d/prisma-schema // -------------------------------------- model Project { id Int @default(autoincrement()) @id createdAt DateTime @default(now()) updatedAt DateTime @updatedAt name String } Checking the datasource for potential data loss... Database Changes: Migration Database actions Status 20201212115831-y 1 CreateTable statements. Done 🚀 You can get the detailed db changes with prisma migrate up --experimental --verbose Or read about them here: ./migrations/20201212115831-y/README.md 🚀 Done with 1 migration in 128ms. Environment variables loaded from /home/akinov/work/node/blitzTestApp/.env Prisma schema loaded from db/schema.prisma ✔ Generated Prisma Client (2.12.1) to ./node_modules/@prisma/client in 60ms You can now start using Prisma Client in your code. Reference: https://pris.ly/d/client
import { PrismaClient } from '@prisma/client' const prisma = new PrismaClient()
warn Prisma 2.12.0 has breaking changes. You can update your code with npx @prisma/codemods update-2.12 ./ Read more at https://pris.ly/2.12
このままだとProjectの登録ができないので公式チュートリアルを参考にフォームを動くようにする
公式のフォームデータのとり方が配列のindex指定なの全然参考にならなかった。。。
event.target[0].value
他サイトだと document.getElementById
を使ってるものもあったりとキレイでベターなやり方が見つからなかった。
ReactJsなのでFormコンポーネント内でstateを持つのが良さそうだと思う。
event.target
はHTMLElementなのでquerySelectorなどで取得も可能だった
event.target.querySelector('[name=name]').value