React Flashcards
What is React?
React is a declarative, efficient, and flexible JavaScript library for building user interfaces
What is a React element?
React elements are plain objects that describe what you want to see on the screen.
How do you mount a React element to the DOM?
Using the ReactDOM.render( ) method:
ReactDOM.render(element, container[, callback])
ReactDOM.render( ) method takes a JSX expression, creates a corresponding tree of DOM nodes, and adds that tree to the DOM
What is JSX?
JSX is a syntax extension to JavaScript that produces React “elements”
Why must the React object be imported when authoring JSX in a module?
Because the React library must be in scope from your JSX code. It is not used explicitly but the compiler (Babel) uses it when converting JSX to React.createElement( )
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
By installing webpack, webpack-cli, babel-loader, @babel/core, @babel/plugin-transform-react-jsx to your packge.json devDependencies
What is a React component?
Components are like JavaScript functions. 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?
The simplest way to define a component is to write a JavaScript function. You can also use an ES6 class to define a component.
How do you mount a component to the DOM?
Using ReactDOM.render( ) method - use the function name as the type
What is the difference between a library and a framework?
A library is code that you call (lodash is a library, you call it when you want it to return something.)
A framework is code that is called by the framework (You do not call your own components, React calls your components.
What are props in React?
JSX attributes and children as a single object
How do you pass props to a component?
Add the prop to your JSX like you would add an attribute to an HTML tag
How do you write JavaScript expressions in JSX?
You can put any valid JavaScript expression (not statements) inside curly braces in JSX
e.g: {2 + 2} , {user.firstName} , {formatName(user)} etc.
How do you create “class” component in React?
To define a React component class, you need to extend React.Component and you must define the render( ) method.
Begin with the class keyword followed by the className followed by extends React.Component
e.g: class CustomButton extends React.Component {
render( ) {
return {this.props.text};
}
}
How do you access props in a class component?
Use this to access props in a class component.
e.g: this.props.propName
What is the purpose of a state in React?
When the state object changes, the component re-renders depending on the state
So the component can render different things depending on the state
How do you pass an event handler to a React element?
By assigning it to a prop on the react element - the prop starts with on & is in camelCase - the event handler is in camelCase
What is the virtual DOM?
The virtual DOM is a representation of a DOM object. React can save the virtual DOM so when the state updates and there is a re-render - react compares the old version and the new version and only replaces any differences (rather than deleting and re-creating the whole thing)
What are controlled components?
An input form element whose value is controlled by React in that the value prop is saved in and based on the components state.
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?
map ( ) method
What is the best value to use as a “key” prop when rendering lists?
The best value for a “key” prop is a string that uniquely identifies a list item among its siblings (like an ID). Indexes are not recommended.
When does React call a component’s componentDidMount method?
componentDidMount( ) is invoked immediately after a component is mounted (inserted into the tree).
If you need to load data from a remote endpoint, this is a good place to instantiate the network request.
Name three React.Component lifecycle methods.
render( ), constructor( ), componentDidMount( ), componentDidUpdate( ), componentWillUnmount( ),
How do you pass data to a child component?
Via props
Why React?
React is fast and can handle complex updates and still feel quick and responsive.
React is modular - Instead of writing large, dense files of code, you can write many smaller, reusable files. React’s modularity can be a beautiful solution to JavaScript’s maintainability problems.
React is scalable. Large programs that display a lot of changing data are where React performs best
Is a JSX element the same thing as an HTML element?
No A JSX element is not the same thing as an HTML element. A JSX element is a description of what we want to see on the page.
JSX elements are treated as JavaScript expressions and can go anywhere a JavaScript expression goes - saved to a variable, passed in a function, stored in an object or array…
