2022-04-02T10:13:14Z

Introducing the React Mega-Tutorial

Welcome to the React Mega-Tutorial! In this series I will share my experience in developing real-world, non-trivial front end applications using the React library and a handful of related packages.

Unlike most other books and tutorials, the React Mega-Tutorial will take you on a development journey. Instead of teaching you React concepts with isolated examples, it will show you how to develop a complete front end application. You will begin by creating a brand new React project, and then start adding features and functionality to it as you progress through the chapters. When you reach the end, you will have a complete project of which you will understand every single line of code. More importantly, you will understand the concepts and techniques involved in creating it, in way that will be directly applicable to your own projects.

Prerequisites

To make the most of this tutorial, you need to have basic experience writing applications in JavaScript. If you have created websites that have bits of interactive behavior using vanilla JavaScript, or maybe jQuery, then you should be fine.

Basic knowledge of HTML and CSS is also assumed. As with JavaScript, a basic level of experience is sufficient. You should know how to create simple HTML markup for things such as paragraphs, headings and images, and how to apply styling changes to them with CSS definitions.

Knowledge of the command line in your operating system will be useful. You will spend most of the time on a code editor and a web browser, but there are some tasks here and there that need to be carried out in a terminal session.

If you are using a Microsoft Windows computer, my recommendation is that you use the Windows Subsystem for Linux (WSL), which provides UNIX-compatible versions of bash, Node.js and all other required packages. Using the Windows command prompt or PowerShell should be possible, but you will need to adjust some command-line instructions.

You are welcome to use the editor that makes you most productive. At the time I'm writing this, Visual Studio Code is the favorite editor of many JavaScript developers, but these things tend to change over time, and I've taken special care to not introduce any dependencies to this or other editors.

To test your application as you develop it, you may use your favorite web browser. If you need a recommendation, many React developers prefer Chrome or Firefox, because they are the two browsers that support the React Developer Tools plugin, which can sometimes be useful in debugging React applications.

This course is available as a combination of written and video content from my courses site. The text of the tutorial is also going to be published on this blog for everyone to enjoy.

Ready to begin? Chapter 1 is awaiting you!

28 comments

  • #26 Miguel Grinberg said 2022-07-23T10:17:45Z

    @recep: Is the application attempting to refresh the access token? What's the response of the server when the refresh endpoint is called? Is the refresh token cookie included when this request is made? Is the refresh token cookie in your browser at all?

    These are all things that you can check to be able to provide more details beyond the "refresh token is not working". Without these details it is not possible for me to help.

  • #27 recep said 2022-07-23T10:18:31Z

    I am trying to inspect the cookie where the refresh token is, but I see nothing about it in my cookies. Normally if the server set cookies I would be able to see it?

  • #28 Miguel Grinberg said 2022-07-24T11:34:24Z

    @recep: I created a video in which I show all the things that you can check with regards to authentication. I hope this helps! https://www.youtube.com/watch?v=cQtbMuEdvpk

Leave a Comment