inkognitro / react-app-tutorial Goto Github PK

A tutorial for a full react app framework with auth, i18n, form errors, http & api handling.

learn-react learn-react-easy react react-framework tutorial

react-app-tutorial's Introduction

🙌 Special thanks go to easylearn schweiz ag. This is the company I currently work for. Our managers allowed me to create parts of this tutorial at working time.

react-app-tutorial

The purpose of this tutorial is to serve for a better understanding of the concepts of React while getting familiar with some state-of-the-art libraries used with it in 2022.

To go through this tutorial without lots of pain, you should be familiar with Javascript ES6+, React and JSX. This tutorial is written in Typescript. I think most people who understand Javascript can arrange with TS by doing this tutorial. No need to panic: It is just javascript with type hints.

Approach

Together we are going to build a single page app with an index and a register user page. The user registration form is going to be wired with a mocked api over http to also cover network traffic. The output of this tutorial is a clean and reusable framework built on top of React.

Out of scope

We do not cover redux in this tutorial. In my opinion and especially in this time (with React 16+) I think redux is an overkill for most cases. The trade-off between redux's code-splitting and therefore its higher complexity overwhelms the benefits of performance optimizations. I experienced that encapsulated components with its callbacks are a lot easier to understand and less error prone than reducers, actions and components which are split into different parts in the code base. For global and non steadily changed state I would suggest using the React's useContext hook.

Tutorial steps

Below you can see an overview of all steps of this tutorial.

Setup from scratch - Installation: create-react-app, linting
Authentication - Authentication context for the current user, import paths
Routing - Preparing page layouts and the page's skeletons, mui, styled-components
Internationalization - Translating contents, localization base, switching between two languages
Toaster - Providing a way to trigger messages (toasts) to the website user
Form - Providing basic form elements and the possibility of error enrichment
Collections - Designing an interface for collection providers, implementation for arrays
ApiV1 - Standardized http request handling, provide the first API version 1 endpoint
Wiring - Wiring the registration form with the mocked http endpoint, form element error messages

💡 To compare the code changes between the tutorial steps, just go to https://github.com/inkognitro/react-app-tutorial-code/compare and choose the specific tutorial step branches to compare. Some steps are split into smaller branches. Every step is an accumulation of all the steps before plus the code changes of the tutorial step.

Feel free to use the code for your own project. It's available under the MIT license 😉

Let's start »

react-app-tutorial's People

Contributors

Stargazers

Watchers

Forkers

michitheonlyone ameetmadan oliinykdm ganeshgandhionch

react-app-tutorial's Issues

Install axios before use

8.2. 8.2 Axios request handler

npm install axios && npm install @types/axios --save-dev

Install prettier before running eslint install command

Add "Install prettier with the command npm install prettier." to chapter 1.4. Setup linting

Webpack Deprecation Warnings

In config/webpackDevServer.config.js replace

    onBeforeSetupMiddleware(devServer) {
      // Keep `evalSourceMapMiddleware`
      // middlewares before `redirectServedPath` otherwise will not have any effect
      // This lets us fetch source contents from webpack for the error overlay
      devServer.app.use(evalSourceMapMiddleware(devServer));

      if (fs.existsSync(paths.proxySetup)) {
        // This registers user provided middleware for proxy reasons
        require(paths.proxySetup)(devServer.app);
      }
    },
    onAfterSetupMiddleware(devServer) {
      // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
      devServer.app.use(redirectServedPath(paths.publicUrlOrPath));

      // This service worker file is effectively a 'no-op' that will reset any
      // previous service worker registered for the same host:port combination.
      // We do this in development to avoid hitting the production cache if
      // it used the same host and port.
      // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
      devServer.app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
    },

with

    setupMiddlewares: (middlewares, devServer) => {
      // Keep `evalSourceMapMiddleware`
      // middlewares before `redirectServedPath` otherwise will not have any effect
      // This lets us fetch source contents from webpack for the error overlay
      middlewares.unshift(evalSourceMapMiddleware(devServer));
      if (fs.existsSync(paths.proxySetup)) {
        // This registers user provided middleware for proxy reasons
        require(paths.proxySetup)(devServer.app);
      }
      middlewares.push(
        // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
        redirectServedPath(paths.publicUrlOrPath),
        // This service worker file is effectively a 'no-op' that will reset any
        // previous service worker registered for the same host:port combination.
        // We do this in development to avoid hitting the production cache if
        // it used the same host and port.
        // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
        noopServiceWorkerMiddleware(paths.publicUrlOrPath)
      );
      return middlewares;
    },

Use https://learngitbranching.js.org as the base for adding a new git chapter.
Add git rules to the chapter, e.g. only commit when 2 thumbs up, create branch(es) for tickets etc.