Курс по JavaScript with React JS

Кратко представяне на езика за програмиране JavaScript:

JavaScript е интерпретиран език за програмиране, разпространяван с повечето Уеб браузъри. Поддържа обектно-ориентиран и функционален стил на програмиране.Най-често се прилага към HTML-а на Интернет страница с цел добавяне на функционалност изареждане на данни. Може да се ползва също за писане на сървърни скриптове NodeJS, както и за много други приложения.

Цел на курса по JavaScript- Advanced with React:

Курсът по JavaScript – Advanced е продължение на JavaScript – Basic курса, като засяга по-задълбочени материaли. Курсистите ще бъдат запознати с по-напреднали техники, технологии и инструменти за автоматизация. Голяма част от занятията ще включват практически задачи, в които курсистите ще трябва да разработят сами (с помощ от лектора) приложения по предварително поставено задание.

За кого е предназначен курсът:

Препоръчително е курсистите да имат завършен курса по JavaScript – Basic, или да имат основни познания по HTML, CSS и JavaScript – синтаксис, типове данни, функции, DOM манипулации и AJAX.

Мащаб на групата:

С цел по-ефективно обучение, групите са ограничени до 8 курсиста.

Хостинг план:

Безлатен хостинг за всеки един курсист за целите на курса, предоставен от нашите партньори от Суперхостинг, чрез план – “СуперПро” . Повече информация – тук.

Издаване на Сертификат:

В края на обучението се държи тест или се предава практически проект, според преценка на преподавателя. Всеки курсист, който успешно се справи с поставената финална задача, може да заяви на office@progressbg.net да му бъде издаден Сертификат. Таксата за издаване е 30 лева.

Учебна програма на курса по JavaScript with ReactJS

Хорариум ( 100 уч. часа ) :

Theme 1: Introduction

-Course intro
-About the course
-What you’ll learn
-Course github repos (slides and labs)

JavaScript (and DOM)
-Historical overview in 10 minutes (or how the history repeats itself)
-JavaScript standards: ES5, ES6, …ES2018 and ES.Next?
-The difference between JavaScript and other OOP languages
-JavaScript data types: “is everything an object”?
-DOM – overview, elements, events

Theme 2: JavaScript Essentials

-Functions and Function Expressions8
-Defining Functions
-Function Declaration vs. Function Expression vs. Function Constructor
-Scope
-Immediately-invoked function expressions (IIFE)
-Closures
-Recursion
-Factorial example
-Traversing the DOM
-Recursion with expressions
-Functional-based programming with JavaScript

OOP in JavaScript
-OOP in a nutshell
-OOP in JavaScript
-Object creation
-Object Literal (object initializer)
-Constructor Function
-The Object.create() method
-Object properties (including ES6 syntax)

Go deep into the “this” context
-“this” in global context
-“this” in function invocation context (strict or non-strict)
-“this” in method invocation context
-“this” in constructor invocation context
-“this” in call(), apply() and bind() methods

OOP – Inheritance in JavaScript6
-Classical (class-based) Inheritance vs. Prototypal Inheritance
-Classical (class-based) Inheritance in JavaScript
-Prototypal Inheritance in JavaScript
-Prototypal Inheritance – How it works?

Function as object
-The Function object
-The Function prototype object
-The arguments object
-bind(), apply(), and call() methods

Other ES6 Features
-Template literals
-New string methods
-The Arrow function syntax
-Default parameter values
-The spread operator
-Rest parameters
-Destructuring
-New object literal features
-Object.assign() method
-The Class Syntax
-The for-of loop
-New data structures (Maps, Sets, Typed Arrays)

JavaScript Exceptions
-Exceptions
-Exception handling
-Try-catch block
-Throwing exceptions
-Custom exceptions

Promises and Asynchronous Programming
-Asynchrony in JavaScript
-Callback-oriented programming?
-JS Promises
-Async/Await

Regular Expressions in JavaScript8
-Regular Expressions basis
-Regex Syntax
-Create RegExp in JavaScript
-Use RegExp in JavaScript

Theme 3:Design Patterns and Best PracticesTotal

Concise review of JavaScript Good Practices
-Naming in JavaScript
-Scoping
-Global and function
-Fake block scope
-Duplicated Object Identifiers
-Variables
-Strict mode

Design Patterns Overview. Creational Patterns
-What are design patterns?
-the Constructor Pattern
-The Factory Pattern
-The Singleton Pattern
-The Module Pattern

Member patterns
-Public/Private/Privileged – clarify the concepts.
-Private and Privileged Members – the Crockford Pattern.
-Private and Privileged Members in object prototype.

Structural Patterns
-Mixins
-Decorator
-Iterator
-Observer

Theme 4: HTTP Basics

Client-Server Communications on HTTP
-HTTP protocol overview: Request and Responde Message Formats
-HTTP Request Methods.
-The “GET” Request Method
-The “POST” Request Method
-Other HTTP Request Methods
-The concepts: IP, Port, host, DNS.
-Setting up a node.js localhost server. Look at conf and hosts file.
-Let’s code – The guts of Simple User Registration App

Web Storages
-Cookies
-SessionStorage
-LocalStorage

Theme 5: Web Services, AJAX and SPA

WebServices
-Overview
-XML vs JSON
-JSON syntax and tooling

AJAX: consuming Remote Data with JavaScript2
-XMLHttpRequest object
-A historical overview
-Creating Pure JS HTTP request through XMLHttpRequest
-Demo with jQuery Ajax
-Demo with promises
-The callback hell
-The modern way – Fetch API

Third Party APIs
-What is API?
-Backend Services REST API
-Examples
-GitHub API
-Google Maps API
-YouTube API

Single-Page Applications and Patterns2
-What is a SPA app?
-Architectural Design Patterns
-MV* patterns – MVC, MVVM and MVP
-Sample implementation in JavaScript
-An overview of the “big three” for SPA: Vue, React and Angular

Theme 6: react.js

Introduction to React
-Overview
-Setup the environment. Tooling.
-Write your first react app
-Get familiar with create-react-app cli
-Design notes on the DemoApp we’re going to build.
-Splitting our DemoApp on Components

JSX
-What is JSX and why you’d want to use it
-Embed Expressions in JSX (and JSX into JSX)
-Define Attributes with JSX
-JSX transpilitaion
-Hands on DemmoApp

React Elements
-What’s in an element
-React Elements vs DOM Elements
-React Virtual DOM
-How React updates the DOM Elements
-Hands on DemmoApp

React Components and Props
-Function and Class Components
-How a component is rendered?
-Components composition
-Props and props types
-Hands on DemmoApp

State and Lifecycle in a React component
-State in react.js
-Components Lifecycle
-Hands on DemmoApp

Events handling in React
-DOM Events and Event Bubbling
-The Event Loop
-React Event Handlers
-Async Event Handlers
-Hands on DemmoApp

Lists in react
-Arrays and lists of elements
-Basic List Component
-Keys
-Embedding map() in JSX
-Hands on DemmoApp

Forms and Authentication
-Forms management in React
-Token-based Authentication (JWT)
-Authorization, public and private pages
-Hands on DemmoApp

State Management. Flux. Redux.4
-Manage the state outside of React
-Get familiar with Flux
-Level up with Redux
-Hands on DemmoApp

Course projects discussion

График на курса по “JavaScript – Advanced with React”:

Следващите начални дати са:

17-ти февруари 2024г.  (съботно-неделна форма на обучение от 14:30 до 17:30 часа, което са 4  учебни часа с 20 минути почивка).  Занятията ще се провеждат всяка събота и неделя. Край на курса: 18-ти май 2024г. (без занятия на 04-ти и 05-ти май 2024г. – Великден).

Обучението се провежда в малка бутикова група, като всеки от тях може да избира между:

• присъствена форма –  на място в учебна зала на пл. Славейков.
• или да се включи онлайн от вкъщи през нашия Zoom business account.

Цена и заплащане на курса:

Цена: 990 лв.

Има възможност за разсрочено заплащане на курсa на две вноски. Първата вноска от 500 лева се внася при записването, а втората (490 лева) в началото на втория месец от обучението.

Видео представяне на курса “JavaScript Advanced with React”

Полезни статии относно JavaScript:

8 ПОПУЛЯРНИ ПРИЛОЖЕНИЯ, РАЗБРАБОТЕНИ НА REACTJS
ТОП 9 ПРИЛОЖЕНИЯ НА JAVASCRIPT
КАКВО Е JAVASCRIPT И ТРЯБВА ЛИ ДА ГО УЧИМ?

Запиши се сега!

Допълнителни условия:

• Записването се извършва единствено по банков път, моля погледнете номера на банковата сметка по-долу.

Номер на банкова сметка:
IBAN:BG49CECB979010E2257300
BIC:CECBBGSF
Получател: Прогрес 2013 ЕООД
Основание за плащане: наименованието на записания курс и началната дата на обучението
(например – Курс по Java от 15.10.22г. )

Изпратете ни платежното нареждане ( снимано/сканирано ) на email: office@progressbg.net или на Viber. След това ще получите допълнителна информация от екипа.

Преподаватели