React ?'s Flashcards
React uses virtual DOM, what is it?
it updates the dom faster, updates the jsx elements if needed, manipulation is very easy
What is React?
front end javascript library
follows component based approach
What are the features of React?
uses virtual dom, server side rendering
advantages or React?
increases app performance, used on client and server side, JSX makes code easy to read
disadvantages?
just a library, not a framework, library is very large
what is JSX?
JavaScript XML, combination of JS and HTML template syntax
What is the virtual dom?
a copy of the real dom. creates a node tree out of react components. It is re-rendered, and whatever has changes is what gets updated in the dom.
Why can’t browsers read JSX?
Need to transform JSX into a jS object using something like babel, then pass into browser.
ES5 v ES6?
var react = require('react')
import React from "react"What is a component?
Components split up entire react UI into smaller separate pieces. Update without affecting rest of UI.
What is the purpose of Render?
Render is mandatory. Returns a single react component that is a representation of the native dom component.
What are props?
Read only components that are passed down from parent to child. Help maintain uni-directional data flow and used to render dynamic data.
What is state and how is it used?
source of data in react. Keep track of what changes in a component.
difference between state and props?
props get passed to the component (similar to function parameters) whereas state is managed within the component (similar to variables declared within a function).
how to update state?
this.setState or useState hook
what are arrow functions?
Used to bind context of components, useful when working with higher order functions
What is the intial rendering phase? (react component lifecycle?)
Phase when the component is about to start its journey and make its way up to the DOM
What is the updating phase (react component lifecycle?)
Once the component is added to DOM, it can potentially re redner only when a prop/state change occurs.
What is unmounting phase? (react component lifecycle?)
This is the final phase of a component’s life cycle in which the component is destroyed and removed from the DOM
Explain lifecycle methods in detail
componentWillMount() – Executed just before rendering takes place both on the client as well as server-side.
componentDidMount() – Executed on the client side only after the first render.
componentWillReceiveProps() – Invoked as soon as the props are received from the parent class and before another render is called.
shouldComponentUpdate() – Returns true or false value based on certain conditions. If you want your component to update, return true else return false. By default, it returns false.
componentWillUpdate() – Called just before rendering takes place in the DOM.
componentDidUpdate() – Called immediately after rendering takes place.
componentWillUnmount() – Called after the component is unmounted from the DOM. It is used to clear up the memory spaces.
What is an Event in react?
events are triggered with user action, like click or submit.
What are synthetic events in React?
combine behavior of different browsers into one API so they behave the same on different browsers
What are refs?
provide a way to access dom notes or react elements created in render method.
When should you use refs?
Managing text selection, media playback. Triggering animations, or adding third-party dom libraries.
