React

Question 1

What is React?

Answer 1

A JavaScript library used in web development to build interactive elements on a website using UI components.

Question 2

What makes React so great?

Answer 2

With React, we can setup data separately, iterate over the data, return the elements we want to render in the browser, and inject data dynamically.

Question 3

Component

Answer 3

Independent chunks of user interfaces. There is at least one. Created with a function.

Question 4

node_modules (folder)

Answer 4

contains dependencies the project is using. Also contains sub-dependencies.

Question 5

public (folder)

Answer 5

where the index.html is that displays the webpage.

Question 6

src (folder)

Answer 6

the brain of the application. Where all the work is performed in the application. src/index.js is the JavaScript entry point.

Question 7

.gitignore (file)

Answer 7

specifies which files source control (Git) should ignore

Question 8

package.json (file)

Answer 8

every Node.js project has this file and it contains information about the project. For example, a list of dependencies and scripts.

Question 9

package-lock.json (file)

Answer 9

a snapshot of the entire dependency tree. Shows the main dependencies the project is using and the scripts. This shows all the dependency packages with specific versions so when someone uses this project, they’ll have the exact dependency tree with all the same dependency versions.

Question 10

JSX (JavaScript XML)

Answer 10

A syntax extension to JavaScript which allows you to write HTML in React. JSX converts HTML tags into react elements. So you do not have to use HTML methods such as createElement() and/or appendChild(). You are not required to use JSX, but it makes it easier to write React applications. You can only have one parent element in JSX.

Question 11

Initial Render

Answer 11

In a React app, the initial render is the first time the component tree is rendered to the DOM. This happens when the application first loads, or when the root component is rendered. This is known as “mounting” the components. When the component us unmounted and re-mounted, it will also be initially rendered.

Question 12

re-render

Answer 12

This happens when the component’s state or props change and the component needs to be updated in the DOM to reflect the changes. Re-renders also happen when the parent element re-renders. React uses a virtual DOM to optimize the process of updating the DOM so only the necessary changes are made.

Question 13

<React.Fragment>
</React.Fragment>

Answer 13

lets you group a list of children without adding extra nodes to the DOM. You won’t see this tag in inspect element. The shorthand for this is <> </>

Question 14

className (attribute)

Answer 14

attribute that is used since “class=’xxx’ “ will not work.

Question 15

react dev tools (chrome extension)

Answer 15

You can see the component tree when opening inspect element > Components (tab)

Question 16

import “./xxxx.css” (code)

Answer 16

this allows you to import a css file into the .js file. You do not have to do this with .js files.

Question 17

expression vs statement

Answer 17

an expression returns a value and statement does not. In JSX, the value inside {} must be an expression.

Question 18

props (property)

Answer 18

Props are used to store data that can be accessed by child components. You provide the prop where you render the component. Ex: <List people={person} />

Question 19

child prop

Answer 19

a special prop automatically passed to every component. it is used to display whatever you include between the opening and closing tags when invoking a component.

Question 20

key prop

Answer 20

a mechanism for controlling component instances. You’ll need to set the key prop to unique values. Ex. id: 0, Id: 1…

Question 21

events

Answer 21

For events, you’ll need three things. An element, an event (onClick, onChange, etc), and a reference or callback function to do something.

Question 22

prop drilling

Answer 22

in react, you can only pass props down from parent to child.

Question 23

optimization

Answer 23

when files (images, etc) are stored in the src folder, create-react-app optimizes the files when the react app is built. Optimization doesn’t happen when files are stored in the public folder.

Question 24

npm run build (cmd)

Answer 24

stop the dev server with “ctrl + c” > run “npm run build” > a build folder will be created with static files.

Question 25

rmdir /Q/S node_modules

Answer 25

windows cmd to remove the node_modules directory.

Question 26

JSX

Answer 26

a JavaScript extension syntax used in React to easily write HTML and JavaScript together.

Question 27

list of data

Answer 27

You will need to specify an “id: INTEGER” when rendering a list of data.

Question 28

hooks

Answer 28

Functions React provides to help complete various tasks.
RULES:
- React and custom hooks start with the keyword “use…”.
- The component name must be uppercase.
- The hook must be invoked in the component body.
- You cannot call hooks conditionally (ex. Within an if statement).
- Set functions don’t update the state immediately.
ex. setState(NEW_VALUE)
console.log(state) // This will still show the original value

Question 29

State (hook)

Answer 29

A special function that takes an initial state as an argument and returns an array with two elements. “state” is the default value, and “setState” is the function that controls the “state” value. When setState() is invoked, it preserves the value between renders and re-renders the page.

Syntax: “const [state, setState] = useState(INITIAL_STATE)”.
Naming convention for boolean: [isState, setIsState]

Additional note: When using the “setState” function, you can add a callback function to access the current state value as well as the new state value as soon as the current state value is changed. The first parameter in the callback function is automatically the current state value. Example:
setState((currentStateValue) => {
const newStateValue = currentStateValue + 1;
console.log(newStateValue);
return newStateValue;
})

Question 30

Effect (hook)

Answer 30

Allows you to perform side effects outside of the component.
- By default, it runs on each render (initial and re-render).
- It takes two arguments (second optional)
- first argument = a callback function
- second argument = dependency array
- callback functions can’t return a promise (so you can’t make it async)
- if a dependency array is empty [], it will only run on the initial render.
- If an element is passed into the dependency array, and the value changes, useEffect will run.

Syntax: “useEffect(callback function, [dependancy_array])”.

Side effects such as - fetching data, updating the DOM, event listeners, timers, etc.

Question 31

useEffect (hook) - run on initial render

Answer 31

“useEffect(callback function, [])” the blank array makes it so the hook is only run once.

Question 32

useEffect (hook) - cleanup function

Answer 32

Within useEffect, you can add a “return () => {code_here}” to prevent memory leaks by cleaning up useEffects. Every time you create a side effect, you want to add a clean-up function. The return callback is called when the component is unmounted.

Example - the clean-up function is within the return callback:
useEffect(() => {
window.addEventListener(“resize”, checkSize);
return () => {
window.removeEventListener(“resize”, checkSize);
};
}, []);

Question 33

npx create-react-app NEW_APP_NAME (cmd)

Answer 33

cmd tool to create single-page React applications officially supported by the React team. Another option to start a react app is using ViteJS (see vitejs.dev flashcard)

Question 34

vitejs.dev (pronounced veet)

Answer 34

A website that provides another way to implement create-react-app faster. See https://github.com/john-smilga/react-course-v3/blob/main/01-fundamentals/README.md > at “Vite Install” and “Vite Setup” for how to use it. You MUST name all .js files .jsx

Question 35

Display elements conditionally in React

Answer 35

You cannot use if statements since they don’t return a value. You need to use short-circuit evaluation or a ternary operator.

Short-circuit evaluation is good for showing no items or one item.

Ternary operator is good for showing one item or another item.

Question 36

Why use an anonymous function for event handlers?

Answer 36

If you don’t wrap it in an anonymous function, the function will be called on the component mount.

Example:
button onClick= { add(1, 2) }
VS
button onClick { () => add(1, 2) }

The first one will call the function when the component is mounted. The second will call the function when the button is clicked.

Question 37

batching

Answer 37

Refers to the process of grouping multiple state updates into a single update. This is useful because it allows React to optimize the rendering of your components by minimizing the number of DOM updates needed.

Question 38

auto-batching

Answer 38

A default technique react uses to group state updates that occur within the same event loop into a single update. This means if you call the state update function multiple times in a short period of time, React will only perform a single re-render for all the updates. Example: When you call “useState(xx), useState(xx)” multiple times in the same event loop.

Question 39

react icons

Answer 39

To access react icons - https://react-icons.github.io/react-icons
Install the react-icons library.

1. find an icon you want and then click on it to copy the component name.
2. In your code, import the icon.
   - “import { ICON_NAME } from ‘react-icons/XXX’”
3. Reference the icon as a component <ICON_NAME></ICON_NAME>

You can style it by adding a className to the component or target it since it is returned as an svg tag.

Question 40

Passing props

Answer 40

When you pass prop(s) from a parent to child- it is passed as a single object. In the child prop, you need to destructure the single prop or reference the property.