Scribd
Upload
15 views3 pages

New Text Document

The document contains various code snippets and commands for setting up a React application with routing, as well as installing essential libraries such as Axios, Formik, Yup, MUI, and Tailwind CSS. It includes a shorthand for creating an Axios API instance with CRUD operations and a basic React app structure using react-router-dom. Each section provides a prefix, body of code, and a brief description of its purpose.

Uploaded by

Hoang Tien Dat (K17 HCM)
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
15 views3 pages

New Text Document

The document contains various code snippets and commands for setting up a React application with routing, as well as installing essential libraries such as Axios, Formik, Yup, MUI, and Tailwind CSS. It includes a shorthand for creating an Axios API instance with CRUD operations and a basic React app structure using react-router-dom. Each section provides a prefix, body of code, and a brief description of its purpose.

Uploaded by

Hoang Tien Dat (K17 HCM)
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

{

"Axios API shorthand": {


"prefix": "axiosApi",
"body": [
"import axios from 'axios';",
"",
"const api = axios.create({",
" baseURL: '${1:https://67145642690bf212c76132b1.mockapi.io/koifarm-
api/v1/DatHTSE170150}'",
"});",
"",
"export const artApi = {",
" getAllArt: async () => {",
" try {",
" const { data } = await api.get('/');",
" return data;",
" } catch (error) {",
" console.error('Error getAllArt:', error);",
" }",
" },",
" getDetail: async (id) => {",
" try {",
" const { data } = await api.get(`/${id}`);",
" return data;",
" } catch (error) {",
" console.error('Error getDetail:', error);",
" }",
" },",
" addArtTool: async (formData) => {",
" try {",
" const { data } = await api.post('/', formData);",
" return data;",
" } catch (error) {",
" console.error('Error addArtTool:', error);",
" }",
" },",
" deleteArt: async (id) => {",
" try {",
" return await api.delete(`/${id}`);",
" } catch (error) {",
" console.error('Error deleteArt:', error);",
" }",
" },",
" updateArt: async (id, formData) => {",
" try {",
" return await api.put(`/${id}`, formData);",
" } catch (error) {",
" console.error('Error updateArt:', error);",
" }",
" }",
"};"
],
"description": "Shorthand for creating an axios API instance with CRUD
operations"
},
"React App with Router Setup": {
"prefix": "react-router-setup",
"body": [
"import { BrowserRouter, Route, Routes } from 'react-router-dom';",
"import Navbar from './Navbar';",
"import Navigate1 from './Navigate1';",
"import Navigate2 from './Navigate2';",
"import Home from './Home';",
"import NotFound from './NotFound';",
"",
"function App() {",
" return (",
" <BrowserRouter>",
" <Navbar />",
" <Routes>",
" <Route path='/' element={<Home />} />",
" <Route path='/navigate1' element={<Navigate1 />} />",
" <Route path='/navigate2' element={<Navigate2 />} />",
" <Route path='*' element={<NotFound />} />",
" </Routes>",
" </BrowserRouter>",
" );",
"}",
"",
"export default App;"
],
"description": "React app setup with react-router-dom for routing"
},
"Install Formik": {
"prefix": "installFormik",
"body": [
"npm install formik --save"
],
"description": "Command to install Formik with npm"
},
"Install Yup": {
"prefix": "installYup",
"body": [
"npm install yup --save"
],
"description": "Command to install Yup with npm"
},
"Install React Router DOM": {
"prefix": "installRouter",
"body": [
"npm install react-router-dom --save"
],
"description": "Command to install React Router DOM with npm"
},
"Install MUI Core and Dependencies": {
"prefix": "installMuiAll",
"body": [
"npm install @mui/material @emotion/react @emotion/styled",
"npm install @mui/material @mui/styled-engine-sc styled-components",
"npm install @fontsource/roboto",
"npm install @mui/icons-material"
],
"description": "Command to install MUI Core, styled-components, Roboto
font, and icons"
},
"Install Tailwind CSS": {
"prefix": "installTailwind",
"body": [
"npm install -D tailwindcss",
"npx tailwindcss init"
],
"description": "Command to install Tailwind CSS and initialize its
configuration"
},
"Install Axios": {
"prefix": "installAxios",
"body": [
"npm install axios"
],
"description": "Command to install Axios for making HTTP requests"
}
}

You might also like