React Demo

Demo Code with Examples for educational purpose

Notes

Benefits of using React:

• Speed (virtual DOM)

Unspecific:

• A import React from "react" statement is required for JSX to be used
• react-script is used to build and run the application
  • Expects file public/index.html and src/index.js
  • %PUBLIC_URL% is a placeholder for the hosting URL
• JSX elements may be simple JS functions
• React styling expects className attributes instead of class for React elements (not components)
• If an attibute expects a JS object, remeber to embed it in curly braces, since those are required to state JS code
• Most falsy values like false, null or undefined won't be rendered and thus can be used for conditional rendering
• Dynamically listing React elements requires a key property
• Props are immutable, thus a component with local state needs to be a class based
• If not using arrow functions in event handler, remeber to bind the function to a class
• Separation of concerns into Presentational and Container Components might result into better code if complexity is high
• Using React Hooks relies on the order of the function calls

Resources:

• Create React App - Set up a modern web app by running one command
• Learn React.js - Full Course for Beginners - Tutorial
• All React Conditional Rendering Techniques
• Four ways to style react components
• Handling Events
• SyntheticEvent - Supported Events
• Lists and Keys
• React v16.3.0: New lifecycles and context API
• Introducing Hooks

React Hooks

• Hooks API Reference - React
• Rules of Hooks - React
• Hooks FAQ - React
• How to fetch data with React Hooks?
• TypeScript and React: Hooks
• How to Use the useReducer Hook

React Component Libraries

• Material-UI as an alternative to Materialize

Routing

• Adding a Router - React

State Management

Redux

Resources:

• Getting Started with Redux
• Redux Crash Course With React
• Where and When to Fetch Data With Redux

Dependency Management

Resources:

• No Need for Dependency Injection in React Components
• Render Props
• Mixins Considered Harmful

Progressive Web-Apps

Resources:

• Web workers vs Service workers vs Worklets
• Introduction to Service Workers

Type Checking

React PropTypes:

• Typechecking With PropTypes - React

Flow:

• Flow: A Static Type Checker for JavaScript
• Adding Flow - React
• TypeScript vs Flow - Github
• Remove React PropTypes by using Flow Annotations (in CRA)
• Type Reference | Flow
• Event Handling | Flow

TypeScript:

• TypeScript - JavaScript that scales
• Adding TypeScript

Animation

• React Transition Group

Patterns

• React Patterns

Coding Style

Conventions:

• Components start with uppercase
• Container Conponents
  • Suffix Container for a Container Component
  • Suffix Component for a Presentational Component
• Stick to a type of quotes for string literals

Automation:

• Using Prettier with VS Code and Create React App - Technical Credit - Medium

Tooling

• create-react-app - Github
• react-app-rewired - Github
• Firefix Add-ons - Redux DevTools
• chrome web store - Redux DevTools