React Flashcards
What is Webpack?
It is a static module bundler for modern JavaScript applications (takes all the files and bundles them into one for your application)
What is the advantage of using Webpack (or a similar bundler)?
It internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets to serve your content from.
What is Babel
Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.
What is the advantage of using Babel (or a similar transpiler)?
So you can work on old applications using newer code/methods
What is React?
React is a way to let you build user interfaces out of individual pieces called components.
What is a React element?
A React element is what gets returned from components (a custom written DOM element)
How do you mount a React element to the DOM ?
Attaching/Appending/Rendering
What is JSX?
JSX is an extension to the JavaScript language syntax which provides a way to structure component rendering using syntax familiar to many developers commonly used in React
How does React use JSX to render components?
const root = ReactDOM.createRoot(document.getElementById(‘root’));
root.render(
<React.StrictMode>
<ComponentName></ComponentName>
</React.StrictMode>
);
What is a React component?
Independent and reusable bits of code
How do you define a component in React?
With a capital letter, and return a jsx
How do you mount a component to the DOM (or “render” a component)?
By attaching it to the root. calls the function when it sees it wrapped in <>. Takes the result of calling the function and puts it in the DOM.
What are props in React?
A type of object where the value of attributes of a tag is stored
How do you use props in a component?
By passing them as an attribute and setting their value as the value of the attribute
How do you write JavaScript expressions in JSX?
Within curly braces
How to you pass an event handler to a React component?
As an argument/prop
What is the naming conventions for event handlers?
Event names are written in camelCase
What are some custom event handler props a component may wish to define?
onClick, onSubmit, onChange
What is the naming convention for custom event handler props?
Usually with the prefix on*
What is an eventHandler?
A function that occurs when something is activates it
What is an eventHandler?
A function that occurs when something is activates it
What are hooks in React?
useState or any other function starting with “use”. Hooks are special functions that are only available while React is rendering.
What are “Rules of Hooks”? (if necessary, re-read the “Pitfall” box in State)
Only call hooks at the top level. Only call hooks from react functions. Call hooks from react function components. Call hooks from custom hooks.
What is the purpose of state in React?
To contain data or information about the component
Why can’t we just maintain state in a local variable?
It would be gone after it gets re-rendered
What two actions happen when you call a state setter function?
It will update the variable and trigger react to render the component again
When does the local state variable get updated with the new value?
After useState has been called
How do controlled components differ from uncontrolled components?
Controlled components refer to components that have their state and behavior controlled by the parent component
What are some advantages of using uncontrolled components?
You don’t have to declare state
Which style do you prefer?
controlled
What two props must you pass to an in put for it to be “controlled”?
useState
What are some popular npm packages for creating forms in React?
react final form
What are some advantages of using controlled components?
You can have a live search bar. You do things with that individual value
When would we want to create a list of React components?
Whenever you need to have lists coming from a database or from a user
Why is it important for React components to be data-driven?
So that the only thing that changes is the data
Where in the component code would a list of React components typically be built?
Inside the function body
What Array method is commonly used to create a list of React components?
.map
Why do components in a list need to have unique keys?
Because react need to keep track incase they want to reorder or remove
What is the best value to use a “key” prop when rendering lists?
A number, must be in the outer most element
What are two ways React components can interact?
Passing properties from a parent component to children components, and by responding Events from children components
How can multiple React components share state?
By removing state and passing components to their closest parent and then passing it down to them via props
What are the steps to “lift state up”?
When would you want to lift state up?
When is a component “mounted” to the DOM?
What is a React Effect?
When should you use an Effect and when should you not use an Effect?
When do Effects run?
After the page renders, ands runs as things change
What function is used to declare an Effect?
useEffect
What are Effect dependencies and how do you declare them?
When an effect should run and declare them in the array
Why do you want to clean up from an Effect?
How do you clean up from an Effect?
When does the cleanup function run?
What is the purpose of React “context”?
Allows you to share information to any component, by storing it in a central place and allowing access to any component that requests it. (must be a child)
What values can be stored in context?
Information to any component
How do you create context and make it available to the components?
import { createContext } from ‘react’;
export const AppContext = createContext();
How do you access the context values?
Through props with the help of useContext method in React
When would you use context? (in addition to the best answer: “rarely”)
When building large applications
What is React custom hooks?
Reusable functions that a React JS software developer can use to add special and unique functionality to the React applications
When are custom hooks useful? When are they not required?
When you need to reuse more than a few times
What is the syntax (or naming convention) for writing a custom hook?
Starts with the word “use” and may call other Hooks
How do you call a custom hook?
Same way as a normal hook
When do custom hooks execute?
Every time the component is rendered.
