React.js Flashcards
What is React?
a JavaScript library for creating user interfaces
What is a React element?
object
How do you mount a React element to the DOM?
ReactDOM.render()
What is JSX?
syntax extension to JavaScript (JS plus some more).
-Transpilation step where JSX gets transpiled into JS
Why must the React object be imported when authoring JSX in a module?
In order to use the methods on the react object (ex. react.createElement)
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
Use babel loader and the plugin @babel/plugin-transform-react-jsx
What is a React component?
a JS function that accepts props as inputs and returns react elements
How do you define a function component in React?
function definition or a class, capitalize the names
How do you mount a component to the DOM?
ReactDOM.render()
What are props in React?
- Props is the shorthand for Properties in React.
- Props are read-only components which must be kept pure i.e. immutable.
- Props are always passed down from the parent to the child components throughout the application.
- A child component can never send a prop back to the parent component. This helps in maintaining the unidirectional data flow and are generally used to render the dynamically generated data.
How do you pass props to a component?
as a key=”value” pair inside react element
How do you write JavaScript expressions in JSX?
{ }
What Array method is commonly used to create a list of React elements?
array.prototype.map
What is the best value to use as a “key” prop when rendering lists?
ID number or name from data that distinguishes it from another piece of sibling data
How do you create “class” component in React?
class ComponentName extends React.Component {
render() {
}
}How do you access props in a class component?
this.props
What is the purpose of state in React?
- States are the source of data and must be kept as simple as possible.
- States are the objects which determine components rendering and behavior.
- States are mutable unlike the props and create dynamic and interactive components.
- States are accessed via this.state().
How to you pass an event handler to a React element?
attached as a prop to your react element returned from the render method
What are controlled components?
form input whose value is controlled by React
What two props must you pass to an input for it to be “controlled”?
value and onChange
When does React call a component’s componentDidMount method?
Right when component is mounted in ReactDOM.render
Name three React.Component lifecycle methods.
componentDidMount
componentWillUnmount
componentDidUpdate
How do you pass data to a child component?
by passing the data through the props when rendering/returning the children react element
Basic Project Structure for a React Project
1) A src folder containing all JS modules
2) Index.html
3) Package.json
4) Module packager or build tool
What should the source folder not contain?
Static assets that don't go through the module bundler (webpack) e.g. index.html, images and CSS files* -Instead leave that in a server folder
Besides using named props, it’s also possible to reference the content between the opening and closing tag using what?
props.children
What 3 principles are useful for breaking the interface into nested components?
- They should be small and have a single concern i.e. do one thing.
- Wireframes and understand component hierarchy
- Look at the data model - break your UI into components that represent exactly on piece of your data model
What are two typical things that might change the state of an application?
User interaction and data fetching
For performance reasons it’s not viable to trash and re-render the entire interface every time state changes. What’s React’s solution to this?
The ‘virtual DOM’ - an in-memory, lightweight representation of the DOM
Faster to manipulate than the real DOM
What are the 2 alternatives to using if statements in JSX?
Use a ternary operator or take the if statement out of the JSX
What are the different phases of React component’s lifecycle?
- Initial Rendering Phase: This is the phase when the component is about to start its life journey and make its way to the DOM.
- Updating Phase: Once the component gets added to the DOM, it can potentially update and re-render only when a prop or state change occurs. That happens only in this phase.
- Unmounting Phase: This is the final phase of a component’s life cycle in which the component is destroyed and removed from the DOM.
What do you know about controlled and uncontrolled components?
Controlled Components
- They do not maintain their own state
- Data is controlled by the parent component
- They take in the current values through props and then notify the changes via callbacks
Uncontrolled Components
- They maintain their own state
- Data is controlled by the DOM
- Refs are used to get their current values
