Viacheslav Eremin | React Learning StartPoint

(FRONT) FRONT (2022)

React Learning StartPoint

1. Start React
2. 2. React with Typescript from Maximilian Schwarzmüller
3. React with Typescript from Colt
4. Mobile and Web Development with React JS & Native & Angular by OakAcademy

5. React Native with Typescript - The Practical Guide by Filip
6. EggHead.io
7. DigitalOcean.com
8. Related page

1. Start React

# npm init -y
# npm i typescript --save-dev
# npx create-react-app cra-typescript-example --template typescript
# cd cra-typescript-example
# npm start

Transform Html to React component

2. React with Typescript from Maximilian Schwarzmüller

1 - Module Introduction
2 - Setting Up a React + TypeScript Project
3 - How Do React + TypeScript Work Together
4 - Working with Props and Types for Props
5 - Getting User Input with refs
6 - Cross-Component Communication
7 - Working with State & Types
8 - Managing State Better
10 - Adding Styling
11 - Types for other React Features (e.g. Redux or Routing)
12 - Wrap Up

TS is not a default lang of React and this is not a course for React this is course about TS on React apps.

Prepare project

Inside SRC folder we see JS file, not TS, with extension TSX

Remove initial React code, include ServiceWorker and remove all CSS, we leave only a couple of strings on Index.tsx App.tsx

Start development server and we see empty page

This is simple JS function

FC is alias of FunctionalComponent

Create first component and export function from ToDoList.tsx

No return, therefore this is wrong TS function

Create array

And return this component to main Apps

Pass Array as parameters of ToDo component

We need to use Generic

Our parameter has structure as array of object with key ID and property Text

And now pass parameter to Todo component from main component working fine

Create new component NewToDo

And import it to main component App

Create Form and FormSubmitedEventHandler

React Event has type React.FormEvent and firstly we need to PreventDefault browser action

We can use Two Way DataBinding on Input

OR we can use Reference to function what submitted form

UseRef() is React function

Ref is last modern way, we nee import it from React Library

We see error because UseRef is Generic

Define UseRef as Generic of HtmlInputElement and initial value is NULL

And now we have access to value of HtmlInputElement, but only with exclamation mark '!'

Alternative way on code to be sure that Form is present and Input present in Form

And check how form submitted

Start create state management with simple handler

And now we want to call this function from NewToDo Component.

We want to pass pointer to this function to NewToDo Component

Not executing function with '()' but just pass pointer to function

and execute this handler from NewToDo component

But NewToDo component need to define Props as pointer to function

This interface describe Props with pointer of function

And now we define React.FC with generic type, FC has parameter with function as string what return nothing, we pass to this function exactly value from HtmlInputElement

Excute from one component function from enother component and check how it working

And now we want to rendering component after we receive text (instead simple console.log), Firstly we need to import UseState hook from React

We want to manage Todos array what store state of application

Firstly we pass empty array to state manager object

UseState return array with two element , first is latest snapshot of rendering cycle ('return <div> ... </div>'), second component is user function what render the component.

We pull out State to array

This error fires because we initialize UseState by empty array

UseState is Generic function

Setup UseState with type we want to use

Create new models ToDo

Import that models and initialize UseState as generic of this type

And now we can override new element of ToDos to SetTodos

We use '...' spread operator to guarantee that we pass to SetTodos axactly past of todos arrays (state)

So, this is function what support past Todos Snapshot

And check how App works

Add delete button to each items

We used new delete handler what filtered array

JS filter function what can delete one element by predicate (all minus your filter out), predicate if false - element will be dropped.

And connect delete handler to ToDoList component

We need to add new control parameter (Props on TS term)

This will be function type (reference to function)

Now error in App component is gone

And we need to connect this delete handler to elete button

Problem that function expect is as string as parameter

In order to do this we will uses Bind()

We pass null as 'this' to Bin()

But second parameter is exactly text value of ID

And delete handler working fine

Import CSS to component and show how app looks with style

In sophisticate React app we need more than React.Ret and React.UseState

Import UseEffect()

Most usable state manager for React is Redux

Next usable React component is React Router

React router has no embedded TS support, need to install @Types

3. React with Typescript from Colt

1. React & TypeScript Introduction
2. Create React App With TypeScript
3. Our First Component
4. A Note on React.FC
5. Props With TypeScript
6. Creating Our ShoppingList Component
7. useState With TypeScript
8. Creating Our ShoppingItem Form
9. useRef With TypeScript
10. Updating The State
11. Finishing Touches
12. React + TypeScript Wrapup

4. Mobile and Web Development with React JS & Native & Angular by OakAcademy

1. Let's Start To Learn React JS
2. What Is This JSX
3. React With Props
4. Class-Based Components
5. State In React
6. Lifecycle Methods
7. User Inputs, Forms And Events in React JS
8. API Request With React
9. Navigation With react Router
10. React Portals
11. Let's Meet Hooks And Context
12. Create Application
13. Multiple Context Usage
14. Introduction To React Hooks
15. Create Application
16. Hooks&Context
17. Get To Know The UseReducer Hook
18. Setup For Windows
19. Setup For OSX
20. React Native And JSX
21. Styling For React Native
22. API Request With React Native
23. Lifecycle Methods
24. State ın React Native
25. Layout With Flexbox
26. React Native And Expo
27. Router Expo CLI Project
28. FlatList
29. Route Different Screens
30. Introduction to Angular
31. TypeScript
32. Angular Basic Features
33. Angular Data Binding
34. Directives
35. Handling Template-driven Forms
36. Handling - Reactive Forms
37. HTTP Service
38. Routing
39. Node JS
40. Server
41. Streams and Buffers
42. Mongo DB
43. Test Driven Experience
44. Operators
45. Handling Relational Data
46. Schema Design
47. BONUS

5. React Native with Typescript - The Practical Guide by Filip

01 - Introduction
02 - Project startup
03 - Navigation
04 - Workout management
05 - Font Loading
06 - Utility functions
07 - Detail screen
08 - Async storage
09 - Use Workouts
10 - Modal
11 - Countdown
12 - Display Sequence
13 - Stoppable countdown
14 - Startup sequence
15 - Exercise Form
16 - Hook Form
17 - Data Transformation
18 - Finalize Workout
19 - UX Improvements
20 - Testing & Final Build

)

<00> <01> <02> <03> <04> <05> <06> <07> <08> <09> <10> <11> <12> <13> <14> <15> <16> <17> <18> <19> <20> <21> <22> <23>

Link to this page: http://www.vb-net.com/ReactLearningStartPoint/Index.htm

React Learning StartPoint

1. Start React

2. React with Typescript from Maximilian Schwarzmüller

3. React with Typescript from Colt

4. Mobile and Web Development with React JS & Native & Angular by OakAcademy

5. React Native with Typescript - The Practical Guide by Filip

6. EggHead.io

7. DigitalOcean.com

8. Related page.