• Post category:Udemy (Sept 2021)
  • Reading time:12 mins read

Learn full-stack web development using JavaScript (ReactJS, NodeJS, LoopbackJS, Redux and Material-UI)!

What you will learn

Full-stack JavaScript

ReactJS

NodeJS

Rest API with LoopbackJS

Redux

Material-UI

Socket Programming

Description

If you would like to master JavaScript and get started as a full-stack web developer, you are going to LOVE this course! Learn full-stack JavaScript development working on coding projects using ReactJS, NodeJS, LoopbackJS, Redux, Material-UI and socket programming.

We will work on the following 3 coding projects in this course:

Calculator Application – We will go over the basics of what React is, how to create components and how to work within the React life-cycle.

Weblog – We will build a feature rich blog app using React and LoopbackJS. We will begin to explore the full-stack elements of JavaScript by coding our own REST API, and how the front and back-end can communicate with each other.

Chat Application –  We will explore socket programming. With a web socket you can keep clients connected on the server side. We will program a chat app where you can create a user account, add other users and then message back and forth with them.

This course was designed for students who have a basic understanding of front-end web development. It will be helpful if you know how to use HTML and CSS. A basic understanding of JavaScript is not required, but it will help you get up to speed with the tutorials.

All of the lectures are downloadable for offline viewing. English captions are available within the course.

Thank you for taking the time to read this and we hope to see you in the course!

English

Language

Content

Introduction and Setup

Welcome to the course!

Environment setup

Anatomy of a React project

Getting Started with ReactJS

Writing a React component

React life-cycle

The React state

Understanding component props and re-rendering

Importing CSS into React components

Writing a calculator part 1

Writing a calculator part 2

Building a ReactJS Website

React website setup

Component children

React routing

Route parameters and HTML slicing part 1

Route parameters and HTML slicing part 2

Services and portfolio pages part 1

Services and portfolio pages part 2

Working with forms in React part 1

Working with forms in React part 2

Using Formik

Yup form validation schemas

Rest API with LoopbackJS

Setup of REST API using LoopbackJS

Creating models

Model observers

Model relations

ESLINT

Subclassing access tokens

Persisting data using MongoDB

Creating data

Updating data

Finding model instances part 1

Finding model instances part 2

Deleting model instances

Creating post collection

Roles and rolemapping

Applying access control to our post model

Adding an editor role

Creating a category model

File storage and collection part 1

File storage and collection part 2


Subscribe to latest coupons on our Telegram channel.

Custom remote methods and file uploads part 1

Custom remote methods and file uploads part 2

Creating login route

Adding a login form

Redux and Material-UI

Wrapping components

Dispatching actions

Creating a store and reducer

Integrating remote API calls

Applying middleware

Material-UI intro

Drawer and CSS

Drawer collapsing and animations

Icons, lists and links

Main content class

Persisting reducers using localStorage

Basic tables

Fetching posts and users from our API

Fab buttons

Setting up Redux, Material-UI and Formik for our add post page

Material-UI forms with Formik

Flex display and connecting our post form to our database via Redux part 1

Flex display and connecting our post form to our database via Redux part 2

Editing existing posts

Uploading post images part 1

Uploading post images part 2

Integrating Quill as a content editor

Loading posts on the front-end part 1

Loading posts on the front-end part 2

Loading more posts on demand

Single post page

Registering new accounts

Posting comments and adding relations and ACLs to our API part 1

Posting comments and adding relations and ACLs to our API part 2

Deploying React apps with NGINX

Deploying our API using PM2 and NGINIX part 1

Deploying our API using PM2 and NGINIX part 2

Deploying our API using PM2 and NGINIX part 3

WebSocket Chat Application

Creating a chat app

Creating our chat store

WebSocket connections

Sending socket messages

Creating signup and login forms

Writing account based logic part 1

Writing account based logic part 2

Using auth tokens

Styling the messenger

Tracking logged in users

Search functionality

Creating new threads and sending to relevant clients

Connecting on page load if already logged in

Get threads on page load

Disconnecting socket sessions

Adding messages and sending to relevant clients

Rendering messages client-side

Rendering messages with user information

Ejecting a React application