React Flashcards
What is React?
A JavaScript library for building user interfaces
What is a React element?
Not a DOM object but just a plain JavaScript object
How do you mount a React element to the DOM?
What is Babel?
JavaScript Compiler
back conscripting javascript code
What is a Plug-in?
software component that adds a specific feature to an existing computer program
What is a Webpack loader?
Loaders are transformations that are applied to the source code of a module
How can you make Babel and Webpack work together?
babel loader
What is JSX?
it is a syntax extension to JavaScript that produces React elements
Why must the React object be imported when authoring JSX in a module?
JSX creates react elements and so it relies on React object to be able to produce the element
JSX = React.createElement
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
Babel loader and other plugins
What is a React component?
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation
How do you define a function component in React?
Literally JavaScript functions
function CustomButton( ) {
return Click Me!< /button >;
}
How do you mount a component to the DOM?
query select for element to append to
create react.root
render method with function component element as argument
What are props in React?
props are object arguments with data that are accepted by function components to return a React element
How do you pass props to a component?
Define a new element with the function component and define the specified property to use it
How do you write JavaScript expressions in JSX?
< button > { expression } < /button >
curly braces
What is the purpose of state in React?
Data model for keeping track of values that change over time
How to you pass an event handler to a React element?
Pass events as props
i.e.
onClick = {this.handleClick}
What are controlled components?
With a controlled component, the input’s value is always driven by the React state
What two props must you pass to an input for it to be “controlled”?
onChange Event Handler and value property
What Array method is commonly used to create a list of React elements?
map method
What is the best value to use as a “key” prop when rendering lists?
When does React call a component’s componentDidMount method?
componentDidMount() is invoked immediately after a component is mounted (inserted into the tree)
Name three React.Component lifecycle methods.
componentDidCatch( )
componentDidUpdate( )
componentDidMount( )
How do you pass data to a child component?
