diff --git a/README.md b/README.md index e1764be..940567c 100644 --- a/README.md +++ b/README.md @@ -58,6 +58,16 @@ Curated top React.js interview questions with high quality answers for acing you | 48 | [What is reconciliation in React?](#what-is-reconciliation-in-react) | | 49 | [What is React Suspense and what does it enable?](#what-is-react-suspense-and-what-does-it-enable) | | 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) | +| 51 | [What is a switching component?](#what-is-a-switching-component) | +| 52 | [What are React Mixins?](#what-are-react-mixins) | +| 53 | [What are the pointer events supported in React?](#what-are-the-pointer-events-supported-in-react) | +| 54 | [Why should component names start with a capital letter?](#why-should-component-names-start-with-capital-letter) | +| 55 | [Are custom DOM attributes supported in React v16?](#are-custom-dom-attributes-supported-in-react-v16) | +| 56 | [How do you loop inside JSX?](#how-to-loop-inside-jsx) | +| 57 | [How do you access props within attribute quotes?](#how-do-you-access-props-in-attribute-quotes) | +| 58 | [What is a React PropType array with shape?](#what-is-react-proptype-array-with-shape) | +| 59 | [How do you conditionally apply class attributes?](#how-to-conditionally-apply-class-attributes) | +| 60 | [Why is ReactDOM separated from React?](#why-reactdom-is-separated-from-react) | @@ -1111,5 +1121,287 @@ Curated top React.js interview questions with high quality answers for acing you

+51. ### What is a switching component? + + A _switching component_ is a component that renders one of many components. We need to use object to map prop values to components. + + For example, a switching component to display different pages based on `page` prop: + + ```jsx harmony + import HomePage from "./HomePage"; + import AboutPage from "./AboutPage"; + import ServicesPage from "./ServicesPage"; + import ContactPage from "./ContactPage"; + + const PAGES = { + home: HomePage, + about: AboutPage, + services: ServicesPage, + contact: ContactPage, + }; + + const Page = (props) => { + const Handler = PAGES[props.page] || ContactPage; + + return ; + }; + + // The keys of the PAGES object can be used in the prop types to catch dev-time errors. + Page.propTypes = { + page: PropTypes.oneOf(Object.keys(PAGES)).isRequired, + }; + ``` + +
+ + > 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. + + [Back to top ↑](#table-of-contents) +
+
+ +52. ### What are React Mixins? + + _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_. + + 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: + + ```javascript + const PureRenderMixin = require("react-addons-pure-render-mixin"); + + const Button = React.createClass({ + mixins: [PureRenderMixin], + // ... + }); + ``` + +
+ + > 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. + + [Back to top ↑](#table-of-contents) +
+
+ +53. ### What are the Pointer Events supported in React? + + _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. + + The following event types are now available in _React DOM_: + + 1. `onPointerDown` + 2. `onPointerMove` + 3. `onPointerUp` + 4. `onPointerCancel` + 5. `onGotPointerCapture` + 6. `onLostPointerCapture` + 7. `onPointerEnter` + 8. `onPointerLeave` + 9. `onPointerOver` + 10. `onPointerOut` + +
+ + > 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. + + [Back to top ↑](#table-of-contents) +
+
+ +54. ### Why should component names start with capital letter? + + 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. + + ```jsx harmony + function SomeComponent { + // Code goes here + } + ``` + + 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: + + ```jsx harmony + function myComponent { + render() { + return
; + } + } + + export default myComponent; + ``` + + While when imported in another file it should start with capital letter: + + ```jsx harmony + import MyComponent from "./myComponent"; + ``` + +
+ + > 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. + + [Back to top ↑](#table-of-contents) +
+
+ +55. ### Are custom DOM attributes supported in React v16? + + 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. + + For example, let's take a look at the below attribute: + + ```jsx harmony +
+ ``` + + Would render an empty div to the DOM with React v15: + + ```html +
+ ``` + + In React v16 any unknown attributes will end up in the DOM: + + ```html +
+ ``` + + This is useful for supplying browser-specific non-standard attributes, trying new DOM APIs, and integrating with opinionated third-party libraries. + +
+ + > 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. + + [Back to top ↑](#table-of-contents) +
+
+ +56. ### How to loop inside JSX? + + You can simply use `Array.prototype.map` with ES6 _arrow function_ syntax. + + For example, the `items` array of objects is mapped into an array of components: + + ```jsx harmony + + {items.map((item) => ( + + ))} + + ``` + + But you can't iterate using `for` loop: + + ```jsx harmony + + for (let i = 0; i < items.length; i++) { + + } + + ``` + + 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_. + +
+ + > 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. + + [Back to top ↑](#table-of-contents) +
+
+ +57. ### How do you access props in attribute quotes? + + React (or JSX) doesn't support variable interpolation inside an attribute value. The below representation won't work: + + ```jsx harmony + + ``` + + But you can put any JS expression inside curly braces as the entire attribute value. So the below expression works: + + ```jsx harmony + + ``` + + Using _template strings_ will also work: + + ```jsx harmony + + ``` + +
+ + > 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. + + [Back to top ↑](#table-of-contents) +
+
+ +58. ### What is React PropType array with shape? + + 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()`. + + ```javascript + ReactComponent.propTypes = { + arrayWithShape: React.PropTypes.arrayOf( + React.PropTypes.shape({ + color: React.PropTypes.string.isRequired, + fontSize: React.PropTypes.number.isRequired, + }) + ).isRequired, + }; + ``` + +
+ + > 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. + + [Back to top ↑](#table-of-contents) +
+
+ +59. ### How to conditionally apply class attributes? + + You shouldn't use curly braces inside quotes because it is going to be evaluated as a string. + + ```jsx harmony +
+ ``` + + Instead you need to move curly braces outside (don't forget to include spaces between class names): + + ```jsx harmony +
+ ``` + + _Template strings_ will also work: + + ```jsx harmony +
+ ``` + +
+ + > 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. + + [Back to top ↑](#table-of-contents) +
+
+ +60. ### Why ReactDOM is separated from React? + + The React team worked on extracting all DOM-related features into a separate library called _ReactDOM_. React v0.14 is the first release in which the libraries are split. By looking at some of the packages, `react-native`, `react-art`, `react-canvas`, and `react-three`, it has become clear that the beauty and essence of React has nothing to do with browsers or the DOM. + + To build more environments that React can render to, React team planned to split the main React package into two: `react` and `react-dom`. This paves the way to writing components that can be shared between the web version of React and React Native. + +
+ + > Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/why-react-dom-is-separated-from-react?framework=react&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources. + + [Back to top ↑](#table-of-contents) +
+
+