React Flashcards
What is React?
a JavaScript library that is used for building user interfaces specifically for single-page applications
What is a React element?
an object that gets returned from a React components and it describes what you want to see on the screen
How do you mount a React element to the DOM?
ReactDOM.render(reactElement, domContainerNode)
What is JSX?
a syntax extension to JavaScript to describe what the UI should look like
Why must the React object be imported when authoring JSX in a module?
JSX is syntactic sugar for converting the “prettified” code into
React.createElement() and ReactDOM.render() methods after it’s compiled by Babel. Therefore, React & ReactDOM would need to be in scope
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
use Babel plug-in @babel/plugin-transform-react-jsx
What is a React component?
- Components are like JavaScript functions that can take in “props” and return a React element to be rendered to the page.
- 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?
by writing a JavaScript function and returning a React element (named with a capital letter)
How do you mount a component to the DOM?
function Welcome() {
return <h1>Hello</h1>;
}
ReactDOM.render(
;
document.getElementById(‘root’)
);
What are props in React?
Props are objects passed as arguments into React components
How do you pass props to a component?
erm
How do you write JavaScript expressions in JSX?
surround the JavaScript code in { } brackets
How do you create “class” component in React?
extend React.Component and add render() method
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
How do you access props in a class component?
using the “this” keyword
What is the purpose of state in React?
-to represent information about the component’s current situation
How do you pass an event handler to a React element?
erm
- event = {javascript expression}
- properties
What Array method is commonly used to create a list of React elements?
map
What is the best value to use as a “key” prop when rendering lists?
- ideally, an ID from your data
- if not available, use anything that would uniquely identify the item from its siblings (i.e. a name)
- as a last resort, use item index
What are controlled components?
a component that renders input form elements (input, textarea, select,…) and controls them by keeping the form data in the component’s state
What two props must you pass to an input for it to be “controlled”?
value={ }
onChange={ }
