React Flashcards
What is React?
A JavaScript library for building user interfaces
What is a React element?
It is the basic building block in a react application, it is an object representation of a virtual DOM node. React Element contains both type and property
How do you mount a React element to the DOM?
const create = React.createElement(
‘h1’,
null,
‘Hello, React!’
);
const container = document.querySelector(‘#root’);
ReactDOM.createRoot(container).render(create);
What is a React component?
a React component is a JavaScript function that you can sprinkle with markup.
How do you define a function component in React?
With function Profile() { } you define a JavaScript function with the name Profile.
How do you mount a component to the DOM?
const container = document.querySelector(‘#root’);
const root = ReactDOM.createRoot(container);
root.render(variable);
What are props in React?
standardized way to pass arguments
How do you pass props to a component?
list properties
How do you write JavaScript expressions in JSX?
curly brackets
What is the purpose of state in React?
A state variable to retain the data between renders.
A state setter function to update the variable and trigger React to render the component again.
How to you pass an event handler to a React element?
<button onClick={handleClick}>{props.text}</button>;
What are controlled components?
An input like <input></input> is uncontrolled. Even if you pass an initial value like <input></input>, your JSX only specifies the initial value. It does not control what the value should be right now.
What two props must you pass to an input for it to be “controlled”?
value, onChange
What Array method is commonly used to create a list of React elements?
filter() and map()
What is the best value to use as a “key” prop when rendering lists?
something unique (don’t use array index - order may change)
Data from a database: If your data is coming from a database, you can use the database keys/IDs, which are unique by nature.
Locally generated data: If your data is generated and persisted locally (e.g. notes in a note-taking app), use an incrementing counter, crypto.randomUUID() or a package like uuid when creating items.
What is a React Effect?
function that will execute in special cases
When should you use an Effect and when should you not use an Effect?
when you have actions that need to be executed outside of rendered user actions/events
When do Effects run?
1) after mount/render
2) when dependency changes
What function is used to declare an Effect?
useEffect
parameters: callback function, dependency array
What are Effect dependencies and how do you declare them?
How do you clean up from an Effect?
returning a function from effect callback
When does the clean up function run?
1) before the unmount
2) runs when things change and before it does, cleans up
When does React call a component’s componentDidMount method?
This method is called during the Mounting phase of the React Life-cycle i.e after the component is rendered.
Name three React.Component lifecycle methods.
Mounting, Updating, and Unmounting.
How do you pass data to a child component?
you do this by using props.
