Original subtitles

So in the first course section,

we learned what React is and what it's about.

We had a first general overview of React

and why we might wanna use it.

In this course section,

we are now going to dive into all the basics

you need to know to build any kind of React app.

We're going to explore all the base features

and most importantly, we are going to learn

how to build component-driven user interfaces.

So how to build user interfaces

by embracing a concept called components which turns out

is actually embraced by React.

And of course, I will explain what exactly

these components are and why React embrace system

in this course section as well.

Now specifically for that, as I said,

we're going to learn about all the base features

that make up React, all the core syntax,

we're specifically also going to learn

about a feature called JSX or a special syntax called JSX,

what that is and why we use it.

Then as I also mentioned, we're also going to learn

what these components are, but most importantly also,

how we can build our own components with React

and how we can use them and how we can work with them.

And we're going to learn how we can work

with data in React apps, because most web applications

are not just about showing some static text,

but about outputting some data or updating some data

when things change on the screen.

And that's therefore, all is what we're going to learn

in this course section

but also in the next course sections in general.

Now, of course, I don't want to teach these things

by just using some boring theory or slides.

We will have all the required theory

that hopefully it's not boring,

but we will also build this first example project year,

this example web application.

This here it's entirely built with a React

and we are going to build it together

for this and the next course sections.

And I'm saying, and the next course sections,

because it turns out that React is a bunch of core features

and we will need a lot of these features

in this application.

It might look fairly trivial, but it actually isn't.

Once we finish this first application

which also is not the only one in the course,

you will have learned about basically

all important key concepts

which you need over and over again

in any React app you're going to build.

Now what is that though?

It's an expense tracker.

We can see our expenses also by year here,

we can filter, and you see as I filter,

does user interface automatically updates.

it updates and with a nice animation,

and it shows us the expenses for a selected year.

And of course we can also add a new expense

for example, maybe I bought some books for $39 in 2020,

let's say on December 16th, and if I add this expense here,

you see it shows up here the chart updates

and the data is also there if I switch to another year

and then back to 2020.

So this expense tracker

is what we're going to get started with.

And as we're going to build it step-by-step,

we are going to learn about all the key concepts

you gotta know when working with React.