React 18 alpha version has been opened for us to experience. In order to experience the new features of React 18 more conveniently and quickly, today we use Vite to build a simple version of the React development environment, to help us quickly try new things.

preface

This article has been posted on Github: github.com/beichensky/… Welcome Star, welcome Follow!

Initialize the project

Create a react-React18-demo file for our project

mkdir vite-react18-demo
​
cd vite-react-react18-demo
​
npm init -y
Copy the code

Depends on installation & project configuration

  • For development with Vite and React 18, that naturally requires installation first

    Note: The Node version must be larger than 12. Otherwise, even if Vite is installed successfully, you will hear an error: Cannot find Module worker_Threads

npm install react@alpha react-dom@alpha
​
npm install vite -D
Copy the code

  • To start a project with Vite, add the following command to the package.json file:

    • Start: “start”: “vite” ‘
    • Pack: “build”: “vite build”

  • When we used Webpack, we can hot update. How about Vite? Of course you can.

npm install @vitejs/plugin-react-refresh -D
Copy the code

After the installation, just as with Webpack, create a new configuration file called vite.config.js and add hot updates to the plugins property

import { defineConfig } from 'vite'
import refreshReactPlugin from '@vitejs/plugin-react-refresh'
​
export default defineConfig({
    plugins: [refreshReactPlugin()]
})
Copy the code

  • Ok, so many of our projects now use typescript. Can we integrate it with Vite? B: Sure. The steps are as follows:

    • Install dependencies

      npm install typescript @types/react @types/react-dom -D
Copy the code

    • Add the tsconfig.json configuration file to the root directory

      {
    "compilerOptions": {
        "target": "ESNext",
        "lib": ["DOM", "DOM.Iterable", "ESNext"],
        "allowJs": false,
        "skipLibCheck": false,
        "esModuleInterop": false,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "module": "ESNext",
        "moduleResolution": "Node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react",
        "types": ["react/next", "react-dom/next"]
    },
    "include": ["./src"]
}
Copy the code

  • After that, since we’re using typescript, let’s change the packaging command: “build”: “TSC && vite build”

18 experience the React

  • Create entry file: NewsrcDirectory,srcLet’s create oneindex.tsxfile

index.tsx

import React from 'react' import ReactDOM from 'react-dom' const App = () => { return <h1>Hello, React 18</h1>} // React 18</h1>} // React 18</h1> {React 18</h1>} .render(<App />)Copy the code

  • Now we have the entry file, but not the page to host, so we can create the index.html as the page in the root directory

    • createscriptThe label,srcPoint to the entry file you just createdindex.tsx
    • Set up thescriptThe labeltype 为 module: Can be importedES6Module can be enabledESMModule mechanism

index.html

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, Word-wrap: break-word! Important; word-wrap: break-word! Important; word-wrap: break-word! Important; word-wrap: break-word! Important; word-wrap: break-word! Important; word-wrap: break-word! Important; word-wrap: break-word! Important; src="/src/index.tsx"></script> </body> </html>Copy the code
  • Start the project

After the NPM run start command is executed, port 3000 is enabled (if the port is occupied, it will be delayed). Open your browser, type http://localhost:3000, and you’ll see: Hello, React 18.

  • Project package

After the NPM run build command is executed, the project is packaged and the dist folder is generated. We’ll use the live-server plugin (NPM I live-server-g) to see if it’s packaged successfully

cd dist

liver-server
Copy the code

Open your browser, type http://localhost:8080/, and you can also see: Hello, React 18. The package is successfully packaged.

Ok, Vite with React 18 environment built here is successful. We’ll look at the new features in React 18 later.

Note: The Node version must be larger than 12. Otherwise, even if Vite is installed successfully, you will hear an error: Cannot find Module worker_Threads

Write in the back

The code is in the article, if you want to quickly build the React debug environment, you can speed up.

If there is a wrong or not rigorous place to write, you are welcome to put forward valuable comments, thank you very much.

If you like or help, please welcome Star, which is also a kind of encouragement and support to the author.