Skip to content

Commit 0fb9f82

Browse files
committed
Add react general interview questions
1 parent 8290add commit 0fb9f82

File tree

1 file changed

+74
-1
lines changed

1 file changed

+74
-1
lines changed

README.md

Lines changed: 74 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -308,6 +308,12 @@
308308
|292| [How do you create HOC using render props?](#how-do-you-create-hoc-using-render-props)|
309309
|293| [What is windowing technique?](#what-is-windowing-technique)|
310310
|294| [How do you print falsy values in JSX?](#how-do-you-print-falsy-values-in-jsx)|
311+
|295| [What is the typical use case of portals?](#what-is-the-typical-use-case-of-portals?)|
312+
|296| [How do you set default value for uncontrolled component?](#how-do-you-set-default-value-for-uncontrolled-component)|
313+
|297| [What is your favorite React stack?](#what-is-your-favorite-react-stack)|
314+
|298| [What is the difference between Real DOM and Virtual DOM?](#what-is-the-difference-between-real-dom-and-virtual-dom)|
315+
|299| [How to add a bootstrap for a react application?](#how-to-add-a-bootstrap-for-a-react-application)|
316+
|300| [Can you list down top websites or applications using react as front end framework?](#can-you-list-down-top-websites-or-applications-using-react-as-front-end-framework)|
311317

312318
## Core React
313319

@@ -1515,6 +1521,14 @@
15151521
$ npm run test
15161522
$ npm start
15171523
```
1524+
It includes everything we need to build a React app:
1525+
1526+
1. React, JSX, ES6, and Flow syntax support.
1527+
2. Language extras beyond ES6 like the object spread operator.
1528+
3. Autoprefixed CSS, so you don’t need -webkit- or other prefixes.
1529+
4. A fast interactive unit test runner with built-in support for coverage reporting.
1530+
5. A live development server that warns about common mistakes.
1531+
6. A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps.
15181532
15191533
74. ### What is the lifecycle methods order in mounting?
15201534
@@ -4925,4 +4939,63 @@
49254939
<div>
49264940
My JavaScript variable is {String(myVariable)}.
49274941
</div>
4928-
```
4942+
```
4943+
295. ### What is the typical use case of portals?
4944+
React portals are very useful when a parent component has overflow: hidden or has properties that affect the stacking context(z-index,position,opacity etc styles) and you need to visually “break out” of its container. For example, dialogs, global message notifications, hovercards, and tooltips.
4945+
296. ### How do you set default value for uncontrolled component?
4946+
In React, the value attribute on form elements will override the value in the DOM. With an uncontrolled component, you might want React to specify the initial value, but leave subsequent updates uncontrolled. To handle this case, you can specify a **defaultValue** attribute instead of **value**.
4947+
```javascript
4948+
render() {
4949+
return (
4950+
<form onSubmit={this.handleSubmit}>
4951+
<label>
4952+
User Name:
4953+
<input
4954+
defaultValue="John"
4955+
type="text"
4956+
ref={this.input} />
4957+
</label>
4958+
<input type="submit" value="Submit" />
4959+
</form>
4960+
);
4961+
}
4962+
```
4963+
The same applies for `select` and `textArea` inputs. But you need to use **defaultChecked** for `checkbox` and `radio` inputs.
4964+
297. ### What is your favorite React stack?
4965+
Even though the tech stack varies from developer to developer, the most popular stack is used in react boilerplate project code. It mainly uses Redux and redux-saga for state management and asynchronous side-effects, react-router for routing purpose, styled-components for styling react components, axios for invoking REST api, and other supported stack such as webpack, reselect, ESNext, Babel. You can clone the project https://github.com/react-boilerplate/react-boilerplate and start working on any new react project.
4966+
298. ### What is the difference between Real DOM and Virtual DOM?
4967+
4968+
| Real DOM | Virtual DOM |
4969+
| ----- | ------- |
4970+
| Updates are slow | Updates are fast |
4971+
| DOM manipulation is very expensive. | DOM manipulation is very easy |
4972+
| You can update HTML directly. | You Can’t directly update HTML |
4973+
| It causes too much of memory wastage | There is no memory wastage|
4974+
| Creates a new DOM if element updates | It updates the JSX if element update|
4975+
4976+
299. ### How to add a bootstrap for a react application?
4977+
Bootstrap can be added to your React app in a three possible ways
4978+
1. Using the Bootstrap CDN:
4979+
This is the easiest way to add bootstrap. Add both bootstrap CSS and JS resources in a head tag.
4980+
2. Bootstrap as Dependency:
4981+
If you are using a build tool or a module bundler such as Webpack, then this is the preferred option for adding Bootstrap to your React application
4982+
```javascript
4983+
npm install bootstrap
4984+
``
4985+
3. React Bootstrap Package:
4986+
In this case, you can add Bootstrap to our React app is by using a package that has rebuilt Bootstrap components to work particularly as React components. Below packages are popular in this category,
4987+
1. react-bootstrap
4988+
2. reactstrap
4989+
300. ### Can you list down top websites or applications using react as front end framework?
4990+
Below are the top 10 websites using React as their front-end framework,
4991+
4992+
1. Facebook
4993+
2. Uber
4994+
3. Instagram
4995+
4. WhatsApp
4996+
5. Khan Academy
4997+
6. Airbnb
4998+
7. Dropbox
4999+
8. Flipboard
5000+
9. Netflix
5001+
10. PayPal

0 commit comments

Comments
 (0)