React Flashcards
What does webpack do in React? What files does webpack affect in React?
Webpack is a static module bundler. It goes through your src folder and creates a new package which consists of the very bare minimum number of files required, often just a single bundle.js file which can be plugged in to the html file easily and used for the application.
Creating a huge monolithic JavaScript file is ugly and difficult to maintain, but multiple JavaScript files require multiple requests to fetch, and can add significant overhead. The solution is to write code splitting it into as many files as you need, and using require() or import statements to connect them together as we see fit. When we require something from a file, that becomes a dependency of that file. All our interconnected files and assets form a dependency graph. Then we use a bundler to to parse through these files and connect them appropriately based on the require and import statements and perform some more optimizations on top of it to generate one (sometimes more than one) JavaScript files which we can then use.
Webpack gives you control over how to treat different assets it encounters. For example, you can decide to inline assets to your JavaScript bundles to avoid requests. Webpack also allows you to use techniques like CSS Modules to couple styling with components, and to avoid issues of standard CSS styling. This flexibility is what makes webpack so valuable.
What is JSX?
JSX is a syntax extension to JavaScript that produces React elements. React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.
JSX is more declarative and reduces overall code complexity.
You can put any valid JavaScript expression inside the curly braces in JSX.
What is the root DOM node?
Applications built with just React usually have a single root DOM node and everything inside it will be managed by React DOM.
What is a react element?
It is a plain JavaScript Object. We are writing a HTML like element which gets converted to a JavaScript Object.
What is the virtual DOM?
The Virtual DOM is an abstraction of the HTML DOM. An in-memory copy of your original DOM that React updates directly. Manipulating the virtual DOM is easier and faster because nothing is changed in the UI.
Normally to update the DOM, you have to traverse through and re-render which can be very costly.
-First, ReactJS creates a copy of the original DOM, calling it the Virtual DOM. Each of the nodes of the Virtual DOM represents an element.
-Next, if there is a state update of an element, a new Virtual DOM is created.
-The diffing algorithm identifies the difference of the change. In this case, a subtree from the changed node has been identified as the diff.
-Last, the ReactJS runs a batch update to update the Original DOM with these changes to keep it in sync.
What is the reconciliation process?
React compares the virtual DOM with a version before the update in order to know what changed. This way, only the element that changed are updated in the real DOM.
Can you modify props?
Whether you declare a component as a function or a class, it must never modify its own props. All React components must act like pure functions with respect to their props.
Why should you not modify state directly? i.e. this.state….= value
When you modify the state directly, it doesn’t create a new state object (unlike setState). React won’t be able to see that there is a change of state.
What are components and what are it’s advantages?
React uses component-based architecture for developing applications. Components are independent and reusable bits of code. These components can be shared across various applications having similar functionality. The re-use of components increases the pace of development.
What is React?
React is a front-end and open-source JavaScript library which is useful in developing user interfaces specifically for applications with a single page. It is helpful in building complex and reusable user interface(UI) components of mobile and web applications as it follows the component-based approach.
What are the advantages of using React?
- Use of Virtual DOM to improve efficiency
- SEO friendly (due to server-side rendering)
- Reusable components
- Huge ecosystem of libraries to choose from
- Developer Tools
- One way data flow
What are the disadvantages of using React?
- JSX may be difficult to get used to
- Development pace is very fast and can be difficult to keep up with
- Documentation has a hard time keeping up with pace of development
What is useState() in React?
The useState() is a built-in React Hook that allows you for having state variables in functional components. It should be used when the DOM has something that is dynamically manipulating/controlling. It returns a pair of values: the current state and a function that updates it.
What are hooks and why did react create them?
Hooks allow you to reuse stateful logic without changing your component hierarchy. This makes it easy to share Hooks among many components or with the community. Hooks give you the ability to create your own abstractions that do not inflate your react component tree and create wrapper hell.
Downsides of classes
- Hard for humans
- Hard for machines… in minified component file, all method names are still unminified
- Difficult to implement hot-reloading reliably
- Large components with logic split across different lifecycles
- Wrapper hell
