React

📄️ Arrow Functions

Arrow functions were introduced to JavaScript in 2015 with the introduction of ES6

📄️ What Are Components?

Components at their core are just functions. They are reusable pieces of code that represent a part of an overall user interface.

📄️ How To Create a React Application?

Image of react logo

📄️ Elements

image breaking down components & elements https://miro.medium.com/max/1024/1*rXrpYfSaJClrlNFaThFJrg.png

📄️ React Hooks

react hook image https://tsh.io/wp-content/uploads/2020/10/react-hooks-best-practices-lead_.jpg

📄️ JavaScript XML (JSX)

React router image https//dev-to-uploads.s3.amazonaws.com/uploads/articles/q0lj87mz6whntv2zbxdm.png

📄️ React Router

The React router is how a developer can navigate in between individual pages. First the command npm i -D react-router-dom must be run to allow the use of the React router.

Spread operators were introduced to JavaScript in 2015 with the introduction of ES6. Spread operators enable a developer to quickly push all of an existing array or object into another array or object. Observe the examples below

📄️ Ternary Operator

ternary operator cheat sheet image https//dev-to-uploads.s3.amazonaws.com/uploads/articles/rn8ecbvghqyulclj0m42.png

📄️ TypeScript (TS)

TS logo image https://cdn.thenewstack.io/media/2022/01/10b88c68-typescript-logo.png

📄️ useCallback Hook

Sometimes, a function will cause a component to needleslly re-render. This can waste memory resources. Here is an example of a program that needlessly re-renders:

📄️ useContext Hook

Sometimes, a prop will need to be passed throughout numerous components so that the value can be used in only the last component. Without a useContext hook, this is traditionally done through a process called prop drilling where the state is passed down through each arrow function even though it is only needed in the first and last arrow functions. Below is an example of passing state between functions in this way:

📄️ UseEffect Hook

The useEffect hook is used to run a "side effect" or function whenever the developer decides.

📄️ useMemo Hook

Occasionally in React, a developer will create a funtiton that is very costly on resources. When ran, this function will slow down the entire application, however the function is necessary to the application. To have the application run as efficiently as possible, the developer can take advantage of a useMemo hook so that the function will only run when a specified dependency has changed. Observe the example below: