# Snippet Reactjs Create Fast (ok)

### code-snippets 1

<figure><img src="https://55355946-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lk4gdXN1F2DaoesJ9Bz%2Fuploads%2FmbagvTh0Cm6rCaWDqSpx%2Fimage.png?alt=media&#x26;token=46180538-d955-4455-930a-26f35dc0216e" alt=""><figcaption></figcaption></figure>

C:\Users\Administrator\AppData\Roaming\Code\User\snippets\1.code-snippets

```typescript
{
	// Place your snippets for typescriptreact here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	"createRoot 1": {
		"prefix": "Lionel React createRoot 1",
		"body": [
			"import React from 'react';",
			"import ReactDOM from 'react-dom/client';",
			"import App from './App';",
			"import './styles/app.scss';",
			"const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);",
			"root.render(",
			"<React.StrictMode>",
			"<App />",
			"</React.StrictMode>",
			");"
		],
		"description": "createRoot nhanh chóng 😍"
	}
}
```

<figure><img src="https://55355946-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lk4gdXN1F2DaoesJ9Bz%2Fuploads%2FkDgCqIa851Jt6i2Neivw%2Fimage.png?alt=media&#x26;token=b7400047-6df8-44e4-ae48-85ecf4687330" alt=""><figcaption></figcaption></figure>

### code-snippets 2

C:\Users\Administrator\AppData\Roaming\Code\User\snippets\2.code-snippets

```typescript
{
	// Place your snippets for typescriptreact here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	"createApp 1": {
		"prefix": "LionelReact createApp 1",
		"body": [
			"import React from \"react\";",
			"import { BrowserRouter, Routes, Route, Link } from \"react-router-dom\";",
			"import Home from \"./views/Home\";",
			"interface AppProps {}",
			"const App = (props: AppProps) => {",
			"return (",
			"<BrowserRouter>",
			"<div className=\"px-5 py-2\">",
			"<Link to=\"/\">Home</Link>",
			"</div>",
			"<Routes>",
			"<Route path=\"/\" element={<Home />} />",
			"</Routes>",
			"</BrowserRouter>",
			");",
			"}",
			"export default App;"
		],
		"description": "createApp nhanh chóng 😍"
	}
}
```

### code-snippets 3

C:\Users\Administrator\AppData\Roaming\Code\User\snippets\3.code-snippets

```typescript
{
	// Place your snippets for typescriptreact here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	"createViewHome 1": {
		"prefix": "LionelReact createViewHome 1",
		"body": [
			"import React from \"react\";",
			"interface HomeProps {}",
			"const Home = (props: HomeProps) => {",
			"return (",
			"<main className=\"container mt-5\" >",
			"<section className=\"row justify-content-center\">",
			"<h1 className=\"text-center text-primary\">Welcome to my Todos Full Stack CRUD App!</h1>",
			"</section>",
			"</main>",
			");",
			"}",
			"export default Home;"
		],
		"description": "createViewHome nhanh chóng 😍",
	}
}
```

### code-snippets 4

C:\Users\Administrator\AppData\Roaming\Code\User\snippets\4.code-snippets

```typescript
{
	// Place your snippets for typescriptreact here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	"create-esbuild-config-front-end-1": {
		"prefix": "LionelReact front-end 1 create-esbuild-config",
		"body": [
			"Part 1 practice\\package.json",
			"{ \"name\": \"todo\", \"version\": \"1.0.0\", \"main\": \"front.js\", \"scripts\": { \"watch:client\": \"node esbuild-config/client.dev.mjs\", \"watch:restart-server\": \"nodemon --config nodemon.json\", \"front\": \"npm-run-all --parallel watch:*\" }, \"keywords\": [], \"author\": \"\", \"license\": \"ISC\", \"description\": \"\", \"dependencies\": { \"@types/bootstrap\": \"^5.2.10\", \"bootstrap\": \"^5.3.3\", \"cors\": \"^2.8.5\", \"express\": \"^4.21.1\", \"mysql2\": \"^3.11.5\", \"react\": \"^18.3.1\", \"react-dom\": \"^18.3.1\", \"react-router-dom\": \"^7.0.2\" }, \"devDependencies\": { \"@types/cors\": \"^2.8.17\", \"@types/express\": \"^5.0.0\", \"@types/node\": \"^22.10.1\", \"@types/react\": \"^18.3.13\", \"@types/react-dom\": \"^18.3.1\", \"@types/typescript\": \"^2.0.0\", \"esbuild\": \"^0.24.0\", \"esbuild-sass-plugin\": \"^3.3.1\", \"nodemon\": \"^3.1.7\", \"npm-run-all\": \"^4.1.5\", \"sass\": \"^1.82.0\", \"ts-node\": \"^10.9.2\", \"typescript\": \"^5.7.2\" } }",			
			"Part 2 practice\\esbuild-config\\client.dev.mjs",
			"import * as esbuild from 'esbuild'; import * as sass from 'sass'; import { sassPlugin } from 'esbuild-sass-plugin'; let ctx; try { ctx = await esbuild.context({ entryPoints: ['src/client/index.tsx'], bundle: true, minify: false, sourcemap: true, outfile: 'public/static/bundle.js', plugins: [sassPlugin({ type: 'style', logger: sass.Logger.silent, quietDeps: true })], define: { 'process.env.NODE_ENV': \"'development'\" } }); await ctx.watch(); const { host, port } = await ctx.serve({ servedir: 'public', fallback: 'public/index.html', port: 9000 }); var hostct = \"localhost\"; console.info(`Hot refresh at http://\\${hostct\\}:\\${port\\}`); } catch (error) { console.error('An error occurred:', error); process.exit(1); }",
			"Part 3 practice\\tsconfig.json",
			"{ \"compilerOptions\": { \"sourceMap\": true, \"target\": \"es2022\", \"module\": \"commonjs\", \"strict\": true, \"esModuleInterop\": true, \"skipLibCheck\": true, \"forceConsistentCasingInFileNames\": true, \"rootDir\": \"./src\", \"moduleResolution\": \"node\", \"resolveJsonModule\": true }, \"exclude\": [\"node_modules\"] }",
			"Part 4 practice\\src\\client\\tsconfig.json",
			"{ \"extends\": \"../../tsconfig.json\", \"compilerOptions\": { \"jsx\": \"react\", \"outDir\": \"../../public/static\", \"rootDir\": \".\" }, \"include\": [ \"./**/*\" ] }",
			"Part 5 src\\client\\index.tsx",
			"Part 6 src\\client\\App.tsx",
			"Part 7 src\\client\\views\\Home.tsx",
			"Part 8 practice\\public\\index.html",
			"<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"utf-8\" /> <link rel=\"icon\" href=\"favicon.ico\" /> <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\" /> <meta name=\"theme-color\" content=\"#ff6ad5\" /> <title>Todos App</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id=\"root\"></div> <script src=\"/static/bundle.js\"></script> </body> </html>",
			"Part 9 practice\\src\\client\\styles\\app.scss",
			"\\$body-bg: #0091ea; \\$primary: #ff6ad5; \\$secondary: #ffdb58; \\$success: #00f764; \\$info: #01cdfe; \\$warning: #ff61a6; \\$danger: #ff2965; \\$light: #9A83D4; \\$dark: #260e37; \\$link-color: #01cdfe; @import '~bootstrap/scss/bootstrap.scss';"
		],
		"description": "create-esbuild-config front-end 1 😍",
	}
}
```

### code-snippets 5

C:\Users\Administrator\AppData\Roaming\Code\User\snippets\5.code-snippets

```typescript
{
	// Place your snippets for typescriptreact here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	"create-esbuild-config-back-end-1": {
		"prefix": "LionelReact back-end 1 db & router create-esbuild-config",
		"body": [
			"Part 1 package.json",
			"{ \"name\": \"todo\", \"version\": \"1.0.0\", \"main\": \"dist/server.js\", \"scripts\": { \"watch:server\": \"node esbuild-config/server.dev.mjs\", \"watch:restart-server\": \"nodemon --config nodemon.json\", \"back\": \"npm-run-all --parallel watch:*\" }, \"keywords\": [], \"author\": \"\", \"license\": \"ISC\", \"description\": \"\", \"dependencies\": { \"bootstrap\": \"^5.3.3\", \"cors\": \"^2.8.5\", \"express\": \"^4.21.1\", \"mysql2\": \"^3.11.5\", \"react\": \"^18.3.1\", \"react-dom\": \"^18.3.1\", \"react-router-dom\": \"^7.0.2\" }, \"devDependencies\": { \"@types/cors\": \"^2.8.17\", \"@types/express\": \"^5.0.0\", \"@types/node\": \"^22.10.1\", \"@types/react\": \"^18.3.13\", \"@types/react-dom\": \"^18.3.1\", \"@types/typescript\": \"^2.0.0\", \"esbuild\": \"^0.24.0\", \"esbuild-sass-plugin\": \"^3.3.1\", \"nodemon\": \"^3.1.7\", \"npm-run-all\": \"^4.1.5\", \"sass\": \"^1.82.0\", \"typescript\": \"^5.7.2\" } }",
			"Part 2 tsconfig.json",
			"{ \"compilerOptions\": { \"sourceMap\": true, \"target\": \"es2022\", \"module\": \"commonjs\", \"strict\": true, \"esModuleInterop\": true, \"skipLibCheck\": true, \"forceConsistentCasingInFileNames\": true, \"rootDir\": \"./src\", \"moduleResolution\": \"node\", \"resolveJsonModule\": true }, \"exclude\": [\"node_modules\"] }",
			"Part 3 nodemon.json",
			"{ \"watch\": [\"src/server\", \".env\"], \"ignore\": [\"src/**/*.test.ts\", \"src/client/\", \"public/\"], \"ext\": \"ts,mjs,js,json\", \"exec\": \"node ./dist/server.js\", \"legacyWatch\": true }",
			"Part 4 src\\server\\tsconfig.json",
			"{ \"extends\": \"../../tsconfig.json\", \"compilerOptions\": { \"outDir\": \"../../dist\", \"rootDir\": \".\", \"types\": [\"node\"] }, \"include\": [\"./**/*\"] }",
			"Part 5 src\\server\\server.ts",
			"import express from 'express'; import cors from 'cors'; import apiRouter from './routes'; import db from './db'; const isProduction = process.env.NODE_ENV === 'production'; const isDevelopment = process.env.NODE_ENV === 'development'; const app = express(); if (isDevelopment) { app.use(cors()); } db.todos.getAll().then(todos => console.log(todos)); app.use(express.json()); app.use('/api', apiRouter); if (isProduction) { app.use(express.static('public')); } if (isProduction) { app.get('*', (req: any, res: any) => { res.sendFile('index.html', { root: 'public' }); }); } const port = process.env.PORT || 3000; var hostct = 'localhost'; app.listen(port, () => console.log(`Server running on port http://\\${hostct}:\\${port}`));",
			"Part 6 src\\server\\routes\\index.ts",
			"import { Router } from 'express'; import todosRouter from './todos'; const router = Router(); router.use('/todos', todosRouter); export default router;",
			"Part 7 src\\server\\routes\\todos.ts",
			"import { Router } from 'express'; import db from '../db'; const router = Router(); router.get('/', async (req, res) => { try { const todos = await db.todos.getAll(); res.json(todos); } catch (error) { console.log(error); res.status(500).json({ message: 'Internal Server Error', error }); } }); router.get('/:id', async (req, res) => { try { const id = parseInt(req.params.id, 10); const [todo] = await db.todos.getOne(id); res.json(todo); } catch (error) { console.log(error); res.status(500).json({ message: 'Internal Server Error', error }); } }); router.post('/', async (req, res) => { try { const newTodo = req.body; const result = await db.todos.insert(newTodo.description); res.json({ message: 'Todo created', id: result.insertId }) } catch (error) { console.log(error); res.status(500).json({ message: 'Internal Server Error', error }); } }); router.put('/', async (req, res) => { try { const newTodo = req.body; console.log(newTodo); const result = await db.todos.update(newTodo.id, newTodo.description, newTodo.isCompleted); res.json({ message: 'Update created', id: result }) } catch (error) { console.log(error); res.status(500).json({ message: 'Internal Server Error', error }); } }); export default router;",
			"Part 8 src\\server\\db\\index.ts",
			"import * as todos from './tables/todos'; export default { todos }",
			"Part 9 src\\server\\db\\connection.ts",
			"import mysql from 'mysql2/promise'; const pool = mysql.createPool({ host: 'localhost', user: 'root', password: '', database: 'todo_app' }); export default pool;",
			"Part 10 src\\server\\db\\queryUtils.ts",
			"import pool from './connection'; import type { ResultSetHeader } from 'mysql2'; export async function SelectQuery<T>(queryString: string, params?: any) { const [results] = await pool.execute(queryString, params); return results as T[]; } export async function ModifyQuery(queryString: string, params?: any) { const [results] = await pool.query(queryString, params); return results as ResultSetHeader; }",
			"Part 11 src\\server\\db\\tables\\todos.ts",
			"import { SelectQuery, ModifyQuery } from '../queryUtils'; export interface ITodosRow  { id: number; description: string; isCompleted: 0 | 1; } export function getAll() { return SelectQuery<ITodosRow>('SELECT * FROM todos;'); } export function getOne(id: number) { return SelectQuery<ITodosRow>('SELECT * FROM todos WHERE id = ?;', [id]); } export function insert(todoItem: string) { return ModifyQuery('INSERT INTO todos (description) VALUE (?);', [todoItem]) } export function update(id:number,description: string, isCompleted:number) { return ModifyQuery('UPDATE todos SET description=?,isCompleted=? WHERE id=?;', [description,isCompleted,id]); }",
			"Part 12 esbuild-config\\server.dev.mjs",
			"import * as esbuild from 'esbuild'; let ctx; try { ctx = await esbuild.context({ entryPoints: ['src/server/server.ts'], bundle: true, sourcemap: true, minify: false, platform: 'node', target: ['node18.6'], packages: 'external', define: { 'process.env.NODE_ENV': \"'development'\" }, outfile: 'dist/server.js' }); await ctx.watch(); console.log('Watching server...'); } catch (error) { console.error('An error occurred:', error); process.exit(1); }",
			"Part 13 todo_app.sql",
			"CREATE TABLE `todos` ( `id` int (50) NOT NULL, `description` varchar(255) NOT NULL, `isCompleted` tinyint (4) NOT NULL ) ENGINE = InnoDB DEFAULT CHARSET = utf8mb4 COLLATE = utf8mb4_general_ci; INSERT INTO `todos` (`id`, `description`, `isCompleted`) VALUES (1, 'Todo 1', 1), (2, 'Todo 2', 0), (3, 'Todo 3', 0), (4, 'Todo 4', 0); ALTER TABLE `todos` ADD PRIMARY KEY (`id`); ALTER TABLE `todos` MODIFY `id` int (50) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT = 5;"
		],
		"description": "LionelReact back-end 1 db & router create-esbuild-config 😍",
	}
}
```

### code-snippets 7

C:\Users\Administrator\AppData\Roaming\Code\User\snippets\7.code-snippets

```typescript
{
	// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
	// Placeholders with the same ids are connected.
	// Example:
	"eslint-disable any": {
		"prefix": "eslint-disable any",
		"body": [
			"/* eslint-disable @typescript-eslint/no-explicit-any */"
		],
		"description": "eslint-disable any"
	}
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learnimportant.gitbook.io/learn-important/windows10/snippet-reactjs-create-fast-ok.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.