React Flashcards
What is React?
a front end framework that makes reusable components
What is a React element?
a component essentially a custom written DOM element
How do you mount a React element to the DOM?
What is JSX?
a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file
How does React use JSX to render components?
What is a React component?
reusable UI elements for your app
How do you define a component in React?
function name starting with a capital letter
How do you mount a component to the DOM (or “render” a component) ?
attach it to the root does a function call and returns the html element
What are props in React?
data used to communicate from parent components to child components similar to attributes
How do you use props in a component?
pass prop as a parameter and in the code block destructure it and equal it to prop
How do you pass props to a component?
it looks similar to html and you can pass it in your jsx with curly braces or quotes. any JavaScript expression inside the curly braces
How do you write JavaScript expressions in JSX?
How do you pass an event handler to a React component?
you pass the event handling function into the component as one the the props and it gets called when the event happens
What is the naming convention for event handlers?
uses the word handle
What are some custom event handler props a component may wish to define?
What is the naming convention for custom event handler props?
What are hooks in React?
useState and any other function starting with “use”
What are the “Rules of Hooks”?
only available while React is rendering, have to be declared at the top, you have to use “use”, hooks all must be called, can’t be called in loops, conditions, or other nested functions. Can only be called in React components or nested hooks.
What is the purpose of state in React?
To hold data for you between renders or function calls
Why can’t we just maintain state in a local variable?
because the variable gets refreshed to its local state
What two actions happen when you call a ‘state setter’ function?
it triggers React to render again and
When does the local ‘state variable’ get updated with the new value?
on the re-render or the next time the useState is called