Skip to main content
Deno 2 is finally here 🎉️
Learn more

faster_react

It is a complete framework, with automatic compilation of components for the client side, Server Side Rendering, Hydration and interactive client-side components. It has folders in its structure for automatic inclusion of pages, routes, components and static files. It has automatic reload client side and compilation when "dev":true in options.json. There is also automatic generation of routes based on the file and folder structure. It focuses on performance and practicality. About Faster, it is an optimized server middleware. See more at: https://github.com/hviana/faster

Contents

Framework structure

It is important to note that any file modified or created in these directories will cause the application to compile everything. After this, the application will be made available to the client side and the browser page will automatically refresh (when "dev":true in options.json). Even routes are updated dynamically. In these directories, you can organize the files into subdirectories. Each file must have a export default. When creating a new project, sample files already exist.

components folder

Folder of React components/functions that will be interactive on the client side. Supports .ts and .tsx extensions.

pages folder

Pages that will be rendered on the server side and hydrated on the client side. The page contains a path that matches the directory structure, omitting its extension. For example, the path localhost:8080/pages/cart refers to the file pages/cart.tsx. It is important to note that the initial route will point to /pages/index.tsx (ex: localhost:8080 => /pages/index.tsx). Form or JSON data in post methods, URL parameters (e.g. mypath?param1=a), and "framework" data in options.json will be passed as properties to the React component/function on the page (in addition to your custom parameters). The request headers are also passed inside the headers entry in the React Function/Component props. Supports .ts and .tsx extensions.

api folder

API Routes made with Faster. Supports .ts extension.

css folder

CSS Files

static folder

The files that will be delivered statically. They have the folder structure as their route.

Packages included

There are several packages included to help you develop React applications. Here are some examples of imports that you can use without configuring anything:

import {/* your imports */} from "react";
import {/* your imports */} from "react/";
import {/* your imports */} from "react-dom";
import {/* your imports */} from "react-dom/server";
import {/* your imports */} from "react-dom/client";
import {/* your imports */} from "react-router-dom";
import {/* your imports */} from "react/jsx-runtime";
import {/* your imports */} from "render";
import {/* your imports */} from "htm/react";
import {/* your imports */} from "faster";

Creating a project

It is necessary to execute the command: deno run -A -r "https://deno.land/x/faster_react/new.ts" myProjectFolder. It is important to highlight that you need the git command installed and configured. You can make your customizations and configure the server in options.json.

Running a project

It is necessary to execute the command: deno task serve

About

Author: Henrique Emanoel Viana, a Brazilian computer scientist, enthusiast of web technologies, cel: +55 (41) 99999-4664. URL: https://sites.google.com/view/henriqueviana

Improvements and suggestions are welcome!