REACT Flashcards
What is Webpack?
Webpack, grabs only the files the web browser needs and bundles them for quick easy use for the browser.
What is the advantage of using Webpack (or a similar bundler)?
Make things quicker and less downloading.
What is Babel?
Converts modern javascript into older javascvript.
What is the advantage of using Babel (or a similar transpiler)?
Allows us to develop javascript with modern rules but still allow older browsers to run.
What is React?
A framework to create reusable and interactive components.
What is a React element?
Custom written DOM element or group of.
How do you mount a React element to the DOM?
ReactDom
What is JSX?
JSX allows you to write, html in your javascript.
How does React use JSX to render components?
React runs all the fance DoM javascript methods.
What is a React component?
A html element or group of elements.
How do you define a component in React?
In a function with uppercase name that returns JSX.
How do you mount a component to the DOM (or “render” a component)?
By calling a function that returns JSX and is capital letters.
How to you pass an event handler to a React component?
Through it’s props
What is the naming convention for event handlers?
handleWhatever
What are some custom event handler props a component may wish to define?
Whatever they need?
What is the naming convention for custom event handler props?
onClick
What are hooks in React?
Any function starting with use that run while React is rendering.
What are the “Rules of Hooks”?
They must be called at the top level of a components or inside other hooks.
What is the purpose of state in React?
Maintain a variable as a state variable through renders.
Why can’t we just maintain state in a local variable?
Local variable do not persist through a render and changes to a variable don’t trigger a render. Also to make a component reusable you need a variable for each one.
What two actions happen when you call a state setter function?
Triggers a render, and updates a ‘cache’ or future value of the variable for after the render.
When does the local state variable get updated with the new value?
After the render is done.
How do controlled components differ from uncontrolled components?
The parent controls the child, or uncontrolled does it itselfs.
What are some advantages of using uncontrolled components?
Don’t have to maintain states, can be a lot of work with a lot of fields.
What are some advantages of using controlled components?
Allows interactivity with other components.
Which style do you prefer?
Controlled.
What two props must you pass to an input for it to be “controlled”?
A value and a onChange prop.
What are some popular npm packages for creating forms in React?
React Hook Form, Formik, and React Final Form.
When would we want to create a list of React components?
When you need dynamic lists. You want to organize your lists or filter data.
Why is it important for React components to be data-driven?
Make reusable components.
Where in the component code would a list of React components typically be built?
What Array method is commonly used to create a list of React components?
array.map
Why do components in a list need to have unique keys?
So that we can make the list dynamic to remove and change and reorder the list and let react track them.
What is the best value to use as a “key” prop when rendering lists?
An ID attached to the data.
When is a component “mounted” to the DOM?
When a component appears on the page the first time.
What is a React Effect?
A block of code that runs after the page renders.
When should you use an Effect and when should you not use an Effect?
When your running code outside of React.
When do Effects run?
After the page renders. or if its dependencies change.
What function is used to declare an Effect?
useEffect
What are Effect dependencies and how do you declare them?
To help tell an effect to run. pass them as a second argument as an array.
Why would you want to clean up from an Effect?
Release resources from the effect.
How do you clean up from an Effect?
Resetting variable, closing timers.
When does the cleanup function run?
After the effect runs.
How can useEffect be used to load data for a component?
Loading data after everything else has been render.
What browser function can be used to make HTTP requests to a server in React?
fetch.
How do you use useEffect to load component data just once when the component mounts?
Set the the dependencies to []. An empty array.
How do you use useEffect to load component data every time the data key changes?
Set the data key as a dependency.
In a large-scale production app, what are some better alternatives for loading and managing backend data?
Packages that manage it for you.
What is the purpose of React “context”?
To share data with different components from a common ancestor without having to pass props at each level
What values can be stored in context?
Objects? Any data.
How do you create context and make it available to the components?
create a context and wrap <AppContext.Provider> around the parent component you want to hold the context.</AppContext.Provider>
How do you access the context values?
assign the values from useContext to a variable in the component after passing the context to the <AppContext.Provider></AppContext.Provider>
When would you use context? (in addition to the best answer: “rarely”)
Managing user login data/permissions, or a common color theme i.e. user switched to dark mode.
What is a React custom hook?
A hook that you write, that starts with use and should probably call other hooks.
When are custom hooks useful? When are they not required?
To reduce code duplication. If it doesn’t call another hook it doesn’t need to be another hook.
What is the syntax (or naming convention) for writing a custom hook?
Write a function that starts with use*****
How do you call a custom hook?
When do custom hooks execute?
