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
  • #1 Nick Rothwell said

    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

    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

    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

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

  • #5 Miguel Grinberg said

    @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

    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

    @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

    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

    @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

    Hello,

    Will it have some back end, like flask?

    thanks

  • #11 Miguel Grinberg said

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

  • #12 Stanley said

    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

    @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

    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

    @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

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

  • #17 Stanley said

    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

    @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

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

  • #20 recep said

    I am getting the error microblog-api_1 | /bin/sh: 1: ./boot.sh: not found I think it has something to do with line endings but I could not solve it.

  • #21 Miguel Grinberg said

    @recep: I don't have enough information to give you detailed advice, but if you think the problem is line endings, then make sure you check out the code using UNIX line-endings, which are the expected ones.

  • #22 recep said

    everything works but the part with the refresh token doesn't and I could not find the mistake.

    const BASE_API_URL = process.env.REACT_APP_BASE_API_URL;
    export default class MicroblogApiClient {
    constructor() {
    this.base_url = BASE_API_URL + "/api";
    }
    async request(options){
    let response=await this.requestInternal(options);
    console.log(response)
    if(response.status===401&& options.url!=='/tokens'){
    const refreshResponse=await this.put('/tokens',{
    access_token:localStorage.getItem("accessToken"),
    });
    if(refreshResponse.ok){
    localStorage.setItem("accessToken",refreshResponse.body.access_token);
    response=await this.requestInternal(options)

      }
    }
    return response;
    

    }
    async requestInternal(options) {
    let query = new URLSearchParams(options.query || {}).toString();
    if (query !== "!") {
    query = "?" + query;
    }
    let response;
    try {
    response = await fetch(this.base_url + options.url+query, {
    method: options.method,
    headers: {
    "Content-Type": "application/json",
    'Authorization':'Bearer '+ localStorage.getItem("accessToken"),
    credentials:options.url==='/tokens'?'include':'omit',
    ...options.headers,
    },
    body: options.body ? JSON.stringify(options.body) : null,
    });
    } catch (error) {
    response = {
    ok: false,
    status: 500,
    json: async () => {
    return {
    code: 500,
    message: "The server is unresponsive",
    description: error.toString(),
    };
    },
    };
    }
    return {
    ok: response.ok,
    status: response.status,
    body: response.status !== 204 ? await response.json() : null,
    };
    }
    async get(url, query, options) {
    return this.request({ method: "GET", url, query, ...options });
    }
    async post(url, body, options) {
    return this.request({ method: "POST", url, body, ...options });
    }
    async put(url, body, options) {
    return this.request({ method: "PUT", url, body, ...options });
    }
    async delete(url,options) {
    return this.request({ method: "DELETE", url, ...options });
    }
    async login(username,password){
    const response=await this.post("/tokens",null,{
    headers:{
    'Authorization':'Basic '+btoa(username+":"+password)
    }
    });
    if(!response.ok){
    return response.status===401?'fail':'error'

    }
    localStorage.setItem("accessToken",response.body.access_token)
    return "ok";
    

    }
    async logout(){
    await this.delete('/tokens');
    localStorage.removeItem('accessToken')
    }
    isAuthenticated(){
    return localStorage.getItem("accessToken")!==null;
    }
    }

  • #23 Miguel Grinberg said

    @recep: You need to make an effort and be more specific about what's not working and how. Is the code that you are showing me my code? There is no point in showing me my own code. If you made changes, then tell me what you changed.

  • #24 recep said

    The refresh token is not working, I must login every time my access token expires. The code is my code, I writed along with the videos.

  • #25 recep said

    This is your code export default function UserProvider({ children }) {
    const [user, setUser] = useState();
    const api = useApi();

    useEffect(() => {
    (async () => {
    if (api.isAuthenticated()) {
    const response = await api.get('/me');
    setUser(response.ok ? response.body : null);
    }
    else {
    setUser(null);
    }
    })();
    }, [API]);
    when I used it I did not get any flash messages at all,then I added by the dependencies of the sideffect function so it the code inside it would be executed again but what I don't really understand is in your video your code is working, how is this possible?

Leave a Comment