My Opinionated Notes on React Development

check-these-out.md

Check out these other projects!

React - The library for web and native user interfaces

Package manager

• pnpm - Fast, disk space efficient package manager

Version manager

• nvm - Node version manager, for *NIX/macOS
• nvm-windows - Node version manager, for Windows

Platforms where you can use React

• Next.js - The React Framework for the Web
• Remix - Build Better Websites
• Astro - The web framework for content-driven websites

Language

• TypeScript - TypeScript is JavaScript with syntax for types
• JavaScript.info - Modern JavaScript tutorial

Testing

• Testing Library - Simple and complete testing utilities that encourage good testing practices
• Vitest - A Vite-native testing framework
• Playwright - Reliable end-to-end testing for modern web apps
• Cypress - Testing Frameworks for Javascript | Write, Run, Debug

Authoring

• Storybook - Frontend workshop for UI development
• Docusaurus - Build optimized websites quickly, focus on your content
• Pridepack - Zero-config CLI for building TypeScript packages

Other

• awesome-react - A collection of awesome things regarding React ecosystem

write-up.md

Write up 20240309

• Remember that software in the browser started out as Web pages, documents that display information.
  • Then it evolved into documents that accept information.
  • Alongside, JavaScript was made to complement this use case, which led to interactivity, user experience improvements, and other client-side logic in the browser.
• Component-based development came out as a sort of way to make dynamic HTML consistent in implementation and design
  • One of the earliest technologies that were used for component-based development is jQuery
    • Authors define their own extensions to jQuery after querying markup already defined in the page.
      • One example is the component library Bootstrap, which incorporates jQuery into adding interactivity to static markup
  • Then came out Angular.js, which tried to iterate jQuery by defining a full-fledged framework.
    • Besides markup, it also managed an early form of dependency handling through its built-in dependency injection container, upon which components, business logic, and anything in between are compartmentalized
    • jQuery still powers the component interactivity of Angular.js
  • React was born as a solution to further formalizing the data flow between components and modules
    • It changed the way of writing components, while maintaining the level of granularity that other frameworks have to offer
    • It popularized the unidirectional data flow, which Angular.js started near the end of version 1
      • Because of React’s data flow, as well as its change detection feature, React also became a good companion for Redux, which further built upon Flux architecture of stores/dispatchers/reducers/actions (https://www.freecodecamp.org/news/an-introduction-to-the-flux-architectural-pattern-674ea74775c9/)
    • Soon after React matured in the Web, it was also implemented for other rendering targets such as mobile, and eventually desktop (React Native)
    • React became more popular when it changed its licensing from BSD-3-Clause to MIT in 15.6.2 (2018, https://www.npmjs.com/package/react/v/15.6.2)
  • React is still the most downloaded framework as of 2024-03-09 (25M downloads) https://npmtrends.com/@angular/core-vs-react-vs-vue
• How to start a React project in 2024?
  • Please don’t use Create React App!
  • Use the popular platforms for kickstarting your projects
    • Next.js is the most popular option, backed by Vercel which is a vital advisor to the future of React features.
    • Remix is a decent alternative to Next.js, offering different approaches to routing and configuration.
    • Astro is a viable choice for content-driven Web sites and apps, supporting many frameworks including React