MVC (Model-View-Controller): MVC is a design pattern commonly used in software development to organize the structure of an application. It divides an application's components into three main parts: Model: The Model represents the data and …

A call signature in TypeScript is a way to define the type of a function or method within an interface or type. It specifies the shape of a function, including the parameter types and the return type. This allows you to describe the signat…

In TypeScript, an index signature (also known as an indexable type) allows you to define the types of properties that are not known in advance but can be accessed using square bracket notation. Index signatures are particularly useful when…

A design pattern used in React that is a function that takes in a component and returns a new component. (getting all this from ChatGPT) import React from 'react'; function Greeting(props) { return <h1>Hello, {props.name}!</h1>; } export default Gr…

type ExampleComponentProps<T extends React.ReactElement> = { children: T; }; const ExampleComponent = <T extends React.ReactElement>({ children }: ExampleComponentProps<T>): React.ReactElement => { if ('onClick' in children.props) { console.log("children has an onClick prop"); } return <div>{childre…</div></t></t></t>

-Unit Testing ・The testing of individual blocks of an application such as a class, function, or component. -Integration Testing ・Testing a combination of units and ensuring they work together. -E2E Testing ・Testing the entire applicatio…

package.json "scripts": { "prettier": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json}'", "lint": "eslint --fix . --ext js --ext jsx", "format": "eslint --fix . --ext js --ext jsx && prettier --write --ignore-path .g…

useEffect(() => { setTimeout(() => { // preload const img = new Image(); img.src = image; // setLoaded to true on load and display image img.onload = () => { setLoaded(true); }; }, (idx + 1) * 300); }, []); ... loaded ? ( // display image )

this is a note on what goes on when a component renders and re-renders notes are from watching React Render Tutorial - YouTube Rendering has 2 phases: Initial Render: Render phase: -start at root -goes down leaf components -use createEleme…

import React, { createContext, Dispatch, useContext, useReducer } from "react" const hogeData = {}; export const HogeContext = createContext<any>(hogeData) export const HogeDispatchContext = createContext<Dispatch<any>>(() => { }) export const HogeContextPro</dispatch<any></any>…

event.target.value.match(/^[A-Za-z0-9]+$/)

var newArray = array.reduce(function(result, hoge) { if (some condition) { result.push(hoge); } return result; }, []); or var newArray = array.filter(function(hoge) { if (some condition) { return hoge; } });

import React, { useRef, useEffect } from "react"; export default SomeFunctionComponent(props) { const elementRef = useRef(null); useEffect(() => { function handleOutsideClick(event) { if (ref.current && !ref.current.contains(event.target))…

*context api example for me, myself, and i 2 ways to use context api with inital value hoge.contex.jsx import { createContext } from ‘react’ import HOGE_DATA from ‘./hoge.data.js’ // some data with values const HogeContext = createContext(…

Just a lil note on unit conversion from relative to pixels ・Each property has an itinital value if not declared or there is no inheritance ・Browsers specify a root font-size for each page(usually 16px ) ・Percentages and reltavie units a…

A lil note on how to make a new repository on GitHub of an existing local project Create a new repository on GitHub. Open your terminal cd to the project you want to create on Github Initialize the local directory as a Git repository git i…

*useState notes for me, myself, and i use useState to add state to function components class component and function component comparison class component class Example extends React.Component { constructor() { super(); this.state = { displa…

*redux-saga notes for me myself and i Redux-saga are for asynchronous actions with side-effects install npm i redux-saga root.reducer.js import { combineReducers } from 'redux'; import { persistReducer } from 'redux-persist'; import userRe…

*Some TypeScript notes for me, myself, and I Typescript adds types write cleaner code avoid unneccessary error install npm install --save-dev typescript compile .ts to .js command line: tsc hoge.js or command line: tsc hoge.ts --watch or t…

Redux Thunk middleware allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. install npm install redux-…

*Saves redux state to local or session storages Local Storage ・Data is stored in tabs and windows ・The data will not expire. ・Data remains after browser restart Session Storage ・Data is stored in current tab only ・Data remains after b…

*to memoize state so that every time mapStateToProps is called it does not re-render components that do not need to be re-rendered Install reselect npm i reselect Create selectors hoge.selectors.js import { createSelector } from 'reselect'…

Provider to index.js index.js import { Provider } from 'react-redux'; import { store } from './redux/store.js'; <Provider store={store}> <App /> </Provider>, Connect to components hoge.js *use the state or dispatch as props of the component const mapStateToProps = (state) => ({ ho…

Creating ActionTypes hoge.types.js export const HogeActionTypes = { HOGE: 'HOGE', }; Creating Actions (for dispatching) hoge.actions.js import HogeActionTypes from './hoge.types.js'; export const hoge = () => ({ type: CartActionTypes.HOGE,…

Installing Redux npm i redux redux-logger react-redux Creating store store.js import { createStore, applyMiddleware } from 'redux'; import logger from 'redux-logger'; import rootReducer from './root-reducer.js'; const middleWares = [logger…

*redux notes Redux Redux Introduction ・state management ・get rid of all states in components ・put them in a store and pass the state to the component that needs it Why Redux ・Good for managing large state ・Useful for sharing data betw…

*gibberish notes on routing Routing - React is just a UI library - Angular comes with routing (framework) - Before SPA had a problem with back button (url did not change) - Browser has History API - SPA routing libraries use history API to…

const provider = new firebase.auth.GoogleAuthProvider(); provider.setCustomParameters({ prompt: 'select_account' }); export const signInWithGoogle = () => auth.signInWithPopup(provider); - import { signInWithGoogle } from '../hoge/hoge/fir…

- add hoge.svg in assets folder (if you have one) in react project - import { ReactComponent as Logo } from '..../assets/hoge.svg' - < Logo /> (use as component)

*Just some gibberish notes I took about React The Birth of React * came out in 2013 * before there was JS, HTML, CSS * browsers worked differently so had to implement it on JS * JQuery worked through all browsers * BackBonejs organize big …