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!

19 comments

  • #1 Nick Rothwell said 2022-04-03T17:05:50Z

    Looking forward to the book. I'd be interested to know how much of this is transferrable to mobile apps built using React Native...

  • #2 Alex said 2022-04-04T00:16:20Z

    Excited to follow along for the React tutorial. I used your Flask Mega tutorial from a few years back and was very impressed at the way you explain the topics. Amazing work!

  • #3 Paul said 2022-04-04T02:30:04Z

    Hi Miguel, Looking forward to your React tutorial. Although I must say my javascript knowledge is not at all good. Would you say it would be beneficial to complete a basic Javascript course from a site like w3schools or MDN before jumping into React. ?

    Thanks again .

  • #4 Miguel Grinberg said 2022-04-04T14:28:08Z

    @Nick: The concepts in this series are directly applicable to React Native apps, but React Native is not covered.

  • #5 Miguel Grinberg said 2022-04-04T14:29:27Z

    @Paul: Yes, my recommendation is that you do get the basics first, if not you are going to have too much on your plate all at the same time.

  • #6 Francis said 2022-04-08T17:58:51Z

    Thanks for this Miguel. Having gone through the Flask mega tutorial, I am excited for this one. One question I have always had is whether one can do without react. many of the features you describe in this introductory video were also covered in the flask tutorial. Where does using react have an upper hand for frontend?

  • #7 Miguel Grinberg said 2022-04-08T18:09:30Z

    @Francis: The goal is to present the application to the user on the browser. Flask achieves this in the server. React does it in the client. It's just two different ways to create applications for the browser. Depending on the application or on personal preference you may want to use one or the other.

  • #8 spmsh said 2022-04-16T01:28:17Z

    Hi Miguel,

    Looks great content as usual and actually perfectly what I was looking for. I'm about to purchase the course, as I'm interested by this one a lot, and also has a token of appreciation for all the previous tutorials that helped me a lot.

    Just one question, I have built a flask application, mostly relying on jinja2 for the frontend and I'd like to move that frontend part to React in a more SPA, but still served by my flask app instead of nodejs. Do you see any problem with that re your course?

    Thanks

  • #9 Miguel Grinberg said 2022-04-16T14:53:50Z

    @spmsh: The course teaches how to write React applications. There is some general info on deployment, but you are free to implement the deployment as you find most convenient.

  • #10 Tomas said 2022-04-17T06:07:03Z

    Hello,

    Will it have some back end, like flask?

    thanks

  • #11 Miguel Grinberg said 2022-04-18T09:52:58Z

    @Tomas: This is a front end course with React. If you are interested in learning Flask, see my Flask Mega-Tutorial.

  • #12 Stanley said 2022-04-19T19:03:48Z

    I am having a problem with the Microblog API 1.0.

    When I click the "Send API Request" button I get a 401 response. I'm using Windows 11 with a Chrome browser. Can you help me out?

  • #13 Miguel Grinberg said 2022-04-19T22:21:51Z

    @Stanley: You need to follow the instructions in Chapter 5 regarding starting the Microblog API service with authentication disabled. Have you done that?

  • #14 Stanley said 2022-04-20T14:55:37Z

    I used the Python method for the back-end. I set up a SendGrid account. However, I never incorporated any email settings in my MIcroblog API python application. Unlike the Heroku and Docker methods, I didn't see any instructions for doing this in the Python section in Chapter 5. Could this be the problem? Do I need to incorporate SendGrid mail server settings in my python app. for the "Send API Request" button to return a positive response? Are there instructions for how to do this?

  • #15 Miguel Grinberg said 2022-04-20T15:52:55Z

    @Stanley: Okay, I think the problem is here, and maybe I need to make this more clear in the text. In all three versions of the installation instructions, you have to provide configuration. There's two things that are required. One is your email settings, which can be done with a SendGrid account if you like, or your own email server. Second, and most important in the early chapters, is that you need to disable authentication in the API service, so that you can write your React application without authenticating (for now, auth is implemented later in the tutorial). The instructions to create a .env file apply to both Docker and Python. I suspect you assumed those instructions apply only to Docker and skipped them.

  • #16 Stanley said 2022-04-20T21:19:58Z

    Yes, I assumed the configuration information didn't apply, but everything is good now. Thanks for your help.

  • #17 Stanley said 2022-05-02T20:24:42Z

    Hello Miguel, Everything was going well until I completed the Registration page. When I clicked on the Registration button I received a console error: "api.post is not a function". The error referred me to line 30 on the RegistrationPage.js file. I copied the page from your github site, to ensure I had no typos, however, I still got the same error. After much trial and error I changed line 30 to "await api.get( ..."). This seems to work. Not sure if there is an error in your code, or I made an error on another page.

  • #18 Miguel Grinberg said 2022-05-03T08:12:53Z

    @Stanley: post() is a method of the MicroblogApiClient class. Did you confirm that you have the method defined? Here is the link to the code: https://github.com/miguelgrinberg/react-microblog/blob/v0.7/src/MicroblogApiClient.js#L48

  • #19 Stanley said 2022-05-03T18:45:26Z

    Thanks Miguel, For some reason I failed to include the post method in the MicroblogAPiClient class.

Leave a Comment