React Flashcards
What is React?
A framework that uses components and state to only update sections of a site that change without rerendering other segments. Helps us build and manage UIs.
What is a React element?
An object. These elements make up components.
How do you mount a React element to the DOM?
Use the .render method attached to the object to render to, passing in the node to render as an argument
What is JSX?
A syntax extension to JavaScript that describes what the UI should look like.
Why must the React object be imported when authoring JSX in a module?
JSX compiles into React.createElement —> so you need React.
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
Set up the transform-react-JSX plugin for babel in your webpack.config.js file and build the project with webpack.
What are components?
Independent and reusable bits of code that define portions of your UI.
How do you define a function component in React?
Use the function keyword, ‘TitleCase’ function name, {return <element> }</element>
All components first letter must be…
Capitalized —> to distinguish from other actual html elements when you render it
How do you mount a component to the DOM?
Use the render method attached to the root object passing in the component you’d like to render as an argument.
When importing ReactDOM —> it should always be form…
‘react-dom/client’
This is because there is a server side react-DOM, we don’t want that one
What are props in React?
They’re objects —> props is short for properties.
How do you pass props to a component?
Pass it as an argument to the function that creates that component. They’re passed in by the attributes on the component itself.
How do you write JavaScript expressions in JSX?
Surround the expression in { }
How do we add the watch script for webpack?
Under scripts —> “webpack —watch —mode=development —devtool=source-map
How do you create class
components in React?
class “ClassName” extends React.Component { render( ) {render-code-here
} }
How do you access props in a class component?
Use this.props.”property-to-access”
What is the purpose of state in React?
It’s for updating the UI after your initial render.
How do you pass an event handler to a React element?
Give the event element the attribute event-listener-name
: function-to-call
Why can we never call this.setState( ) from render?
Render calls setState, which will call render, which will loop infinitely forever
Is setState synchronous or asynchronous?
It’s asynchronous —> if you try to use state right after setState( ) it hasn’t set the state yet
To check the most updated version of state and render, console.log the most current version in…
Render( )