React 16 – The Complete Guide (incl. React Router 4 & Redux)

Let me introduce you to this module and to the course in general - welcome on board! :)

Let's dive into the most important question first: What is React? In this lecture, we'll take a closer look.

We learned what React is but it's always more useful to see real-world examples. So let's dive into some web pages that use React or a similar framework/ approach in this lecture.

There might be an error when adding React-DOM to Codepen. Use the solution shown in this lecture to fix it.

With the theory out of the way: Let's dive into React and let's actually write our first React code.

Why React? Why not vanilla JavaScript? What's the advantage of picking a library like React? These answers will get answered in this lecture.

React's not the only library you can dive into. Let's take a closer look at some alternatives you have.

With React, you frequently create Single Page Applications. Now what does that mean? What is a Single Page Application? This lecture will answer these questions.

You now know what React is but what does the course actually offer you? This lecture will answer that question.

There's more than one way of taking a course. Let's find out how you can get the most out of this course in this lecture.

This lecture contains some useful resources and links. It also holds all the code for the module attached to it.

Let me introduce you to this module and to what you're going to learn in it.

One important next-gen feature you're going to see a lot is the usage of "const" and "let" instead of "var". What's up with these keywords? This lecture answers the question.

Arrow functions are another key next-gen feature we'll heavily use in this course. Let's dive into how to write them and how to use them in this lecture.

We'll write modular code in this course. That means, that the code will be split up across multiple files. In order to connect these files correctly, we'll need imports and exports. So let's dive into that feature in this lecture.

The "class" keyword is another new feature you'll see quite a bit in this course. Learn what it's about in this lecture.

Classes may have properties and methods. There actually are different ways of defining these. Let's dive into the details in this lecture.

React also makes heavy usage of the "Spread" operator. Or React projects do, to be precise. Learn more about that new operator in this lecture.

Time to destructure! It's a new JavaScript feature and it allows you to ... do what? Let's explore the feature in this lecture.

Not next-gen but super important: Knowing the difference between reference and primitive types. This lecture will explore both.

We'll use a lot of array functions in this course. They're not next-gen but you need to feel confident working with them. So let's explore them in this lecture.

Let me wrap this module up and summarize what we learned thus far.

Have a look at this lecture to get a good overview over the various next-gen JS features you'll encounter in this course.

Here's something we'll also use quite a bit in this course: Some JavaScript array functions.

Let me introduce you to this module and to what you're going to learn in it.

When creating React apps, we typically use a lot of modern development features. To use all these features, a modern build workflow is needed, too. Learn more about that in this module.

Fortunately, we don't have to set up a build workflow manually - there's a tool for that! Let me introduce you to create-react-app.

create-react-app allows us to easily create React projects. Let me now walk you through the structure of such a project.

Components are THE core building block of React apps. Time to dive into them and learn more about them.

JSX is the meat of a component - every component needs to return some JSX (or the alternative shown in this lecture). Let's explore it!

When using JSX, we face some restrictions. Let's find out which these are.

We had a look at components already but now it's time to also create our own component. And for that, we'll use a different way of creating it. Learn more about it (and the WHY) in this lecture.

Time to quickly summarize what components and JSX are about.

Since we compose our app from components, it's of course also crucial to understand how we work with them and how we make sure that they are re-usable.

Rarely, you only want to output static content. Learn how to easily output dynamic content in this lecture.

When working with components, you typically also need to pass data around. Props are used for that - learn more about this core concept in this lecture.

There's a special property we can access on our props - the children property. Learn what's up with it in this lecture.

Props are used to pass data from a parent to a child component but what should you do if you want to change the data you display from within a component? "state" is there to save you! Learn more about it, in this lecture!

Props and state are crucial elements of React - time for a quick comparison and summary.

Obviously, your app is probably also going to involve the user. Handling events is therefore crucial. Learn how to handle events the React way, in this lecture.

We saw onClick in the last lecture - but to which other events can you actually listen in React apps?

You learned about state and how to handle events - time to bring both concepts together and manipulate the state to force an UI update.

We learned about two different ways of creating components - which should you use when?

What if you want to listen to an event in a child component? Can you still trigger a method in the parent component? Yes, you can - learn more about it in this lecture.

When handling user input, two-way-binding is very useful and actually required to both listen to the user input and also reflect the latest state. Learn how to implement it in this lecture.

Unstyled components don't look that exciting. Time to learn how to add styling!

Using CSS stylesheets is one way of adding styling - a static one though. Learn about a different, more flexible way in this lecture.

This lecture contains some useful resources and links. It also holds all the code for the module attached to it.

Let me introduce you to this module and outline what we're going to cover.

Not all content should be visible all the time - let me introduce you to conditional rendering in React apps in this lecture.

In React, everything is JavaScript, that's extremely important to understand. Let's now dive into how that helps you when handling dynamic content.

Outputting lists (arrays) is a core task you'll probably face in any web app you build. Let's have a look at how React supports you in this lecture.

Time to get our hands dirty and actually output a list in React.

Often, you want to connect lists to your app state and also be able to react to events. Learn more about these things in this lecture.

When updating state, you should make sure to not overwrite the original state. Learn more about that in this lecture.

React updates the UI for you and it does so very efficiently. To be able to do that, you need to support it when working with arrays of JSX (=> Lists). Learn how to do that in this lecture.

Let's dive deeper into lists and see how we can really create flexible lists in this lecture.

Let me wrap this module up and summarize what we learned thus far.

This lecture contains some useful resources and links. It also holds all the code for the module attached to it.

Let me introduce you to this module and explain what you're going to learn.

What's so interesting about styling? Let me outline some potential pain points and where we'd like some help from React

Since everything's JavaScript, it would of course be nice to also get some dynamic styling. Let's explore some options in this lecture.

Not only the styles themselves can be dynamic - the classes we assign could also be. Let's dive into that in this lecture.

We saw that inline styles have some limitations. Let's find out how we can work around them.

Radium is an interesting package as we saw. Let's explore how we use it together with Media Queries.

Radium is a nice package for enabling standard CSS features. But why not use standard CSS and scope it to components? Learn more about that in this lecture.

Want to dive deeper into CSS Modules? This lecture should be very helpful and provide additional insights into that technique.

CSS modules were added, time to use them for pseudo selectors and media queries! Let's start with the pseudo selectors here.

After adding pseudo selectors, let's next have a look at media queries.

This lecture contains some useful resources and links. It also holds all the code for the module attached to it.

Let me introduce you to this module and to what you're going to learn in it.

Errors can be frustrating but React actually provides some useful error messages. Let's learn how to interpret them.

Error messages can be annoying but logical errors are way worse. Learn how to use useful browser tools to find such logical errors.

React also has its own dev tools which you may use. Learn how to use them in this lecture.

With React 16, a new feature was added: Error Boundaries. Learn more about it in this lecture.

Let me wrap this module up and summarize what we learned thus far.

This lecture contains some useful resources and links. It also holds all the code for the module attached to it.

Let me introduce you to this module and to what you're going to learn in it.

Thus far, we haven't spent that much time on the project structure. Let's change that now and optimize it.

Splitting an app into components is what React is all about. Learn how to split it up in this lecture.

As you learned, you have two different options for creating React components. Time for another closer look.

React components follow a certain lifecycle - and you can hook into that lifecycle at clearly defined points. Let's explore our options and how that all works.

Sometimes, you need to convert stateless components to stateful components. Learn how easy that is in this lecture.

Let's start with the Lifecycle that applies when a component is created and let's see all the hooks in action.

There's one more lifecycle method you should be aware of - we'll also use it later in our course project.

We had a look at the lifecycle for component creation, let's now also explore the counterpart for component updates.

Time to also see the component-updating lifecycle hooks in action.

Finally, we have two ways of updating components - the lifecycles also vary slightly. Time to find out what differs.

shouldComponentUpdate is an important lifecycle method - we can have an easier time optimizing the component performance though. Let's explore the options.

We're already taking a closer look under the React hood. Let's continue this road and find out how it actually updates the component tree.