安裝React - ［▌▣］

安裝React

React with Vite

Getting Started | Vite

code:bash

yarn create @vitejs/app

#or

npm create vite@latest

#choose react or react-ts

cd react-app

npm install

npm run dev

React with Next.js

code:bash

npx create-next-app@latest

#TypeScript

#ESLint

cd react-app

npm run dev

esbuild

ssig33: "最近最小限のReactアプリを作るのに使ってるものについてとりあえずメモしとく。"

esbuild、esbuild-server、tsx、react、react-dom、twind、wouter…

code:esbuild.ts

import { createServer } from "esbuild-server";

import esbuild from "esbuild";

const mode = process.argv2 === "--watch" ? "watch" : "build";

const esbuildOptions = {

entryPoints: "src/index.tsx",

bundle: true,

sourcemap: true,

loader: { ".svg": "text" },

outdir: "public",

logLevel: "info",

};

if (mode === "build") {

esbuild

.build({

...esbuildOptions,

})

.catch(() => process.exit(1));

}

if (mode === "watch") {

const port = parseInt(process.env.PORT || "8080");

console.log(Development server started at http://localhost:${port});

createServer(

{ ...esbuildOptions },

{ static: "public", historyApiFallback: true, port },

).start();

}

code:package.json

{

// ...

"scripts": {

"dev": "tsx esbuild.ts --watch",

"build": "tsx esbuild.ts"

}

// ...

}

code:public/index.html

<html>

<body>

</body>

</html>

React with Webpack

目前已不推薦使用

2023-07-20 Create React Appは役割を終えました

Getting Started | Create React App

code:bash

npx create-react-app@5.0.0 react-app

cd react-app

npm start

Preact

Getting Started – Preact Guide

npx preact-cli create default my-project