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# oryarn 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
What are the main features of Reselect library?
Let's see the main features of Reselect library,
- Selectors can compute derived data, allowing Redux to store the minimal possible state.
- Selectors are efficient. A selector is not recomputed unless one of its arguments changes.
- Selectors are composable. They can be used as input to other selectors.
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.2 },{ name: 'orange', value: 0.95 },],},};console.log(subtotalSelector(exampleState)); // 2.15console.log(taxSelector(exampleState)); // 0.172console.log(totalSelector(exampleState)); // { total: 2.322 }