React.js (Archives)

Specifying PropTypes allows for a clearer contract of your component and React will validate them in dev mode. You should put all props you accessed in PropTypes (enforced by feross/eslint-config-standard-react)

PropTypes is now a optional dependency.
For type checking use interface and TypeScript.

Class Components

Syntax for defining React Component:
React on ES6+ · Babel
What React component class syntax should I use? - React Kung Fu

ES5 React.createClass()
ES6 extends React.Component with constructor(), Class.defaultProps and .bind(this)
ES6 extends React.Component with class properties
It is explained here (with reference to JS's function calling and ES6 syntax)
How to Use Classes and Sleep at Night — Medium Your component should only extends from Component; use composition.

Router

use app framework like Next.js

React Router Mega Demo

Building a Router with Raw React
React and pushState: You're doing it wrong
Simple Routing with Redux and React

ReactDOM.render and the Top Level React API | React you need to call unmountComponentAtNode() if you ever change the root component

Remixing React Router | Remix 2022-03, handle data in router
The Holy Grail of React Router transitions on the web

You might not need React Router

molefrog/wouter: A minimalistic (~1KB) routing for React. Nothing extra, just HOOKS.

TanStack Router

was React Location

TanStack Router | React Router, Solid Router, Svelte Router, Vue Router
Comparison | TanStack Router vs React Router | TanStack Router Docs
What Is TanStack Router And Why I Love It - YouTube

Reach Router

Reach Router - Overview

Battle of the Routers: Reach Router vs React Router ← Alligator.io

React Router

202302: all react-router pre-v6 (2021-11) tutorials are obsolete

React Router source
Leveling Up With React: React Router | CSS-Tricks

A guide to using React Router v6 in React apps - LogRocket Blog
Complete guide to authentication with React Router v6 - LogRocket Blog
A Complete Guide to React Router: Everything You Need to Know

useLoaderData | React Router

TypeScript React/Redux

Why TypeScript with React? - Carl's Blog
Microsoft/TypeScript-React-Conversion-Guide: A guide for converting a simple JavaScript/React project to TypeScript. Contains both before an after code with the step-by-step process in the README below.

TypeScript and React
Taking React and Redux to the next level with Typescript - DEV Community 👩‍💻👨‍💻
10++ TypeScript Pro tips/patterns with (or without) React
Learning TypeScript with React - Part 1 - DEV Community 👩‍💻👨‍💻
Learning TypeScript with React - Part 2 (The what, why and how of interfaces) - DEV Community 👩‍💻👨‍💻....
A type-safe approach to Redux stores in TypeScript - DEV Community 👩‍💻👨‍💻
Redux 4 + TypeScript 2.9: A type-safe approach - DEV Community 👩‍💻👨‍💻
Improved Redux type safety with TypeScript 2.8 - Martin Hochel - Medium
Notes on TypeScript: Pick, Exclude and Higher Order Components - DEV Community 👩‍💻👨‍💻 series
Advanced TypeScript by Example: React Form Carousel
Writing better Reducers with React and Typescript 3.4

React Hooks in TypeScript - James Ravenscroft - Medium
React Render Props in TypeScript - James Ravenscroft - Medium

Tinkerer - Converting a React Codebase to Typescript. Part 1: Getting it to compile
Tinkerer - React To Typescript Part 2: Converting React Components to TypeScript

React Refs with TypeScript - Martin Hochel - Medium
How To Structure Your TypeScript + React + Redux App

create-react-app

STOP USING CREATE REACT APP - YouTube
tool for yesteryear

Create React App · Set up a modern web app by running one command.
facebook/create-react-app: Set up a modern web app by running one command. must have
create-react-app/packages/react-scripts at master · facebook/create-react-app
npm dependency is breaking some React apps today — here's the fix

10 Fun Facts About Create React App - Better Programming - Medium
create-react-app/CHANGELOG.md at master · facebook/create-react-app latest
Create React App 2.0: Babel 7, Sass, and More – React Blog

My Awesome Custom React Environment Variables Setup
Feature/different env config files #1343 by tuchk4 · Pull Request #1344 · facebook/create-react-app
bkeepers/dotenv: A Ruby gem to load environment variables from .env.

Customizing create-react-app: How to Make Your Own Template

Fix react-scripts issue when running on Dropbox's synced folder:
ln -sf ../react-scripts/bin/react-scripts.js node_modules/.bin/react-scripts

npx create-react-app my-app --template typescript since 3.3
create-react-app/packages/cra-template-typescript at master · facebook/create-react-app
cra-template-* - npm search
rafrex/spa-github-pages: Host single page apps with GitHub Pages React Router <BrowserRouter /> and custom 404.html

From create-react-app to PWA - LogRocket Blog

JetBrains/create-react-kotlin-app: Create React apps using Kotlin with no build configuration

Create Apps with No Configuration - React Blog
Getting started with create-react-app, Redux, React Router & Redux Thunk
notrab/create-react-app-redux: Basic starter kit for using React Router & Redux with create-react-app
Beyond Create React App: React Router, Redux, Redux Saga, and More
btg5679/react-redux-prod-starter: A ReactJS/Redux Production ready project foundation
How to build a React project from scratch using Webpack 4 and Babel
v4 Create React + Redux app structure with build configurations. What’s new?

Extending CRA

How to Use the Optional Chaining Operator in Your React App Right Now - DEV Community 👩‍💻👨‍💻
10 Fun Facts About Create React App - Better Programming - Medium

dilanx/craco: Create React App Configuration Override, an easy and comprehensible configuration layer for Create React App. override CRA settings, not supporting CRA 5
javascript - How to make an import shortcut/alias in create-react-app? - Stack Overflow

arackaf/customize-cra: Override webpack configurations for create-react-app 2.0

timarney/react-app-rewired: Override create-react-app webpack configs without ejecting
Customize Create React App (CRA) without ejecting using react-app-rewired from @dceddia on @eggheadio
Override Create React App conf w/react-app-rewired - Today I Learned

Proxy

Easiest way: add "proxy" key to package.json (for simple proxying)

{
  "proxy": "http://myhost.com:4000"
}

Proxying API Requests in Development | Create React App src/setupProxy.js since 2.0

Or install http-proxy-middleware and add src/setupProxy.js to the project.
Why you should use a proxy server with Create React App - LogRocket Blog

const proxy = require("http-proxy-middleware");
module.exports = function (app) {
  app.use(
    "/api1",
    proxy({
      target: "http://myhost1:4000",
      changeOrigin: true,
    }),
  );
  app.use(
    "/api2",
    proxy({
      target: "http://myhost2:5000",
      changeOrigin: true,
    }),
  );
};

React.js (Archives)

Smart and Dump Components

Render Props/HoC

React PowerPlug

James K Nelson

dan_abramov

PropTypes