React - points to discuss

React Crash Course - React, Hooks, Redux, Sagas, React Router, Antd

 

Modules:

0) Introduction to React - What is React?

I) ES6 features to practice

II) React - JSX, Functional Components & React Hooks

III) React Router

IV) Redux

V) Ajax & Redux - Redux Middleware - Sagas

VI) Styled Components - CSS in JS

VII) React Component Library - Antd

VIII) Redux Forms

IX) Project 1: Shop - Products page with Pagination & Search functionality

X) Project 2: Login page

XI) Conclusion

0) Introduction:

i) https://twitter.com/sarah_bean/status/1303007613693521921?s=21

Above tweet shows that a lot of people still consider React to be 'unnecessarily complicated'.

There are people who point out that React has a learning curve and once we learn it, we'll start to like it and will see its benefits.

Anyone who is new to React, if they hear that answer will think - "Oh, that means React is definitely complicated"

If React is indeed complicated,  then why are so many developers & teams adopting it?

The answer is - React will help a team to get its work done quickly and with high quality

The key words above are - quickly & high quality.

How is the above possible if React is complicated?

And the answer to that IMHO is:

- Component Libraries like Antd and 

- State management libraries like Redux & Mobx

-- both of the above provide excellent developer-experience to anyone working with them

-- vast number of Antd components with high-customizability

-- excellent architecture of Redux and its simplicity and its excellent Developer Tools

- Promise of React Native

-- knowledge of React & Redux can be carried over to do Mobile Development using React Native

All of the above benefits are worth the initial learning curve that is demanded by React.

ii) Backend Web Application already available for this course

A React application needs a Web Server to interact with.

We will be using http://sp-react-course/ as an API.

This API has been specifically built for this course and will handle the requests.

This is so that you do not have to setup anything related to the backend/server and focus only on React.

All you have to do is - go to http://sp-react-course/get-token and generate a token

and then use that token when passing API requests.

The goal of this course is to stay laser-focused on learning React in a way that you would use in the real world.

I) ES6 features to practice:

There are a few ES6 concepts that are used heavily when writing React code.

Practicing them before we start writing React code is a pre-requisite IMHO.

Several things in React that feel complicated in the beginning actually turn out to be ES6 features in Javascript that one is not aware of.

We have to respect Javascript as a full-fledged language and learn its concepts if we are to work with it in React/Angular/Vue/Svelte etc.

0) JSX

https://stackoverflow.com/questions/6003819/what-is-the-difference-between-properties-and-attributes-in-html

1) Arrow Functions

Quirks in Arrow Functions when it comes to Brackets and Single Arguments

2) ES Modules

3) Destructuring

Array Destructuring

Object Destructuring

- Both of these are especially needed when writing Redux code

4) Function Generators

- Needed when writing Redux Sagas

5) Template Literals

- String interpolation

6) Tagged Template Literals

- required for Styled Components 

7) Returning Functions (Not a ES6 feature)

Functions in Javascript can be passed as arguments to other functions.

Similarly, a function can return another function as its return value.

- Needed with Redux Thunks

8) Functions can contain other functions (Not a ES6 feature)

- Needed to understand Functional Components

- i.e. that a Functional Component is a single function that can contain other functions within it

9) let, const, var

- we usually use const

- rarely use 'let'  (especially if we are using Redux where we create new objects/arrays instead of mutating existing objects/arrays)

- 'var' is almost not used anymore

II) React - JSX, Functional Components & React Hooks

i) we will not cover Class Components

- this is a deliberate choice to avoid trying to learn too many things at once

- Class Components can be easily picked up later 

- Functional Components + React Hooks will be sufficient for a majority, if not all of our needs.

ii) Thinking in React

- what is 'state' in React?

- specify UI code taking 'state' as an input

iii) JSX

- quirks in JSX

iv) Functional Components

v) React Hooks

- quirks in React Hooks

v) Common patterns of writing React code

- destructuring state at the top before using them within the ui code

- using && as an IF condition to conditionally render ui elements

- use of 'handle' as a prefix to name functions for Button Clicks etc 

e.g. 'handleClick'

V) Redux Middleware - Sagas

- we will not cover Redux Thunks

- this is a deliberate choice to avoid trying to learn too many things at once

- Sagas are more powerful and easier to understand IMHO 

VII) React Component Library - Antd

- using a library like Antd allows developers to finish their work quickly

- UI/UX quality is high by default

- allows designers to design using a set of building blocks rather than imagining everything from scratch