Skip to content

Commit a7c425e

Browse files
0xprincedev0xprincedev
committed
Added 10 react.js interview questions
1 parent fed668b commit a7c425e

File tree

1 file changed

+278
-0
lines changed

1 file changed

+278
-0
lines changed

‎README.md‎

Lines changed: 278 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,16 @@ Curated top React.js interview questions with high quality answers for acing you
5858
| 48 | [What is reconciliation in React?](#what-is-reconciliation-in-react) |
5959
| 49 | [What is React Suspense and what does it enable?](#what-is-react-suspense-and-what-does-it-enable) |
6060
| 50 | [Explain what happens when the `useState` setter function is called in React](#explain-what-happens-when-the-usestate-setter-function-is-called-in-react) |
61+
| 51 | [What is a switching component?](#what-is-a-switching-component) |
62+
| 52 | [What are React Mixins?](#what-are-react-mixins) |
63+
| 53 | [What are the pointer events supported in React?](#what-are-the-pointer-events-supported-in-react) |
64+
| 54 | [Why should component names start with a capital letter?](#why-should-component-names-start-with-capital-letter) |
65+
| 55 | [Are custom DOM attributes supported in React v16?](#are-custom-dom-attributes-supported-in-react-v16) |
66+
| 56 | [How do you loop inside JSX?](#how-to-loop-inside-jsx) |
67+
| 57 | [How do you access props within attribute quotes?](#how-do-you-access-props-in-attribute-quotes) |
68+
| 58 | [What is a React PropType array with shape?](#what-is-react-proptype-array-with-shape) |
69+
| 59 | [How do you conditionally apply class attributes?](#how-to-conditionally-apply-class-attributes) |
70+
| 60 | [Why is ReactDOM separated from React?](#why-reactdom-is-separated-from-react) |
6171

6272
<!-- TABLE_OF_CONTENTS:END -->
6373

@@ -1111,5 +1121,273 @@ Curated top React.js interview questions with high quality answers for acing you
11111121
<br>
11121122
<br>
11131123
1124+
51. ### What is a switching component?
1125+
1126+
A _switching component_ is a component that renders one of many components. We need to use object to map prop values to components.
1127+
1128+
For example, a switching component to display different pages based on `page` prop:
1129+
1130+
```jsx harmony
1131+
import HomePage from "./HomePage";
1132+
import AboutPage from "./AboutPage";
1133+
import ServicesPage from "./ServicesPage";
1134+
import ContactPage from "./ContactPage";
1135+
1136+
const PAGES = {
1137+
home: HomePage,
1138+
about: AboutPage,
1139+
services: ServicesPage,
1140+
contact: ContactPage,
1141+
};
1142+
1143+
const Page = (props) => {
1144+
const Handler = PAGES[props.page] || ContactPage;
1145+
1146+
return <Handler {...props} />;
1147+
};
1148+
1149+
// The keys of the PAGES object can be used in the prop types to catch dev-time errors.
1150+
Page.propTypes = {
1151+
page: PropTypes.oneOf(Object.keys(PAGES)).isRequired,
1152+
};
1153+
```
1154+
1155+
<br>
1156+
1157+
> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-is-a-switching-component?framework=react&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
1158+
1159+
[Back to top ↑](#table-of-contents)
1160+
<br>
1161+
<br>
1162+
1163+
52. ### What are React Mixins?
1164+
1165+
_Mixins_ are a way to totally separate components to have a common functionality. Mixins **should not be used** and can be replaced with _higher-order components_ or _decorators_.
1166+
1167+
One of the most commonly used mixins is `PureRenderMixin`. You might be using it in some components to prevent unnecessary re-renders when the props and state are shallowly equal to the previous props and state:
1168+
1169+
```javascript
1170+
const PureRenderMixin = require("react-addons-pure-render-mixin");
1171+
1172+
const Button = React.createClass({
1173+
mixins: [PureRenderMixin],
1174+
// ...
1175+
});
1176+
```
1177+
1178+
<br>
1179+
1180+
> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-react-mixins?framework=react&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
1181+
1182+
[Back to top ↑](#table-of-contents)
1183+
<br>
1184+
<br>
1185+
1186+
53. ### What are the Pointer Events supported in React?
1187+
1188+
_Pointer Events_ provide a unified way of handling all input events. In the old days we had a mouse and respective event listeners to handle them but nowadays we have many devices which don't correlate to having a mouse, like phones with touch surface or pens. We need to remember that these events will only work in browsers that support the _Pointer Events_ specification.
1189+
1190+
The following event types are now available in _React DOM_:
1191+
1192+
1. `onPointerDown`
1193+
2. `onPointerMove`
1194+
3. `onPointerUp`
1195+
4. `onPointerCancel`
1196+
5. `onGotPointerCapture`
1197+
6. `onLostPointerCapture`
1198+
7. `onPointerEnter`
1199+
8. `onPointerLeave`
1200+
9. `onPointerOver`
1201+
10. `onPointerOut`
1202+
1203+
<br>
1204+
1205+
> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-the-point-events-supported-in-react?framework=react&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
1206+
1207+
[Back to top ↑](#table-of-contents)
1208+
<br>
1209+
<br>
1210+
1211+
54. ### Why should component names start with capital letter?
1212+
1213+
If you are rendering your component using JSX, the name of that component has to begin with a capital letter otherwise React will throw an error as an unrecognized tag. This convention is because only HTML elements and SVG tags can begin with a lowercase letter.
1214+
1215+
```jsx harmony
1216+
function SomeComponent {
1217+
// Code goes here
1218+
}
1219+
```
1220+
1221+
You can define function component whose name starts with lowercase letter, but when it's imported it should have a capital letter. Here lowercase is fine:
1222+
1223+
```jsx harmony
1224+
function myComponent {
1225+
render() {
1226+
return <div />;
1227+
}
1228+
}
1229+
1230+
export default myComponent;
1231+
```
1232+
1233+
While when imported in another file it should start with capital letter:
1234+
1235+
```jsx harmony
1236+
import MyComponent from "./myComponent";
1237+
```
1238+
1239+
<br>
1240+
1241+
> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/why-should-component-names-start-with-capital-letter?framework=react&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
1242+
1243+
[Back to top ↑](#table-of-contents)
1244+
<br>
1245+
<br>
1246+
1247+
55. ### Are custom DOM attributes supported in React v16?
1248+
1249+
Yes. In the past, React used to ignore unknown DOM attributes. If you wrote JSX with an attribute that React doesn't recognize, React would just skip it.
1250+
1251+
For example, let's take a look at the below attribute:
1252+
1253+
```jsx harmony
1254+
<div mycustomattribute={"something"} />
1255+
```
1256+
1257+
Would render an empty div to the DOM with React v15:
1258+
1259+
```html
1260+
<div />
1261+
```
1262+
1263+
In React v16 any unknown attributes will end up in the DOM:
1264+
1265+
```html
1266+
<div mycustomattribute="something" />
1267+
```
1268+
1269+
This is useful for supplying browser-specific non-standard attributes, trying new DOM APIs, and integrating with opinionated third-party libraries.
1270+
1271+
<br>
1272+
1273+
> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/are-custom-dom-attributes-supported-in-react-v16?framework=react&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
1274+
1275+
[Back to top ↑](#table-of-contents)
1276+
<br>
1277+
<br>
1278+
1279+
56. ### How to loop inside JSX?
1280+
1281+
You can simply use `Array.prototype.map` with ES6 _arrow function_ syntax.
1282+
1283+
For example, the `items` array of objects is mapped into an array of components:
1284+
1285+
```jsx harmony
1286+
<tbody>
1287+
{items.map((item) => (
1288+
<SomeComponent key={item.id} name={item.name} />
1289+
))}
1290+
</tbody>
1291+
```
1292+
1293+
But you can't iterate using `for` loop:
1294+
1295+
```jsx harmony
1296+
<tbody>
1297+
for (let i = 0; i < items.length; i++) {
1298+
<SomeComponent key={items[i].id} name={items[i].name} />
1299+
}
1300+
</tbody>
1301+
```
1302+
1303+
This is because JSX tags are transpiled into _function calls_, and you can't use statements inside expressions. This may change thanks to `do` expressions which are _stage 1 proposal_.
1304+
1305+
<br>
1306+
1307+
> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/how-to-loop-inside-jsx?framework=react&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
1308+
1309+
[Back to top ↑](#table-of-contents)
1310+
<br>
1311+
<br>
1312+
1313+
57. ### How do you access props in attribute quotes?
1314+
1315+
React (or JSX) doesn't support variable interpolation inside an attribute value. The below representation won't work:
1316+
1317+
```jsx harmony
1318+
<img className="image" src="images/{this.props.image}" />
1319+
```
1320+
1321+
But you can put any JS expression inside curly braces as the entire attribute value. So the below expression works:
1322+
1323+
```jsx harmony
1324+
<img className="image" src={"images/" + this.props.image} />
1325+
```
1326+
1327+
Using _template strings_ will also work:
1328+
1329+
```jsx harmony
1330+
<img className="image" src={`images/${this.props.image}`} />
1331+
```
1332+
1333+
<br>
1334+
1335+
> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/how-do-you-access-props-in-attribute-quotes?framework=react&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
1336+
1337+
[Back to top ↑](#table-of-contents)
1338+
<br>
1339+
<br>
1340+
1341+
58. ### What is React PropType array with shape?
1342+
1343+
If you want to pass an array of objects to a component with a particular shape then use `React.PropTypes.shape()` as an argument to `React.PropTypes.arrayOf()`.
1344+
1345+
```javascript
1346+
ReactComponent.propTypes = {
1347+
arrayWithShape: React.PropTypes.arrayOf(
1348+
React.PropTypes.shape({
1349+
color: React.PropTypes.string.isRequired,
1350+
fontSize: React.PropTypes.number.isRequired,
1351+
})
1352+
).isRequired,
1353+
};
1354+
```
1355+
1356+
<br>
1357+
1358+
> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-is-react-prop-type-array-with-shape?framework=react&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
1359+
1360+
[Back to top ↑](#table-of-contents)
1361+
<br>
1362+
<br>
1363+
1364+
60. ### How to conditionally apply class attributes?
1365+
1366+
You shouldn't use curly braces inside quotes because it is going to be evaluated as a string.
1367+
1368+
```jsx harmony
1369+
<div className="btn-panel {this.props.visible ? 'show' : 'hidden'}">
1370+
```
1371+
1372+
Instead you need to move curly braces outside (don't forget to include spaces between class names):
1373+
1374+
```jsx harmony
1375+
<div className={'btn-panel ' + (this.props.visible ? 'show' : 'hidden')}>
1376+
```
1377+
1378+
_Template strings_ will also work:
1379+
1380+
```jsx harmony
1381+
<div className={`btn-panel ${this.props.visible ? 'show' : 'hidden'}`}>
1382+
```
1383+
1384+
<br>
1385+
1386+
> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/how-to-conditionally-apply-class-attributes?framework=react&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
1387+
1388+
[Back to top ↑](#table-of-contents)
1389+
<br>
1390+
<br>
1391+
11141392
11151393
<!-- QUESTIONS:END -->

0 commit comments

Comments
 (0)