React - amitbhilagude/userfullinks GitHub Wiki

1. Build Dev environment
	a. Option 1 : Get Create-react-app built by FB
	b. Option 2: Custom Dev Environment setup
		i. Install Prettier extension in VS code
			1) Code reformatting
			2) Support for typescript?
		ii. Webpack ( two configs Dev and prod)
			1) Bundle files
				a) Input file
				b) Output file( no physical file, stored in memory for dev)
			2) Create Dev server
			3) Create plugin 
			4) Create modules
		iii. Babel
			1) Compile modern javascript to compatible format for non supporting browsers 
			2) Convert JSX to js
		iv. Npm script
			1) Package.json
				a) Scripts - start webpack dev server
		v. EsLint
			1) Compile time error 
2. Components
	a. Class vs Functions
	b. Hook 
	c. Container vs presentation
3. Data share between components 
	a. Lift state
	b. React context
	c. Redux (use for complex projects)
4. Redux: Principal 
	a. Immutable 
		i. Never update store. Always return new object if it needs to change
		ii. Best practices to use immuter js gives warning if we try to update store directly
	b. Actions
		i. Mandatory input as Action type in Reducer function
	c. Reducers
		i. Function takes input as Action type and state and returns changes object
		ii. Never do any API call or calculation inside reduce
		
5. Flow
	a. Action
		i. Function takes input as Action type and default state and returns new state
	b. Returns state
		i. Return object needs to have clone copy 
		ii. Options to create clone copy
			1) Object assign
			2) Arrey- preferred methods of redux for creating copy
6. End to end flow e.g. 
	a. React -  Click Save button
	b. Action: Capture this action with input as Action type(e.g. button save) and current state
	c. Reducer:   Get current state and action to perform and returns new state
	d. Store:  update new state in store and dispatch info to the components who are using this state
	e. React-Redux: verify new state and inform React componenet if UI refresh is required
	f. React: Refresh UI based on React-Redux action.
7. Concepts
	a. Unmount in class and hooks(useeffects) in function component
	b. StatetoMapProps and StatetoDispatch
8. Best practices for building react using typescript
	a. Do we need class components? (react is moving towords function compontents)
9. When to use Redux state and React state
10. Typescript
	a. Support from react script 2.1. and above