React Fundamentals

Readings

1. The raw React API

   • React
     • Responsible for creating elements (like document.createElement)
   • ReactDom
     • Responsible for rendering React elements to the dom (like node.append)
   • ❗ Understand in more detail how that function worksReact.createElement(),
   • pomber/didact: A DIY guide to build your own React
   • Kent's Blog: Javascript to Know for React
   • MDN Webdocs: DOM
   • React Source Code
   • UI.dev: Imperative vs Declarative Programming
   • unpkg

2. JSX

   • ❗ Train your brain to look at JSX and see the compiled version of the code!
   • React docs: Introducing JSX
   • React docs: JSX in depth
   • Kent's What is JSX
   • Babel, online Babel Repl

3. Custom Components

   • Components are basically functions that returns something that is 'renderable' (IE more react elements strings, null, numbers, etc)
   • The first argument of React.createElement() can be a string, but that first argument can also be a function that returns something renderable.

4. PropTypes, Fragments, and Styling

   • React Docs: Fragment
   • React Docs: Type Checking with PropTypes
   • MDN Docs: CSSStyleDeclaration

5. Forms

   • MDN: Web forms — Working with user data
   • ❗ Exercise 6.3
   • ❗ Exercise 6.2
   • ❗ Controlled vs Uncontrolled
     • “uncontrolled” - means that the browser is maintaining the state of the input by itself, we can be notified of changes and “query” for the value from the DOM node.

6. Rendering an array

   • Kent's Blog: Understanding React's Key Prop
   • Stackoverflow: What is the significance of keys in ReactJS?

7. Etcetera

   • My old notes
   • Matt Zabriskie: React Workshop Exercises
   • Alex Kondov: Tao of React - Software Design, Architecture & Best Practices
   • Dmitri Pavlutin: 5 Differences Between Arrow and Regular Functions
   • Kent C Dodds: Function forms

     Practice SOLID principles, Test-driven development (TDD), Domain-Driven Design, careful organization of system design in daily coding challenges