dev-SR / React

React exercise

• React exercise
  • Resources
  • Installation 🌼
    • Vite+Tailwind 🔥
    • 🏹 Tailwind Css IntelliSense custom config
  • VsCode Snippets for React TypeScript

Resources

Installation 🌼

Vite+Tailwind 🔥

Install Vite and Tailwind:

yarn create vite
yarn
yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Add the paths to all of your template files in your tailwind.config.cjs file.

/** @type {import('tailwindcss').Config} */
module.exports = {
 content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
 theme: {
  extend: {}
 },
 plugins: []
};

Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

App.tsx:

const App = () => {
 return (
  <>
   <h1 className='text-3xl font-bold underline'>Hello world!</h1>
  </>
 );
};
export default App;

Run your build process with yarn dev.

🏹 Tailwind Css IntelliSense custom config

{
	"tailwindCSS.emmetCompletions": true,
	"tailwindCSS.includeLanguages": {
		"html": "html",
		"javascript": "javascriptreact",
		"typescript": "typescriptreact"
	},
	// disable built-in css validation for tailwind specific syntax i.e @apply...
	"css.validate": false,
	// for first time triggering inside string
	"editor.quickSuggestions": {
		"strings": "on"
	}
}

Tailwind IntelliSense within objects and variables:

{
"tailwindCSS.experimental.classRegex": [
		["Classes \\=([^;]*);", "'([^']*)'"],
		["Classes \\=([^;]*);", "\"([^\"]*)\""],
		["Classes \\=([^;]*);", "\\`([^\\`]*)\\`"]
	]
}

Tailwind IntelliSense will now recognize all of the following strings:

const defaultClasses = `text-grey`;

const componentClasses = {
  default: 'text-grey',
  danger: `text-red`,
  warning: "text-yellow",
};

• https://stackoverflow.com/questions/66614875/how-can-i-enable-tailwind-intellisense-outside-of-classname

VsCode Snippets for React TypeScript

Trigger	Content
c,cc	Creates a stateless React component without PropTypes
cp,ccp	Creates a stateless React component with Typed Props using Type
cpi	Creates a stateless React component with Typed Props using interface
cm	Creates a memoized stateless React component without PropTypes
cmp	Creates a memoized stateless React component with PropTypes
us	Creates useState
uf,ufd,ufu	Adds useEffect
um	Adds useMemo
ucb	Adds useCallback
im..	Imports from React

Creating Snippets for React:

• Go to Setting -> Configure User Snippets -> type typescriptreact
• Now paste the following code or create new one from https://snippet-generator.app/

{
	"importUseState": {
		"prefix": "imus",
		"body": ["import React, { useState } from 'react'"],
		"description": "Import useState"
	},
	"importUseStateAndEffect": {
		"prefix": "imusf",
		"body": ["import React, { useState, useEffect } from 'react'"],
		"description": "importUseStateAndEffect"
	},

	"useState<T>": {
		"prefix": "us",
		"body": ["const [${1:state},set${1/(.*)/${1:/capitalize}/}] =  useState<${2:T}>(${3:init});"],
		"description": "Creates useState"
	},
	"useEffectDidMount": {
		"prefix": "ufd",
		"body": ["useEffect(() => {", "  $0", "},[]);"],
		"description": "Adds useEffectDidMount"
	},
	"useEffectUnMount": {
		"prefix": "ufu",
		"body": ["useEffect(() => {", "  $1", "return () => {", "  $2", "}},[$3]);"],
		"description": "Adds useEffectUnMount"
	},
	"useEffect": {
		"prefix": "uf",
		"body": ["useEffect(() => {", "  $1", "},[$2]);"],
		"description": "Adds useEffect"
	},
	"useCallback": {
		"prefix": "ucb",
		"body": ["const ${1:fn} = useCallback(() => {", "  ${2:fnbody};", "}, [${3:depd.}]);", ""],
		"description": "useCallback"
	},
	"useMemo": {
		"prefix": "um",
		"body": ["const ${1:fn}= useMemo(() => {", "  return ${2:fnbody};", " }, [${3:depd.}]);"],
		"description": "useMemo"
	},
	"RFC": {
		"prefix": "fc",
		"body": [
			"import React from 'react';",
			"",
			"const ${1:${TM_FILENAME_BASE}} = () => {",
			"    return (",
			"      <div>",
			"        $2",
			"      </div>",
			"    );",
			"};",
			"",
			"export default ${1:${TM_FILENAME_BASE}};"
		],
		"description": "Creates a stateless React component without PropTypes"
	},
	"RFC capitalize": {
		"prefix": "fccap",
		"body": [
			"import React from 'react';",
			"",
			"const ${1:${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}} = () => {",
			"    return (",
			"      <div>",
			"        $2",
			"      </div>",
			"    );",
			"};",
			"",
			"export default ${1:${TM_FILENAME_BASE}};"
		],
		"description": "Creates a stateless React component without PropTypes"
	},
	"RFC CustomName": {
		"prefix": "fcc",
		"body": [
			"const ${1:component} = () => {",
			"    return (",
			"      <div>",
			"        $2",
			"      </div>",
			"    );",
			"};",
			""
		],
		"description": "Creates a stateless React component without PropTypes with CustomName"
	},
	"reactStatelessWithTypePropsCustomName": {
		"prefix": "fccp",
		"body": [
			"type ${1:component}Props = {",
			"    $2",
			"};",
			"const ${1:component} = ({$3}:${1:component}Props) => {",
			"  return (",
			"    <div>",
			"      $4",
			"    </div>",
			"  );",
			"};"
		],
		"description": "Creates a stateless React component as a named function with Typed Props using Type"
	},
	"reactStatelessWithTypeProps": {
		"prefix": "fcp",
		"body": [
			"import React from 'react';",
			"type ${1:${TM_FILENAME_BASE}}Props = {",
			"    $2",
			"};",
			"const ${1:${TM_FILENAME_BASE}} = ({$3}:${1:${TM_FILENAME_BASE}}Props) => {",
			"  return (",
			"    <div>",
			"      $4",
			"    </div>",
			"  );",
			"};",
			"export default ${1:${TM_FILENAME_BASE}};"
		],
		"description": "Creates a stateless React component as a named function with Typed Props using Type with Custom Name"
	},
	"reactStatelessWithTypePropsUsingInterface": {
		"prefix": "fcpi",
		"body": [
			"import React from 'react';",
			"interface ${1:${TM_FILENAME_BASE}}Props{",
			"    $2",
			"};",
			"const ${1:${TM_FILENAME_BASE}} = ({$3}:${1:${TM_FILENAME_BASE}}Props) => {",
			"  return (",
			"    <div>",
			"      $4",
			"    </div>",
			"  );",
			"};",
			"export default ${1:${TM_FILENAME_BASE}};"
		],
		"description": "Creates a stateless React component as a named function with Typed Props using interface"
	},
	"reactMemo": {
		"prefix": "fcm",
		"body": [
			"import React, { memo } from 'react'",
			"",
			"const ${1:${TM_FILENAME_BASE}} = memo(() => {",
			"  return (",
			"    <div>",
			"      $2",
			"    </div>",
			"  );",
			"});",
			"export default ${1:${TM_FILENAME_BASE}};"
		],
		"description": "Creates a memoized stateless React component without PropTypes and ES6 module system"
	},
	"reactMemoWithProps": {
		"prefix": "fcmp",
		"body": [
			"import React, { memo } from 'react'",
			"type ${1:${TM_FILENAME_BASE}}Props = {",
			"    $2",
			"};",
			"const ${1:${TM_FILENAME_BASE}} = memo(({$3}:${1:${TM_FILENAME_BASE}}Props) => {",
			"  return (",
			"    <div>",
			"      $4",
			"    </div>",
			"  );",
			"});",
			"export default ${1:${TM_FILENAME_BASE}};"
		],
		"description": "Creates a memoized stateless React component with PropTypes"
	}
}