This is the fourth day of my participation in Gwen Challenge.

Chapter one: Environment construction

With the React18 and Vite front end already maxed out, we decided to use React18 + Vite + Typescript to develop a TODO List.

React 18

React released The Plan for React 18 — React Blog yesterday, along with an Alpha version of The NPM package. When React 18 was released, it had the following features:

  • Will include out-of-the-box improvements (such as Automatic batching)
  • New apis (such as startTransition)
  • New SSR architecture with built-in support for React.lazy.
  • A progressive upgrade strategy. Only updates triggered by the new feature enable concurrent rendering, as opposed to the previous all-or-nothing upgrade approach.

Vite

Vite – a Web development tool developed by VUE author Yu Yuxi, which has the following features:

💡 Fast service startup: Use native ESM files without packaging!

⚡️ Lightweight fast thermal overloading: Module thermal overloading (HMR) that is always extremely fast, regardless of application size

🛠️ Rich features: support TypeScript, JSX, CSS, and so on out of the box.

📦 Optimized build: Optional pre-configured Rollup build in “multi-page application” or “library” mode

🔩 Generic plug-ins: Share the Rollup-superset plug-in interface between development and build.

🔑 Fully typed apis: Flexible apis and full TypeScript types.

Tools developed using JavaScript often take a long time (even minutes!) to solve. To start the development server, even with HMR, the effect of the file modification can take several seconds to show up in the browser.

New project

Vite initialization

Initialize a project with Vite. Document portal

# npm 6.x
npm init @vitejs/app todo-list --template react-ts

# NPM 7+ requires additional double lines:
npm init @vitejs/app todo-list -- --template react-ts

# yarn
yarn create @vitejs/app todo-list --template react-ts
Copy the code

Install dependencies

# yarn
yarn
# npm
npm install
Copy the code

Update the React Version

Since the React version is built into package.json is 17.0.2, we need to install the Alpha version

# yarn
yarn add react@alpha react-dom@alpha
# npm 
npm i react@alpha react-dom@alpha -S
Copy the code

Update vite. Config. Js

Use ESBuild to automatically inject JSX conversion functions, but note that the React. CreateElement function is still used here, not React 17 JSX. If you want new features in React 17, you’ll need to configure an ESbuild plugin to help solve this problem. See this issue for details.

export default defineConfig({
  plugins: [reactRefresh()],
  esbuild: {
    jsxInject: `import React from 'react'`}})Copy the code

Since we didn’t import React manually, we need to let typescript know. So we also need to modify tsconfig.json:

{ compilerOptions: { ... ."jsx": "react-jsx",}}Copy the code

Modify the main benchmark

import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
const root = ReactDOM.createRoot(
  document.getElementById('root')); root.render(<App />);
Copy the code

Modify the App. JSX

import { useState } from "react"; import logo from "./logo.svg"; import "./App.css"; function App() { const [count, setCount] = useState(0); return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p>Hello Vite + React! </p> <p> <button type="button" onClick={() => setCount((count) => count + 1)}> count is: {count} </button> </p> </header> </div> ); } export default App;Copy the code

At this point, we execute yarn dev

yarn dev
Copy the code

Suddenly I realized that I had reported this error: Property ‘createRoot’ does not exist on type ‘typeof import(“/code/my-app/node_modules/@types/react-dom/index”)’. TS2339. This happens because @types/react,@types/react-dom doesn’t define the createRoot API, so the Typescript compiler doesn’t know what createRoot is. You need to update @types/react,@types/react-dom.

Typescript recognizes new apis

Update @types/react and @types/react-dom to select the highest version.

yarn add @types/react @types/react-dom
Copy the code

We’ll get some hints when we look at @Types adding API support for PR.

/** * These are types for things that are present in the upcoming React 18 release. * * Once React 18 is released they can just be moved to the main index file. * * To load the types declared here in an actual project, there are three ways. The easiest one, * if your `tsconfig.json` already has a `"types"` array in the `"compilerOptions"` section, * is to add `"react/next"` to the `"types"` array. * * Alternatively, a specific import syntax can to be used from a typescript file. * This module does not exist in reality, which is why the {} is important: * * ```ts * import {} from 'react/next' * ``` * * It is also possible to include it through a triple-slash reference: * * ```ts * /// 
       * ``` * * Either the import or the reference only needs to appear once,  anywhere in the project. */
Copy the code

So we need to edit tsconfig.json and add an option to compilerOptions:

{ compilerOptions: { ... ."types": ["react/next"."react-dom/next"."src/types"."node_modules/@types"]}}Copy the code

We execute yarn dev again

yarn dev
Copy the code

At this point, another error will be found: Argument of type ‘HTMLElement | null’ is not assignable to parameter of type ‘Element | Document | DocumentFragment | The Comment ‘Type’ null ‘is not assignable to Type’ Element | Document | DocumentFragment | Comment ‘. TS2345. The reason is that compileroptions. strict = true is set in tsconfig and reactdom.createroot (rootElement) does not guarantee that the value returned is not null, so we will modify the main.tsx file again.

Modify main.tsx again

import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
const rootElement = document.getElementById("root");
if(! rootElement)throw new Error("Failed to find the root element");
const root = ReactDOM.createRoot(rootElement);
root.render(<App />);
Copy the code

We execute yarn dev again

yarn dev
Copy the code

And you’re done. 🎆 🎆. See the familiar page again:

In the next chapter, we will use the new API of Act18 for development, remember to like follow the favorite!!