203. Give an example of Styled Components?

     Lets create <Title> and <Wrapper> components with specific styles for each.

     import React from 'react'
     import styled from 'styled-components'
     
     // Create a <Title> component that renders an <h1> which is centered, red and sized at 1.5em
     const Title = styled.h1`
       font-size: 1.5em;
       text-align: center;
       color: palevioletred;
     `
     
     // Create a <Wrapper> component that renders a <section> with some padding and a papayawhip background
     const Wrapper = styled.section`
       padding: 4em;
       background: papayawhip;
     `
     

     These two variables, Title and Wrapper, are now components that you can render just like any other react component.

     <Wrapper>
       <Title>{'Lets start first styled component!'}</Title>
     </Wrapper>
     

204. What is Relay?

     Relay is a JavaScript framework for providing a data layer and client-server communication to web applications using the React view layer.

205. How to use TypeScript in create-react-app application?

     Starting from react-scripts@2.1.0 or higher, there is a built-in support for typescript. i.e, create-react-app now supports typescript natively. You can just pass --typescript option as below

     npx create-react-app my-app --typescript
     
     # or
     
     yarn create react-app my-app --typescript
     

     But for lower versions of react scripts, just supply --scripts-version option as react-scripts-ts while you create a new project. react-scripts-ts is a set of adjustments to take the standard create-react-app project pipeline and bring TypeScript into the mix.

     Now the project layout should look like the following:

     my-app/
     ├─ .gitignore
     ├─ images.d.ts
     ├─ node_modules/
     ├─ public/
     ├─ src/
     │  └─ ...
     ├─ package.json
     ├─ tsconfig.json
     ├─ tsconfig.prod.json
     ├─ tsconfig.test.json
     └─ tslint.json
     

Miscellaneous

206. What are the main features of Reselect library?

     Let's see the main features of Reselect library,

     1. Selectors can compute derived data, allowing Redux to store the minimal possible state.
     2. Selectors are efficient. A selector is not recomputed unless one of its arguments changes.
     3. Selectors are composable. They can be used as input to other selectors.

207. Give an example of Reselect usage?

     Let's take calculations and different amounts of a shipment order with the simplified usage of Reselect:

     import { createSelector } from 'reselect'
     
     const shopItemsSelector = state => state.shop.items
     const taxPercentSelector = state => state.shop.taxPercent
     
     const subtotalSelector = createSelector(
       shopItemsSelector,
       items => items.reduce((acc, item) => acc + item.value, 0)
     )
     
     const taxSelector = createSelector(
       subtotalSelector,
       taxPercentSelector,
       (subtotal, taxPercent) => subtotal * (taxPercent / 100)
     )
     
     export const totalSelector = createSelector(
       subtotalSelector,
       taxSelector,
       (subtotal, tax) => ({ total: subtotal + tax })
     )
     
     let exampleState = {
       shop: {
         taxPercent: 8,
         items: [
           { name: 'apple', value: 1.20 },
           { name: 'orange', value: 0.95 },
         ]
       }
     }
     
     console.log(subtotalSelector(exampleState)) // 2.15
     console.log(taxSelector(exampleState))      // 0.172
     console.log(totalSelector(exampleState))    // { total: 2.322 }
     

208. Does the statics object work with ES6 classes in React?

     No, statics only works with React.createClass():

     someComponent= React.createClass({
       statics: {
         someMethod: function() {
           // ..
         }
       }
     })
     

     But you can write statics inside ES6+ classes as below,

     class Component extends React.Component {
       static propTypes = {
         // ...
       }
     
       static someMethod() {
         // ...
       }
     }
     

     or writing them outside class as below,

     class Component extends React.Component {
        ....
     }
     
     Component.propTypes = {...}
     Component.someMethod = function(){....}
     

209. Can Redux only be used with React?

     Redux can be used as a data store for any UI layer. The most common usage is with React and React Native, but there are bindings available for Angular, Angular 2, Vue, Mithril, and more. Redux simply provides a subscription mechanism which can be used by any other code.

210. Do you need to have a particular build tool to use Redux?

     Redux is originally written in ES6 and transpiled for production into ES5 with Webpack and Babel. You should be able to use it regardless of your JavaScript build process. Redux also offers a UMD build that can be used directly without any build process at all.

211. How Redux Form initialValues get updated from state?

     You need to add enableReinitialize : true setting.

     const InitializeFromStateForm = reduxForm({
       form: 'initializeFromState',
       enableReinitialize : true
     })(UserEdit)
     

     If your initialValues prop gets updated, your form will update too.

212. How React PropTypes allow different types for one prop?

     You can use oneOfType() method of PropTypes.

     For example, the height property can be defined with either string or number type as below:

     Component.PropTypes = {
       size: PropTypes.oneOfType([
         PropTypes.string,
         PropTypes.number
       ])
     }
     

213. Can I import an SVG file as react component?

     You can import SVG directly as component instead of loading it as a file. This feature is available with react-scripts@2.0.0 and higher.

     import { ReactComponent as Logo } from './logo.svg'
     
     const App = () => (
       <div>
         {/* Logo is an actual react component */}
         <Logo />
       </div>
     )
     

     Note: Don't forget about the curly braces in the import.