React.js Flashcards
What is React?
A JS library for building user interfaces
However, Tim believes it to be a framework moreso
What is a React element?
A plain object that virtually describes the DOM nodes that a component represents
How do you mount a React element to the DOM?
ReactDOM.render ( )
Or
ReactDOM.createRoot( )
Then root.render
What is JSX?
syntax extension to JS
produces React elements
Why must the React object be imported when authoring JSX in a module?
JSX will be creating a React object
under the hood it is actually React.createElement( )
How can you make Webpack and babel work together to convert JSX into valid JS?
babel loader
and
@babel/plugin-transform-react-jsx
What is a react component?
similar to a JS function
They accept arbitrary inputs (called props) and return React elements describing what should appear on the screen
How do you define a function component in React?
function FunctionName (props) {
return <h1>Hello, {props.name}</h1>
}How do you mount a component to the DOM?
React.render(, parent)
What are props in React?
arguments passed into React components that are objects
How do you pass props to a component?
propName=”propvalue”
How do you write JS expressions in JSX?
{expression}
has to be an expression
How do you create a “class” component in React?
class ComponentName extends React.Component {
render ( ) {
return <h1>Hello, {this.props.name}</h1>;
}
}How do you access props in a class component?
using {this.props}
What is the purpose of state in React?
to keep track of values that change over time
How do you pass an event handler to a React element?
onEvent={this.eventMethod}
what Array method is commonly used to create a list of React elements?
map()
What is the best value to use a “key” prop when rendering lists?
a unique id that is stable and specific amongst its siblings
What are controlled components?
those in which form data is handled by the component’s state.
What two props must you pass to an input for it to be “controlled”?
value=”valueOfSomething”
onchange=”value”
When does React call a component’s componentDidMount method?
immediately invoked after a component is mounted (inserted into the tree).
Name three React.Component lifecycle methods:
componentDidMount()
componentDidUpdate()
componentWillUnmount()
render()
How do you pass data to a child component?
pass a “prop”
