(FRONT) FRONT (2022)

React Learning StartPoint

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

6. EggHead.io



  1. The Beginner's Guide to ReactKent C. Dodds
  2. Develop Accessible Web Apps with ReactErin Doyle
  3. Shareable Custom Hooks in ReactJoe Previte
  4. Simplify React Apps with React HooksKent C. Dodds
  5. Reusable State and Effects with React HooksElijah Manor
  6. Apply Redux to a Modern React Hooks ApplicationJamund Ferguson
  7. Build an App with React SuspenseMichael Chan
  8. Sync State Across Components with Recoil in ReactTomasz Łakomy
  9. React State Management Expert InterviewsJoel Hooks
  10. Introduction to State Machines Using XStateKyle Shevlin
  11. Construct Sturdy UIs with XStateIsaac Mann
  12. React Context for State ManagementDave Ceddia
  13. Manage Complex Tic Tac Toe Game State in ReactKyle Shevlin
  14. Manage Application State with Jotai AtomsDaishi Kato
  15. Sync State Across Components with Recoil in ReactTomasz Łakomy
  16. Manage React State with RecoilYoni Weisbrod
  17. Animate React Apps with Framer MotionWill Johnson
  18. Style an Application from Start to FinishGarth Braithwaite
  19. Styling React Applications with Styled ComponentsSara Vieira
  20. Beautiful and Accessible Drag and Drop with react-beautiful-dndAlex Reardon
  21. The Beginner's Guide to FigmaJoe Previte
  22. React Real-Time Messaging with GraphQL using urql and OneGraphIan Jones
  23. Build a Terminal Dashboard with ReactElijah Manor
  24. Full Stack with React and AppwriteColby Fayock
  25. Statechart Driven UI Components with Zag.jsSegun Adebayo
  26. Scale React Development with NxJuri Strumpflohner
  27. Complex State Management in React with Jotai and XStateDaishi Kato
  28. React State Management Expert InterviewsJoel Hooks
  29. Develop Accessible Web Apps with ReactErin Doyle
  30. Manage Application State with Jotai AtomsDaishi Kato
  31. Get Started with the AWS Amplify Admin UIAli Spittel
  32. Create Contextual Video Analysis App with NextJS and Symbl.aiVladimir Novick
  33. Immutable JavaScript Data Structures with ImmerMichel Weststrate
  34. The Beginner's Guide to ReactKent C. Dodds
  35. Mapping with React LeafletColby Fayock
  36. Introduction to Next.js 9Xiaoru Li
  37. Kent's Blog Posts as ScreencastsKent C. Dodds
  38. Secure React User Authentication with Auth0Will Johnson
  39. Beautiful and Accessible Drag and Drop with react-beautiful-dndAlex Reardon
  40. Adopting RTK Query into an Existing Redux ApplicationJamund Ferguson
  41. GraphQL Data in React with Apollo ClientNik Graf
  42. Manage Application State with Mobx-state-treeMichel Weststrate
  43. Animate React Apps with Framer MotionWill Johnson
  44. Build a Modern User Interface with Chakra UILazar Nikolov
  45. Building React Applications with Idiomatic ReduxDan Abramov
  46. Modern Redux with Redux Toolkit (RTK) and TypeScriptJamund Ferguson
  47. Modernizing a Legacy Redux Application with React HooksJamund Ferguson
  48. Manage React State with RecoilYoni Weisbrod
  49. Build Advanced Components with React HooksMatías Hernández
  50. Manage Complex State in React Apps with MobXMichel Weststrate
  51. Apply Redux to a Modern React Hooks ApplicationJamund Ferguson
  52. Fundamentals of Redux Course from Dan AbramovDan Abramov
  53. Construye Componentes Avanzados con React Hooks y Patrones de DiseñoMatías Hernández

7. DigitalOcean.com

  1. 5 Tips to Improve the Performance of Your React Apps(March 8, 2020)
  2. 6 Optimization Tips for React Apps(December 12, 2019)
  3. 7 Ways to Implement Conditional Rendering in React Applications(February 5, 2021)
  4. A Brief Introduction to Expo(December 12, 2018)
  5. A Guide for Refs in React(August 18, 2019)
  6. A New Way to Handle Events in React(April 16, 2020)
  7. A Quick Intro to React's Higher-Order Components(May 12, 2018)
  8. A Sneak Peek at React Router v6(March 17, 2020)
  9. Add i18n Yourself in a React and Redux App(June 20, 2018)
  10. Adding Sound FX to Your React Apps(May 21, 2019)
  11. Animations in React Using React Motion(April 12, 2018)
  12. Atomic SetState Updates in React(July 26, 2017)
  13. Back to Basic: What are Props in React and How to They Work?(July 16, 2019)
  14. Beautiful Charts and Graphs with React and Victory(September 19, 2018)
  15. Build a SSR App With Preact, Unistore, and Preact Router(December 12, 2019)
  16. Building a Landing Page in React Native Using Flexbox(July 26, 2018)
  17. CSS-in-JS Roundup: Styling React Components(August 21, 2017)
  18. Categorizing Components Into Smart & Dumb Components, in React(November 12, 2018)
  19. Change Soft Input Mode in React Native Android(July 16, 2018)
  20. Class Component Overview in React(May 9, 2017)
  21. Code Splitting in React Using React Loadable(April 18, 2018)
  22. Code Splitting with React Suspense(December 14, 2018)
  23. Component Lifecycle Functions in React(May 13, 2017)
  24. Connecting Redux to React Using React Redux(June 13, 2018)
  25. Crafting Beautiful UIs in React Using Ant Design(September 7, 2018)
  26. Creating Compositional Components in React With this.props.children(August 18, 2017)
  27. Creating a Button with Gradient Border in React Native(February 8, 2019)
  28. Creating a Live Search Feature in React Using Axios(February 28, 2019)
  29. Deploying React Applications with Webhooks and Slack on Ubuntu 16.04(June 21, 2018)
  30. Easy State Management in React Using Unstated(April 19, 2018)
  31. Easy State Management with React Values(August 26, 2018)
  32. Elegant UX in React with Material-UI(June 17, 2018)
  33. Exploring the Chakra UI React Component Library(December 23, 2019)
  34. Get to Know React's New Context API(January 7, 2022)
  35. Getting Started with React Native Elements UI(June 28, 2021)
  36. Getting Started with Webpack + React(October 19, 2017)
  37. Getting to Grips with React.Memo(August 15, 2019)
  38. Getting to Grips with react-window(July 22, 2019)
  39. Google Analytics on your React/Redux App with Redux Beacon(July 8, 2018)
  40. How To Add Animations to React Apps with React-Lottie(June 7, 2021)
  41. How To Add Login Authentication to React Applications(December 2, 2020)
  42. How To Apply React Hooks in a React Project(October 26, 2020)
  43. How To Avoid Performance Pitfalls in React with memo, useMemo, and useCallback(December 11, 2020)
  44. How To Build Custom Pagination with React(September 17, 2020)
  45. How To Build Forms in React with Reactstrap(June 3, 2021)
  46. How To Build Forms in React(September 24, 2020)
  47. How To Build JS Components with Storybook(March 31, 2021)
  48. How To Build a CRUD App with React Hooks and the Context API(March 23, 2021)
  49. How To Build a Custom Toggle Switch with React(June 9, 2020)
  50. How To Build a Customer List Management App with React and TypeScript(May 16, 2019)
  51. How To Build a Modern Web Application to Manage Customer Information with Django and React on Ubuntu 18.04(October 22, 2018)
  52. How To Build a Password Strength Meter in React(April 10, 2020)
  53. How To Build a Photo Search App with React Using the Unsplash API(September 18, 2020)
  54. How To Build a React To-Do App with React Hooks(September 17, 2020)
  55. How To Build a Recipe App Using React, Prisma, and GraphQL(December 12, 2019)
  56. How To Build a Sidebar Component in React with react-burger-menu(October 20, 2020)
  57. How To Build a To-Do application Using Django and React(February 17, 2021)
  58. How To Build a UI Component with React and Storybook(June 8, 2021)
  59. How To Build an Accordion Component with React(August 27, 2021)
  60. How To Build an Autocomplete Component in React(December 21, 2020)
  61. How To Build an Infinite Scroll Image Gallery with React and CSS Grid(December 12, 2019)
  62. How To Call Web APIs with the useEffect Hook in React(October 6, 2020)
  63. How To Change the Title and Metadata with React Helmet(March 17, 2021)
  64. How To Code in React.js eBook(July 30, 2021)
  65. How To Convert React Class Components to Functional Components with React Hooks(September 16, 2020)
  66. How To Convert a React Class-Based Component to a Functional Component(August 4, 2021)
  67. How To Create A Social Follow Component in React(December 12, 2019)
  68. How To Create Admin Interfaces in React with react-admin(August 6, 2021)
  69. How To Create Animated React Apps With React Spring(December 12, 2019)
  70. How To Create Custom Components in React(April 16, 2020)
  71. How To Create Drag and Drop File Uploads in React with react-dropzone(March 23, 2021)
  72. How To Create Multistep Forms With React and Semantic UI(August 30, 2021)
  73. How To Create React Elements with JSX(April 13, 2020)
  74. How To Create Searchable, Async Dropdowns with React-Select(November 16, 2020)
  75. How To Create Wrapper Components in React with Props(May 18, 2020)
  76. How To Create a calibre Ebook Server on Ubuntu 18.04(October 27, 2020)
  77. How To Customize ESLint Rules with an Ejected Create React App(July 20, 2021)
  78. How To Customize React Components with Props(March 23, 2022)
  79. How To Debug React Components Using React Developer Tools(August 28, 2020)
  80. How To Deploy a React Application to DigitalOcean App Platform(December 28, 2021)
  81. How To Deploy a React Application with Nginx on Ubuntu 20.04(June 14, 2022)
  82. How To Detect When a Component Enters the Viewport with React Visibility Sensor(March 18, 2021)
  83. How To Display Data from the DigitalOcean API with React(December 21, 2018)
  84. How To Embed a React Application in WordPress on Ubuntu 18.04(August 27, 2019)
  85. How To Get Started with the MERN Stack(August 31, 2021)
  86. How To Handle Async Data Loading, Lazy Loading, and Code Splitting with React(October 2, 2020)
  87. How To Handle DOM and Window Events with React(August 28, 2020)
  88. How To Handle Routing in React Apps with React Router(October 29, 2020)
  89. How To Implement Infinite Scroll in React(March 17, 2021)
  90. How To Implement Smooth Scrolling in React(May 19, 2020)
  91. How To Implement a Modal Component in React(December 23, 2020)
  92. How To Manage State in React with Redux(October 20, 2020)
  93. How To Manage State on React Class Components(June 30, 2020)
  94. How To Manage State with Hooks on React Components(July 14, 2020)
  95. How To Manage User State with React Context(March 23, 2021)
  96. How To Render CSS on React App Servers(June 1, 2021)
  97. How To Secure React Applications Against XSS Attacks with HTTP-Only Cookies(September 21, 2022)
  98. How To Set Up Conditional and Responsive Routing with React Router v4(September 24, 2020)
  99. How To Set Up React Using Webpack 4 and Babel 7(December 12, 2019)
  100. How To Set Up a React Project With Parcel(June 8, 2021)
  101. How To Set Up a React Project with Create React App(March 30, 2020)
  102. How To Set Up a React Project with Create React App(March 30, 2020)
  103. How To Set Up a React Project with Vite(January 23, 2023)
  104. How To Set Up a Ruby on Rails v5 Project with a React Frontend on Ubuntu 18.04(August 8, 2019)
  105. How To Set Up a Ruby on Rails v7 Project with a React Frontend on Ubuntu 20.04(November 4, 2022)
  106. How To Share State Across React Components with Context(July 22, 2020)
  107. How To Style React Components(June 9, 2020)
  108. How To Test a React App with Jest and React Testing Library(May 9, 2022)
  109. How To Use Axios with React(December 3, 2021)
  110. How To Use Emotion for Styling in React(March 30, 2021)
  111. How To Use Error Boundaries in React(July 21, 2021)
  112. How To Use Font Awesome 5 with React(May 14, 2020)
  113. How To Use Routing with React Navigation in React Native(August 28, 2020)
  114. How To Use Styling in React Native Apps(June 25, 2021)
  115. How To Use Typescript with Create React App(April 2, 2021)
  116. How To Validate a Login Form With React and Formik(April 10, 2020)
  117. How To Work with Context API in React and React Hooks(November 12, 2020)
  118. How To Write Snapshot Tests For React Components With Jest(August 14, 2020)
  119. How To use Skeleton Screens in React and React Native(June 23, 2021)
  120. How to Build a Tabs Component with React(August 25, 2020)
  121. How to Create a Countdown Timer with React Hooks(December 6, 2021)
  122. How to Enable Server-Side Rendering for a React App(April 4, 2022)
  123. How to Integrate the Google Maps API into React Applications(September 11, 2020)
  124. How to Wrap a Vanilla JavaScript Package for Use in React(July 22, 2021)
  125. I18n with React and i18next(October 24, 2017)
  126. Internationalization in React with React-Intl(December 24, 2019)
  127. Intro to Animations in React Using React Spring(August 29, 2019)
  128. Intro to GraphQL in React Using React Apollo & Apollo Boost(March 23, 2018)
  129. Introduction to Bulma CSS with React(May 28, 2021)
  130. Introduction to React 360(March 7, 2019)
  131. Introduction to React Hooks(December 6, 2018)
  132. Introduction to Using Redux in a React Native App(September 2, 2020)
  133. Introduction to the React Ref System(May 16, 2017)
  134. Learning the Basic Components of React Native(January 15, 2020)
  135. Loading React Components Dynamically with Hooks(September 17, 2020)
  136. Making Progressive Web Apps (PWAs) with React(March 2, 2019)
  137. Making React Apps More Accessible(August 14, 2019)
  138. Managing Form State in React With Redux Form(December 12, 2019)
  139. Mapping Routes in React Router(June 23, 2017)
  140. MobX with React Native, Simplified(December 7, 2019)
  141. Morphing UI Transitions with React Morph(April 27, 2020)
  142. Optimizing Server Requests with React Hooks(July 29, 2023)
  143. Progress Bar On Page Scroll Using React and styled-components(August 7, 2019)
  144. Rapid Prototyping Made Easy with React PowerPlug(September 28, 2018)
  145. React Devtools: A Brief Introduction(May 21, 2018)
  146. React Icons Gets You Access to Hundreds of Open Source Icons(July 5, 2019)
  147. React Keys and You(December 28, 2018)
  148. React Native UI Toolkit Roundup(August 7, 2017)
  149. React Router Overview(June 14, 2017)
  150. React Router Parameters(June 15, 2017)
  151. React Router: Optional Parameters(June 20, 2017)
  152. React Snapshot Testing(May 31, 2017)
  153. React.PropTypes Is Dead, Long Live PropTypes in React(April 9, 2017)
  154. ReactXP: Building Cross Platform Apps(March 5, 2019)
  155. Red Hot Form Validation for React Using calidation(July 23, 2018)
  156. Replacing Component Lifecycles with the useEffect Hook, in React(September 9, 2020)
  157. Returning Multiple Children Using React Fragments(April 14, 2018)
  158. Simple Authorization in React(May 29, 2018)
  159. Starting Off Strong with React and Next.js(March 23, 2017)
  160. Static Type Checking With Flow(February 27, 2017)
  161. Styling Components with React Fela(April 27, 2020)
  162. Styling React Components Using glamorous(May 9, 2018)
  163. Super Clean, Refactor-Friendly Import Statements in React(May 2, 2019)
  164. Take a Tour: New Features in Create React App v3(April 23, 2019)
  165. Tear-Free Forms with React and Formik(October 19, 2018)
  166. Testing React / Redux Apps with Jest & Enzyme - Part 1: Installation & Setup(May 20, 2018)
  167. Testing React / Redux Apps with Jest & Enzyme - Part 2: Testing React Components(June 3, 2018)
  168. Testing React / Redux Apps with Jest & Enzyme - Part 3: Testing Redux Actions(June 27, 2018)
  169. Testing React / Redux Apps with Jest & Enzyme - Part 4: Testing Redux Reducers(July 10, 2018)
  170. Theming styled-components(March 9, 2018)
  171. Understanding Constructors with React Components(January 23, 2019)
  172. Understanding How To Render Arrays in React(July 27, 2020)
  173. Understanding the React Context API(April 24, 2018)
  174. Understanding the React useMemo Hook(October 9, 2020)
  175. Up and Running With Reakit(September 20, 2018)
  176. Use Native Icons in React Native(August 8, 2018)
  177. Using Derived State in React(July 1, 2018)
  178. Using Enums in Flow(June 27, 2017)
  179. Using Font Awesome 5 in React(July 11, 2018)
  180. Using Geolocation in React Native(September 30, 2018)
  181. Using Storybook with React & Redux(January 8, 2019)
  182. Using TypeScript with React(July 14, 2022)
  183. Using the New Portal Feature in React(November 3, 2017)
  184. Using the React-Async Library for Declarative Data Fetching(December 12, 2019)
  185. Working With Types Using React.PropType(February 13, 2017)
  186. Write React Faster with the Simple React Snippets VSCode Extension(December 12, 2019)
  187. react-notifications-component, a Powerful React Notifications Library(September 1, 2019)
  188. styled-components, the Modern Way to Handle CSS in React(February 22, 2018)
  189. How To Boost SEO Using Gatsby's SEO Component and Gatsby React Helmet(April 12, 2021)
  190. How to Integrate the Google Maps API into React Applications(September 11, 2020)

8. Related page.



Comments ( )
<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
<SITEMAP>  <MVC>  <ASP>  <NET>  <DATA>  <KIOSK>  <FLEX>  <SQL>  <NOTES>  <LINUX>  <MONO>  <FREEWARE>  <DOCS>  <ENG>  <CHAT ME>  <ABOUT ME>  < THANKS ME>