Project WebApp

In this course you will realize your own web application.

It starts with the foundations like the necessary tooling needed for coding. And then over the different sessions a react.js based chat-app is built to show topics from styling over state-management to functional programming.

After finishing this course you should be able to build your own application running in the browser

Basics and Tools

The first thing you have to know before you can develop a successful web application is the platform you are running on. The “Browser…

Functional programming with JavaScript

As the name “functional programming” suggests, this lesson has a heavy focus on functions. In JavaScript, you can describe a function in…

From code to UI - Introduction to React.JS

To use react we need two packages from npm, react itself and react-dom . React takes care of managing a virtual DOM representation and is…

How to style react

The classic approach to styling in the browser is creating a CSS file and provide it with a <link /> tag. The tutorial from last session…

State management in a react app

Handling the state of an application is one of the core features of most frameworks and even react ha a build in state API. Every class…

Taking control over state-changes

As already said in last session, besides handling the state itself it is very important to take care of the state changes. An extremely…

Get firebase to sync your data

Till now the chat app is quite boring, because you can only talk to yourself. But for synchronization of the message history with other…

React on the server and the JAMstack

If you dig a bit deeper into the react-dom package you will find a sub folder called server and there is a function renderToString . As the…

Declarative animations with react-pose

In general animating the view is hard, because suddenly the state is dependent on time. Views can exist longer than they existed before…