React

Building Real World, Production Quality Apps with React & Redux

Outline

These days, the term "modern Javascript" is virtually synonymous with React and Redux. The core concepts behind these two libraries have changed the way that dev teams both large and small build web applications.

However, the solutions these libraries provide come at a cost: significant time up front to learn & master their necessary tooling.

Starting a new application with these technologies is no longer as simple as slapping a script tag into your HTML file. You now have to utilize a handful of tools to make your code work: a module bundler, a transpilation system, a library for making ajax requests, and more.

What you will learn

While most tutorials online cover the basics of React, Redux, and other tools individually, the purpose of this tutorial is to cover all of them cohesively. The primary focus of this course will be showing you how to rebuild the codebase of the exemplary RealWorld React+Redux project from scratch, which was created by this tutorial's author (Val Karpov) with guidance that was graciously imparted by the creator of Redux, Dan Abramov.

As such, by the end of this tutorial series, you will have a firm understanding of how to actually build web applications with React and Redux. This knowledge includes (and is not limited to):

  • Fundamental understanding of how Redux works & why to use it
  • How to start a fresh React/Redux project
  • Interacting with a live CRUD API for (C)reating, (R)eading, (U)pdating, and (D)estroying data
  • Authentication
  • Routing with react-router
  • and more.

We feel that learning is best accomplished by "doing," and as such, throughout this course, we will be creating a production-ready Medium.com clone called "Conduit" to demonstrate & apply these learnings. You can view a live demo of the application here. Conduit is a fully featured social blogging site including:

  • Authentication with JWT
  • Profiles with images
  • Write/edit/read articles
  • Comments on articles
  • Ability to "favorite" articles
  • Ability to follow other users & have their articles show up in your feed

For your convenience, we have a hosted API that you can build your application against. We're also going to release courses for how to create the backend in either Node, Rails, or Django over the next few weeks.


Prerequisites

Throughout this course, we’ll link to relevant resources to help fill potential gaps in your knowledge as well as supplementary material that can help you gain insight into the technology and its various components. However, we highly recommend that you have a firm understanding of the following before starting:

Basic JavaScript knowledge

React's and Redux's design principles closely follow Javascript's. As such, this course is geared towards folks who have a firm understanding of Javascript fundamentals. If you don't know JavaScript particularly well, this guide is a good place to start.

Solid understanding of how scopes work in Javascript

Specifically, you'll need to be familiar with the this keyword and how/when to use apply, call, and bind.

Basic knowledge of React

If you haven't explored React's core APIs yet, we recommend taking a quick peek at our "Getting Started with React" guide.

Type out all code instead of copy+pasting it

We're firm believers in actually writing code while learning a new language or framework, as it ensures you're not falling into the trap of "fake" learning.

If you have any questions, Google and Stackoverflow are your best bet

If you're unsure about something specific to this course, we have a Slack channel available to Pro members where than can ask questions and receive help in real time.

With all the said, let's get started!

 

I finished! On to the next tutorial