preface

Deno 1.0 has been released, but it is not stable. At present, many standard libraries are in the state of TO do, and the ecology needs to be improved. After all, the Node.js community has taken years to develop.

However, once released, it became popular and had the following advantages

  • Security: Enabling the network, file, and environment entry must be declared by running commands
  • Support for TypeScript out of the box
  • Comes with code formatting and dependency checking
  • Deno has its own standard library, deno.land/ STD
  • Eliminates centralized code repositories through URLS and file import

Install Deno

Please go to the Deno official script, a command to install Deno, remember to configure the environment variable according to the successful installation prompt oh ~

Import dependencies -URL import and import_map

Deno has two ways of introducing dependencies:

  1. URL direct import
//import {required object} from 'module address '
import { assertEquals } from "https://deno.land/std/testing/asserts.ts";

assertEquals("hello"."hello");
assertEquals("world"."world");

console.log("Asserted! 🎉");
Copy the code

If the module is not cached at execution time, it will be downloaded first

$ deno run test.ts
Compile file:///mnt/f9/Projects/github.com/denoland/deno/docs/test.ts
Download https://deno.land/std/testing/asserts.ts
Download https://deno.land/std/fmt/colors.ts
Download https://deno.land/std/testing/diff.ts
Asserted! 🎉
Copy the code
  1. Import_map import (currently unstable) Import Map is a new proposal for JavaScript. Check it out by yourself (not the point of this article)

Using import Map in Deno has the following restrictions:

  • A single import map
  • URLs without callbacks
  • Deno does not support STD: Namespace
  • Support only file:, HTTP: and HTTPS:
/ / import_map. Json {" imports ": {" introducing name/(note, / is a must)" : "module address" "HTTP/" :" https://deno.land/std/http/ "}}Copy the code
// hello_server.ts
//import {object} from "import_map declaration of the noun/module.ts"
import { serve } from "http/server.ts";

const body = new TextEncoder().encode("Hello World\n");
for await (const req of serve(": 8000")) {
  req.respond({ body });
}
Copy the code

Json –importmap=import_map.json –unstable. Otherwise, deno does not know what to do with importmap

$ deno run --allow-net --importmap=import_map.json --unstable hello_server.ts
Copy the code

Type declaration

Deno does not automatically find.d.ts files. It needs to be declared in code comments

// @deno-types=" type declaration file (local reference, remote URL reference)"
// @deno-types="./foo.d.ts"
import * as foo from "./foo.js";
Copy the code

Write the React

Everything is ready to write React

App.tsx

/ / @ deno - types = "https://deno.land/x/types/react/v16.13.1/react.d.ts" import the React from 'https://dev.jspm.io/react' export const App = () => <div>Hello YYDeno with React! </div>Copy the code

Server side rendering and output

Use ReactDOMServer to render React on the Server, and then use Deno Server to render React.

Server.tsx

// Import maps is not stable
import { serve } from "http/server.ts";
import React from 'https://dev.jspm.io/react'
// import { serve } from "https://deno.land/[email protected]/http/server.ts";
import ReactDOMServer from 'https://dev.jspm.io/react-dom/server'
import { App } from './App.tsx'

export const str = ReactDOMServer.renderToString(<App />);

const body = new TextEncoder().encode(str);
const s = serve(": 8080");
window.onload = async() = > {console.log("http://localhost:8080/");
  for await (constreq of s) { req.respond({ body }); }};Copy the code

Execution and permission declarations

So far, we haven’t discussed how to compile TS and TSX on Deno

The answer is no compilation, Deno comes with TS and TSX implementations and now we’ll have fun implementing the React SSR we just wrote.

Deno is a secure operating environment, so files, networks, and environment operations must be executed with a flag statement –allow-net

Execute command:

deno run --allow-net Server.tsx
Copy the code

If you want to use Import maps as a dependency, you need to add a flag declaration to start:

deno run --allow-net  --importmap=import_map.json --unstable  Server.tsx
Copy the code

conclusion

  • Deno’s out-of-the-box Typescript and TSX environments make development with Typescript much easier.
  • Deno uses flag to declare operations in startup commands, which improves security to a certain extent. At least third-party libraries don’t mess with local files, networks, etc.
  • Referencing third-party libraries is a great way to write an address, much like package management in Go and Rust.
  • Deno comes with a rich, though imperfect, standard library.
  • This example code