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:

React Hooks

React Component Libraries

Material-UI as an alternative to Materialize

Routing

Adding a Router - React

State Management

Redux

Resources:

Dependency Management

Resources:

Progressive Web-Apps

Resources:

Type Checking

React PropTypes:

Typechecking With PropTypes - React

Flow:

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