Resource list leading to the path of Learning React

The current post aims to put together quality content about React into a central location for quick reference.

via unsplash.com

A curated list of resources to learn React and related web technologies as fast as possible. This is the preferred React stack:

Core

• TypeScript for type safety
• React — for building component-based UIs
• React Context & hooks for state management

Foundational libraries

• React Router for navigation
• React Query for fetching data using REST
• Apollo GraphQL for fetching data using GraphQL
• React Hook Form for form handling
• ag-Grid — a feature-packed JavaScript grid
• Highcharts for interactive charts

Essential tools

• Storybook to develop UI components in isolation
• React Testing Library for unit testing
• Cypress for end-to-end testing
• Mock Service Worker to mock HTTP requests
• Prettier to format code consistently

List of resources that will start you down the path to learning React:

• Official Doc
• How to React
• Teaching React Without Using React
• Hello World
• React Express

Setting up React

• Setting up your React.Js App
• Creating an App

JSX

JSX is a preprocessor step that adds XML syntax to JavaScript. You can definitely use React without JSX but JSX makes React a lot more elegant. — http://buildwithreact.com/tutorial/jsx

• Tutorial: JSX
• JSX in Depth
• React’s JSX: The Other Side of the Coin Cory House @housecor
• What does JSX stand for? Tom Occhino @tomocchino

The Virtual DOM

• The Inner Workings Of Virtual DOM
• The one thing that no one properly explains about React — Why Virtual DOM

React Elements

Elements are the smallest building blocks of React apps. — React Docs

• Understanding the Difference Between React Elements and Components Alex Johnson
• React Elements vs React Components Tyler McGinnis
• What makes an ‘Element’ an ‘Element’ vs a component? Tim Arney @timarney

Components

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen. — React Docs

• ReactJS — Components
• Understanding React Components — The Andela Way

Routers

• Introduction to React Routers
• Getting started with React Router

Redux

• Step by Step Guide To Building React Redux Apps
• A Guide For Building A React Redux CRUD App

React Hook Form

• React Hook Form documentation
• React Hook Form example with Yup validation
• Complex form example

GraphQL

• GraphQL concepts I wish someone explained to me a year ago
• Introduction to GraphQL
• Apollo GraphQL Tutorial
• Apollo Documentation
• GraphQL Schema Design
• GraphQL Code Generator
• GraphQL Scalars
• Apollo Link Scalars
• AWS AppSync

Additional Resources

• React.js cheatsheet
• Gatsbyjs : Build blazing fast apps and websites with React
• React Patterns
• Learn React.js in 5 minutes

Was this helpful? Did I miss something? Do you have a question? Get in touch by placing your comment.

If this post was helpful…it would mean a lot to me if you could click on the “claps” icon…up to 50 claps allowed — Thank You!