React Junior Flashcards
How does React work?
React creates a virtual DOM. When state changes in a component it firstly runs a “diffing” algorithm, which identifies what has changed in the virtual DOM. The second step is reconciliation, where it updates the DOM with the results of diff.
What is context?
Context provides a way to pass data through the component tree without having to pass props down manually at every level. For example, authenticated user, locale preference, UI theme need to be accessed in the application by many components.
What is virtual DOM?
The virtual DOM (VDOM) is an in-memory representation of Real DOM. The representation of a UI is kept in memory and synced with the “real” DOM. It’s a step that happens between the render function being called and the displaying of elements on the screen. This entire process is called reconciliation.
What is props?
- input data passed to components similar to html attributes
- Trigger state changes.
- Use via this.props.reactProp inside component’s render() method.
What is the use of refs?
Allow us to directly access a DOM element
What’s the difference between a controlled component and an uncontrolled one in React?
A controlled component has its state completely driven by React,
Uncontrolled components can maintain their own internal state. E.g., a textarea’s value.
What are controlled components?
A ReactJS component that controls the input elements within the forms on subsequent user input is called “Controlled component”. i.e, every state mutation will have an associated handler function.
What is state in ReactJS?
State of a component is an object that holds some information that may change over the lifetime of the component. We should always try to make our state as simple as possible and minimize the number of stateful components.
When to use a Class Component over a Functional Component?
If the component need state or lifecycle methods then use class component otherwise use functional component, we basically should stop using them in favor of Hooks according to React official documentation.
What does it mean for a component to be mounted in React?
It has a corresponding element created in the DOM and is connected to that.
What are fragments?
It’s common pattern in React which is used for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.
<>
<div></div>
<div></div>
>
What is JEST?
Jest is a JavaScript unit testing framework made by Facebook based on Jasmine and provides automated mock creation and a jsdom environment. It’s often used for testing React components.
What are the advantages of ReactJS?
- Increases the application’s performance with Virtual DOM
- JSX makes code is easy to read and write
- It renders both on client and server side
- Easy to integrate with other frameworks (Angular, BackboneJS) since it is only a view library
- Easy to write UI Test cases and integration with tools such as JEST.
What is ReactJS?
ReactJS is an open-source frontend JavaScript library which is used for building user interfaces specifically for single page applications.
How to write comments in ReactJS?
{/* Single-line comments */}
How would you write an inline style in React?
<div></div>
What are the major features of ReactJS?
- Uses VirtualDOM instead RealDOM considering that RealDOM manipulations are expensive
- Supports server-side rendering
- Follows Unidirectional data flow or data binding
- Uses reusable/composable UI components to develop the view
What are the differences between a class component and functional component?
Basically only difference is that component uses lifecycle hooks and local state. But with react hooks for functional components basically no difference.
What are the advantages of using React?
- easy to know how a component is rendered, you just need to look at the render function.
- JSX makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged/combined with each other.
- You can render React on the server-side. This enables improves SEO and performance.
It is easy to test.
-You can use React with any framework (Backbone.js, Angular.js) as it is only a view layer.
What is virtual DOM?
The virtual DOM (VDOM) is an in-memory representation of Real DOM. The representation of a UI is kept in memory and synced with the “real” DOM. It’s a step that happens between the render function being called and the displaying of elements on the screen. This entire process is called reconciliation.
What is props?
- input data passed to components similar to html attributes
- Trigger state changes.
- Use via this.props.reactProp inside component’s render() method.
What is the use of refs?
Allow us to directly access a DOM element
What’s the difference between a controlled component and an uncontrolled one in React?
A controlled component has its state completely driven by React,
Uncontrolled components can maintain their own internal state. E.g., a textarea’s value.
What are controlled components?
A ReactJS component that controls the input elements within the forms on subsequent user input is called “Controlled component”. i.e, every state mutation will have an associated handler function.
What is state in ReactJS?
State of a component is an object that holds some information that may change over the lifetime of the component. We should always try to make our state as simple as possible and minimize the number of stateful components.
When to use a Class Component over a Functional Component?
If the component need state or lifecycle methods then use class component otherwise use functional component, we basically should stop using them in favor of Hooks according to React official documentation.
What does it mean for a component to be mounted in React?
It has a corresponding element created in the DOM and is connected to that.
What is JEST?
Jest is a JavaScript unit testing framework made by Facebook based on Jasmine and provides automated mock creation and a jsdom environment. It’s often used for testing React components.
