React JS Reference

Mostly a place to dump react things that I cant find a home for :D

Icons

1
2
3
import { FaTimes } from 'react-icons/fa'

{/* <FaTimes style={{color:'red', cursor:'pointer'}} /> */}

Context or Store

When you find yourself passing state all the time as props.

When you dont really need a store. Yet.

RTK Query

“RTK Query is a powerful data fetching and caching tool. It is designed to simplify common cases for loading data in a web application, eliminating the need to hand-write data fetching & caching logic yourself.”

Dates

SPA Hello World

Some pointers

  • 1 folder per component, css and test
  • folders with Captial letter

Brian Holt: Complete Intro to React

1
2
3
4
5
6
7
8
9
10
npm init
npm install -D prettier                                                                 # -D means it's for development only.
npm install -D eslint eslint-config-prettier
npm install -D parcel@1.12.3
npm install react@17.0.1 react-dom@17.0.1
npm install -D @babel/core@7.12.16 @babel/preset-react@7.12.13
npm install -D eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
npm install react-router-dom@5.2.0

npm run dev

Additional things I installed when adding typescript and changing to .tsx files

1
2
3
4
npm install react-date-picker
npm i -D typescript
npm i -D @types/react
npm i -D @types/react-dom

React App

npx create-react-app is the suggested method for creating new apps

1
2
3
4
npx create-react-app my-app --template typescript
cd my-app
npm start
yarn build                                                                              # Production
1
2
3
npm i react-icons                                                                       #Icons
npm i react-router-dom@5                                                                #Router
npm install --save typescript @types/node @types/react @types/react-dom @types/jest     #If you didnt use `--typescript`, you will also then need to rename `.js` to `.tsx`
1
2
npm i redux react-redux @types/react-redux @types/redux redux-devtools-extension
npm i redux-thunk @types/redux-thunk

UI Material

1
2
npm install @material-ui/core
npm install @material-ui/data-grid

Extensions

ES7 React/Redux/GraphQL/React-Native snippets

1
rafce

Tutorials

Learn.tsx and types

Here Props belongs to Learn.tsx and is destructured in the constructor.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
type Props = {
  title: number;
  name?: string;
};

const Learn = ({ title, name }: Props) => {
  return (
    <div>
      <div>
        Hello {title} {name}
      </div>
    </div>
  );
};

export default Learn;

Use as <Learn title={1} name="Hoe" />

interface and type are the same thing, interfaces merge themself so the example below will have name and email in the IStaff interface where Staff wont compile so I think using type is safer.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
interface IStaff {
  name: string;
}

interface IStaff {
  email: string;
}

type Staff = {
  name: string;
};

type Staff = {
  email: string;
};

References