React Flashcards
What is React?
React is a JS library for building UI.
What is Redux?
Redux is a predictable state container for JS apps. Meaning it is a state management library.
How does Redux work?
Redux works by creating a store, which acts as the centralized point that stores state for an application in a global sense, by wrapping the app component allowing access to all child components within the app. In order to update the state, an action must be called. An action is an object that is created by an action creator that has to contain a type of action and optionally a payload which would describe new data to update the state. The action is then passed to a reducer, which takes in the original state as well as the action then reduces the two down to create a new instance of the state with the update.
What makes Redux so special?
What makes Redux special is the fact that it can be used by different JS frameworks and because it is predictable in its functionality. Meaning that when the same state and action are passed to a reducer, the same result is always produced because reducers are pure functions.
Describe the Redux setup process.
How do reducers work in Redux?
Reducers work by taking in the old state and the action that was dispatched. The reducer then checks the type of action dispatched and will run the corresponding function. The original state is copied then updated with any new or updated data contained within the action.payload object if available or returns the new updated state as described within the function.
Why did you choose React?
I chose React because when I was first exploring which framework to learn, React already had a very positive standing in the web dev community and it seemed to be rapidly growing in popularity. What stood out to me when I initially jumped into the React docs was how straightforward all the React concepts were; such as how state was managed and updated and how that in turn will update the UI. I also really liked how intuitive JSX components are and how it can make breaking down components of a feature very easy. Because of how easy it was to learn, it made creating my own projects much easier and quicker.
What are the major features of React?
The major features of React are JSX, Virtual DOM, one-way data binding, improved performance, many extensions, conditional rendering, reusable components.
What is JSX?
JSX is a javascript syntax extension that allows for writing HTML in javascript.
What is the Virtual DOM and how does it work?
The Virtual DOM is a complete copy of the DOM. The Virtual DOM works by updating before the DOM when a modification is made to a web app then finds the difference between the DOM and the Virtual DOM then updates the parts of the DOM that are different. This increases performance as it is only rendering small chunks that need updating instead of the entire DOM.
What is state in React?
React state is a built-in React object that is used to contain data or information about the component.
What are props in React?
Props is a special keyword in React that stands for properties and is used for passing data from one component to another. Data with props are passed in a unidirectional flow from parent to child.
What is the difference between state and props?
State is used to store the data of a component that has to be rendered to view. State data can be changed over time. State can only be used in class components. Event handlers generally update state.
Props are used to pass data and event handlers to child components. Props are immutable. Props can be used in both functional and class components. Parent components sets props for the children components.
What does lifting state up mean and why do we do it?
Lifting state means moving state management from child components to a “common ancestor”. This is done to share state between multiple components using props and helps keep components in sync when data changes.
Why do we set up a key property when we map over an array in React?
Keys are used to uniquely identify a component instance in the list. This helps React optimize re-rendering by recycling existing components by determining which items have changed, are added, or are removed. This means that instead of re-rendering the entire list, React can simply re-render the specific components that have changed.
