RedwoodJSとかいうJamstack時代に生まれたフレームワークのすごいやつ

8786 ワード
RedwoodJS React OpenGL JAMstack OpenGL テキストリンク

Twitterを眺めていたらRedwoodJSとかいう内容が流れてきたので調べてみた。

RedwoodJS
https://redwoodjs.com/

フルスタックフレームワーク！
いいですね。フルスタック。いい言葉です。
僕もフルスタックになりたいですね。

どうやらReactとOpenGLをベースにしたフレームワークみたいです。

とりあえずチュートリアルはブログを作る模様

yarn create redwood-app ./redwoodblog

keineme dox % yarn create redwood-app ./redwoodblog
yarn create v1.22.5
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "[email protected]" with binaries:
      - create-redwood-app
  ✔ Creating Redwood app
    ✔ Creating directory '/Users/keineme/dox/redwoodblog'
    ✔ Downloading latest release
    ✔ Extracting latest release
    ✔ Clean up
  ✔ Installing packages
    ✔ Checking node and yarn compatibility
    ✔ Running `yarn install`... (This could take a while)

Thanks for trying out Redwood!

We've created your app in '/Users/keineme/dox/redwoodblog'
Enter the directory and run 'yarn rw dev' to start the development server.

Join the Community

 ⮡  Join our Forums: https://community.redwoodjs.com
 ⮡  Join our Chat: https://discord.gg/redwoodjs

Get some help

 ⮡  Get started with the Tutorial: https://redwoodjs.com/tutorial
 ⮡  Read the Documentation: https://redwoodjs.com/docs

Stay updated

 ⮡  Sign up for our Newsletter: https://www.redwoodjs.com/newsletter
 ⮡  Follow us on Twitter: https://twitter.com/redwoodjs

Become a Contributor ❤

 ⮡  Learn how to get started: https://redwoodjs.com/docs/contributing
 ⮡  Find a Good First Issue: https://redwoodjs.com/good-first-issue

✨  Done in 141.52s.
keineme dox %

終わったら移動してコマンド入力ですね。

cd redwoodblog
yarn redwood dev

どうやら、ローカル環境ではlocalhost:8910に生成されるみたいです。

Rote.js
// In this file, all Page components from 'src/pages` are auto-imported. Nested
// directories are supported, and should be uppercase. Each subdirectory will be
// prepended onto the component name.
//
// Examples:
//
// 'src/pages/HomePage/HomePage.js'         -> HomePage
// 'src/pages/Admin/BooksPage/BooksPage.js' -> AdminBooksPage

import { Router, Route } from '@redwoodjs/router'

const Routes = () => {
  return (
    <Router>
      <Route path="/" page={HomePage} name="home" /> //ここをまずは追記
      <Route notfound page={NotFoundPage} />
    </Router>
  )
}

export default Routes

[NeskMPro:~/dox/redwoodblog] keineme% yarn redwood generate page home /
yarn run v1.22.5
$ /Users/keineme/dox/redwoodblog/node_modules/.bin/redwood generate page home /
  ✔ Generating page files...
    ✔ Successfully wrote file `./web/src/pages/HomePage/HomePage.stories.js`
    ✔ Successfully wrote file `./web/src/pages/HomePage/HomePage.test.js`
    ✔ Successfully wrote file `./web/src/pages/HomePage/HomePage.js`
  ✔ Updating routes file...
✨  Done in 1.97s.
[NeskMPro:~/dox/redwoodblog] keineme% 

yarn redwood generate page home /

このコマンドを入力することで3つのファイルが生成されるようです。

HomePage.js
import { Link, routes } from '@redwoodjs/router'

const HomePage = () => {
  return (
    <>
      <h1>HomePage</h1>
      <p>
        Find me in <code>./web/src/pages/HomePage/HomePage.js</code>
      </p>
      <p>
        My default route is named <code>home</code>, link to me with `
        <Link to={routes.home()}>Home</Link>`
      </p>
    </>
  )
}

export default HomePage

これでまずはページが生成されました。

一通り、チュートリアルをすすめると投稿フォームだったりブログ生成フォームだったり挙句の果てには認証もかんたんに実装できるようです。

日本記事が少ないので、色々と読み漁ってみようと思います。というメモもかねて。