|
308 | 308 | |292| [How do you create HOC using render props?](#how-do-you-create-hoc-using-render-props)| |
309 | 309 | |293| [What is windowing technique?](#what-is-windowing-technique)| |
310 | 310 | |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)| |
311 | 317 |
|
312 | 318 | ## Core React |
313 | 319 |
|
|
1515 | 1521 | $ npm run test |
1516 | 1522 | $ npm start |
1517 | 1523 | ``` |
| 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. |
1518 | 1532 |
|
1519 | 1533 | 74. ### What is the lifecycle methods order in mounting? |
1520 | 1534 |
|
|
4925 | 4939 | <div> |
4926 | 4940 | My JavaScript variable is {String(myVariable)}. |
4927 | 4941 | </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