React Summarization

1. Javascript versions


ES5 (standardized in 2009-support by all browsers )

ES 2015 (ES6)
ES 2016
ES 2017
ES 2018


Feature of ES6
https://github.com/lukehoban/es6features#module-loaders


2. Tools


https://babeljs.io/docs/en/
https://webpack.js.org/
https://lodash.com
https://stephengrider.github.io/JSPlaygrounds/



3. React

3.1 JSX

Browser don't understand jsx, Tool(babel) will convert jsx to js

- Use semantic-ui
- Use https://github.com/marak/Faker.js/  for fake data and  install by npm
- Reusable component, Nested component


3.2 Pros

System for passing data from a parent component to a child component, goal to customize or config child component

- Pass a normal data to a child component


  pass : <Comment name="mike" />

  get: pros.name


- Pass a content (component or html) to a child component


  pass: 

<ApprovalCard><Comment name="mike"/></ApprovalCard>
<ApprovalCard><h2>Are you sure to delete ?</h2></ApprovalCard>

  get: pros.children




3.3 State:

- Only usable with class components
- State is an object js contain data relevant to a component
- State must be initialized when a component is created



- Updating  "state" on a component causes the component instantly rerender

- State can be only updated by using the function "setState"


3.4 Component Lifecycle




- Passing state as props


3.5 Handling user input with forms and events


- Event handler




- Uncontrolled and controlled elements

- Handling form submittal


- Invoking callbacks in children ( component )
Children

Parent




3.6 Making API requests with react

- Axios, fetch

Example 1

Example 2


3.7 Building list of records


- Using map (function)
- Must have key in each element


Or


3.8 Using ref's for DOM access


- Ref 


- Access property of ref (height) by "load" event






3.9 Redux

- Redux



Example without redux




Example with redux







Async actions with redux Thunk







- Redux store design






3.10 Navigation with React Router





3.11 Handling forms with Redux Form



3.12 React Portals


3.13 React Flagments

3.14 JSON Server

https://www.npmjs.com/package/json-server


3.15 Context system



3.16 Hooks with Functional Components







Source: https://github.com/mikedutuandu/react_redux-code





Comments