React basic

React is a relatively young framework, yet it boasts unprecedented popularity. There is a facebook behind it, which has a large number of applications written in it and is further developed. If you are among those who are considering deploying React in all projects, you will certainly not regret it. In the course, you will learn about the philosophy of React and show why it is so popular. In the course you will learn to design React.js components, understand the principles of the framework and get acquainted with the modern javascript ecosystem. You will learn how to build an entire application on React, but also how to integrate React into an existing application. On practical examples, we will show how React works, how to write an application in it and deploy it to a server. At the end of the course, participants will be able to independently create javascript single page applications in the React.js framework. 

For programmers who want to start creating applications using the React javascript framework. 

Introduction into React ecosystem

• Setup IDE
• Javascript & Typescript quick overview
• React introduction
• What is SPA and how does it work?

Package system and app scaffolding

• Vite - app scaffolding
• project folder structure
• using npm & yarn
• semantic versioning

React component system

• JSX
• differences between JSX and HTML
• React Fragment
• components - lifecycle, props
• component tree

Component state

• stateless, stateful components
• event handling
• component local state (useState)
• component lifecycle
• class components

Styling components

• conditional rendering
• applying styles
• CSS modules

Managing side effects

• useEffect
• Strict mode

Components

• creating own events
• children props

Creating forms

• controlled input

Making HTTP requests

• React Strict mode
• using third party library (axios)
• calling server via REST API
• writing custom hooks

Debugging & error logging

• debugger
• using console.log to analyze application flow
• using Google Chrome debugger
• using Google Chrome dev tools
• third party services

Advanced topics

• global application state using React Context
• accessing native element using useRef

Materials are in electronic form.