How to `useDeno` in a React Component?
Tags: deno, react, webdev, javascript
Published: 2020-10-29 00:26:13

Hi, let me introduce you to [Aleph.js](https://alephjs.org), a React Framework in Deno, inspired by **Next.js**.

Different with Next.js, Aleph.js don't need **webpack** or other bundler since it uses the **ESM imports** syntax during development, like Vite and snowpack. Every module only needs to be compiled once and then cached on the disk. When a module changes, Aleph.js just recompile that single module, there's no time wasted re-bundling every changes, and instant updates in the browser by **HMR**(Hot Module Replacement) with **React Fast Refresh**.

Aleph.js works in [Deno](https://deno.land), the modern and secure runtime for JavaScript and TypeScript. No `package.json` and `node_modules` directory needed, all dependencies are imported as URL and managed by Aleph.js:

```jsx
import React from "https://esm.sh/react"
import Logo from "../components/logo.tsx"

export default function Page() {
    return (
      <div>
        <Logo />
        <h1>Hello World!</h1>
      </div>
    )
}
```

##  Features

- Zero Config
- Typescript in Deno
- ES Module Ready
- Import Maps
- HMR with Fast Refresh
- File-system Routing
- Markdown Page
- Built-in CSS(Less) Support
- SSR/SSG
- Plugins

## Why Create It?

Well, as a full-stack developer and a user of **Next.js**, I use React in almost all of my projects and feel good with [Vercel](http://vercel.com).

But there are still some *defects*, I would call it, let me down:

- Over-complicated Webpack
- Dirty AMD/UMD/CommonJS
- *Unnecessary* `package.json` and `ts.config.json`
- `node_modules` Hells

Maybe those are not real *Pain Points* for us, always can find a *polyfill*, but we deserve the best tools to make our life more easy.

Just as vite,snowpack,esbuild,deno,swc do: **explores the best developer experience**.

**Deno** is a simple, modern and secure runtime for JavaScript and TypeScript that uses V8 and is built in Rust. [¹]

- run javascript(es2020)/typescript without any config
- Permissions(--allow-read, --allow-write, --allow-net, etc)
- Built-in high performance tools(bundler,fmt,doc,lint) written in Rust
- Browser compatibility(fetch, window namespace, etc)

For me, Deno is a prefect runtime to run full-stack frameworks, so I initiated **Aleph.js**.

## "useDeno"

Most concepts of Aleph.js are same with Next.js, but add some different features I always wish Next do.

**For exemaple**, In Next.js, two functions called `getStaticProps` and `getServerSideProps` are used by the pages to fetch data at **build time(SSR)** or on each request. This solution isolates the `data` and `view` likes different roles of the `back-end` and `front-end`.

But for me, i prefer use **Hook** to fetch data during **SSR**, just like Aleph.js do: a hook called `useDeno` provided that allows you *fetch data* at build time(SSR) in a component with Deno runtime, that's more *React Style* likely:

```jsx
import React from "https://esm.sh/react"
import { useDeno } from "https://deno.land/x/aleph/mod.ts"

export default function Page() {
  const version = useDeno(() => {
    return Deno.version
  })

  return (
    <p>Powered by Deno v{version.deno}</p>
  )
}
```

or *fetch data* asynchronously:

```jsx
import React from "https://esm.sh/react"
import { useDeno, useRouter } from "https://deno.land/x/aleph/mod.ts"

export default function Post() {
  const { params } = useRouter()
  const post = useDeno(async () => {
    return await (await fetch(`https://.../post/${params.id}`)).json()
  })

  return (
    <h1>{post.title}</h1>
  )
}
```

### How It Works

The `useDeno` hook will receive a sync or async callback(the first parameter), during the build time(SSG) each callback of useDeno will be invoked and then cache the returned data, after in the browser the callbacks of useDeno will be ignored and the cached data will be used, that's it.

> More usages please our documentation: https://alephjs.org/docs

## Status
Aleph.js in **alpha** stage, not ready for *production*. You can check our website which built by Aleph.js, and welcome to take a shot.

- **Website**: https://alephjs.org
- **Github**: https://github.com/alephjs/aleph.js (Under the MIT License.)

[¹]: https://deno.land