Introducing the React Mega-Tutorial

Posted by
on under

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!

Become a Patron!

Hello, and thank you for visiting my blog! If you enjoyed this article, please consider supporting my work on this blog on Patreon!

37 comments
  • #26 Miguel Grinberg said

    @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

    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

    @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

  • #29 Austin said

    If we want to learn how to build full stack React Front End / Flask Back End from scratch, which of the two mega tutorials do you recommend completing first?

    Thank you.

  • #30 Miguel Grinberg said

    @Austin: Front and back end development are completely separate, so there is no mandatory order. That said, most people find working with Python easier than working with JavaScript, and for that reason they learn back end programming first.

  • #31 Mike said

    Hi, Miguel. Just bought your book today, thank you for the high quality product! Sorry to point your attention to the probably minor issue, but page 46 refers to "CamelCase" writing. Although it seams like convention to call them "PascalCase", "camelCase", and "snake_case" writing. I really appreciate the stile you write, conciseness, and your skill to highlight the topics that really practical. Merry Xmas!

  • #32 Miguel Grinberg said

    @Mike: I think PascalCase would be a strange thing to mention, since Pascal does not have a wide reach these days. I have always referred as camel case both "camelCase" and "CamelCase" and if there is a need to disambiguate then I have used UpperCamelCase and lowerCamelCase. So maybe I should have used UpperCamelCase here.

  • #33 Daniel Amaro said

    Una vez mas, me veo nadando en tus impresionantes cursos, tus aportes a la comunidad no son nada despreciables, eres un crack, gracias por tu trabajo todos estos años

  • #34 Marcus said

    I am working through the book and have run into a problem using Docker (new to me).
    I have cloned the microblog-api repo
    Ran 'docker-compose up -d' which looked successful
    In Docker though the log indicates: '/bin/sh: 1: ./boot.sh: not found' and continuously restarts the container.
    I deleted the container, rebooted and started over with the docker-compose up -d command and am experiencing the same error with boot.sh not found. I see the boot.sh file in the repo that was cloned, its contents appear correct and match the contents on github.
    I would be happy if someone could direct me or tell me what I should be looking into next, I would love to learn more as I work through discovering the issue and resolving this. I am just at a point that I'm not sure what to look at next. I am now starting some Docker material to learn more but that may be a long shot in solving this particular issue. Any help, tips or direction is appreciated. Cheers!

  • #35 Miguel Grinberg said

    @Marcus: I'm not sure exactly what the problem might be, but I suggest you delete the microblog-api image and then run the docker compose command again so that it gets rebuilt from scratch. To delete the image run docker rmi microblog-api. If you get an error, run docker-compose down and then try again. After you delete the image, run the up command again and the image will be rebuilt.

  • #36 Marcus said

    In troubleshooting the issue with ./boot.sh not found, the issue with the Docker container was actually an issue with the boot.sh file end of line termination encoding. In simple terms, if you have this issue and are running the container on Docker in Windows, you may want to first open the boot.sh file with a program like Notepad++ or a code editor like Sublime that allows you convert the line endings to be Unix format.

  • #37 Miguel Grinberg said

    @Marcus: Oh, I see. Thanks for coming back and sharing the solution!

Leave a Comment