React Masterclass

Ministry of Testing Athens (MOTA) is a highly active network of scientists and IT professionals specializing in Software Testing. JavaScript Masterclass presenters are active members of MoT Athens with extensive experience in software development projects & software testing projects.

Special fees apply for MOTA members. Calls us at 210-3680911 for more information.

• Understand how single-page applications (SPAs) using React work
• Build production-grade SPAs with reusable and efficient components.
• Implement form handling, event management, and state management in complex applications.
• Consume and interact with REST APIs and third-party services.
• Explore advanced React techniques like server-side rendering (SSR) with Next.js and manage global state with tools like Context API and Redux.

• Software engineers, developers, students who want to master React
• Developers who work with JS, HTML και CSS
• Developers who create interactive client & server-side applications
• Developers with experience in JavaScript frameworks like Angular or Vue.js  

Prerequisties: JavaScript, HTML and CSS

Απαιτούμενος εξοπλισμός:  Lap top/pc with text editor and browser – and the following software installed:

• Node.js - is a JavaScript runtime built on Chrome's V8 JavaScript engine. We will use the latest LTS version.
• npm - is the official Nodejs Package Manager (npm) which allows us to manage our dependencies and packages. It is automatically installed with nodejs, so you don't have to install it separately.
• VS Code, a code editor with many powerful features and extensions. 
• git / github account - is a version control system for source code and Github is a community site that allows easy creation and collaboration on git projects.

Intro

• SPA (single page applications)
• CLI tools (npm and git)

React Basics
ES6 for React 

• Core principles
• JSX
• Components
• Props and Children

React state, hooks and events

• React Hooks
• State
• Event handlers
• Forms
• HTTP requests
• React flow and component lifecycle

React styling

• CSS
• Inline styling
• CSS modules
• CSS in JS
• Styled Components

React global state management

• Context API
• Redux
• jotai
• zustand

React patterns and best practises

• Stateful and stateless components
• Layouts
• Render props
• Custom hooks
• Compound components

React ecosystem

• React Router
• React query
• React hook form
• UI libraries

React on server

• Next.js
• App router
• Server-side rendering (SSR) vs client-side rendering (CSR)
• Layouts
• use client VS use server??
• REST API

Extra 1 -  GraphQL