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

2. Tools

3. React

3.1 JSX

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

- Use semantic-ui
- Use  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" />


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


<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 )


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


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

3.15 Context system

3.16 Hooks with Functional Components