react-fundamentals.md

Fundamentals of React

React Fundamental	Summary
React	A JS library for building dynamic UIs using components.
JSX	A syntax extension to JS that looks like HTML and makes defining UIs more intuitive vs. pure JS. JSX emits text in the page when a JS expression is surrounded with curly braces <div>{/* JS Expression */}</div>. JSX transpiles into a function call that returns a JS object, thus, JSX can be assigned to variables, passed as arguments to functions, etc. JSX can render an array of components, however, each component needs a key prop with a unique value. const catList = cats.map(c => <div key={cat.id}>{cat.name}</div>);.
Components	A user interface is defined by a hierarchy of components.
User-Defined Component	May be defined as a function or class but must be named using UpperCamelCasing. May hold and manage application state. May contain or utilize application logic such as fetching data, implementing the win/loss logic of a game, etc.
React Elements	React's built-in components, such as <div>, that render their corresponding HTML element into the DOM. Are always named using lowercase.
When a Component's State is Updated	The component is re-rendered. All children components are also rendered, and so on until there are no more components to render.
Props	Props are used to pass information (any JS expression) to a child component. Function Components are passed a props object as an argument. Props should never be updated - consider them immutable. React Elements can be passed props that correspond to HTML attributes, e.g., id, placeholder, pattern, etc. However, some are named or used slightly differently.
State	When a component's state is updated, the component re-renders. Most state is data-related, i.e., related to the purpose of the application. However, a component can use UI-related state to control the dynamic rendering of its UI. The useState hook is used to manage state in a Function Component. Invoking useState(<initial value of the state>) returns an array whose first element is the state's current value and whose second element is a setter function used to update the state's value. Only data that you want to cause a re-render when it changes should be defined as state.
Styling	Only React Elements such as <div>, <form>, etc. can be styled because user-defined components aren't rendered to the DOM. The className prop is used to assign classes and may be a JS expression resulting in a string of class name(s). The style prop is used when styling needs to be computed each time the component renders and must be assigned a JS object with keys representing the camelCased names of CSS properties.
Event Handling	Instead of using addEventListener, in React we connect event handlers (functions) to events using event props on React Elements. Examples of event props are: onClick, onChange, onSubmit, etc.
Handling Input	Controlled Inputs are the React way to gather input from the user with <input>, <select> or <textarea> React Elements. A controlled input must include both value & onChange props. Forms are optional in a SPA but they can be beneficial for validation & CSS layout/formatting. If forms are used, be sure to prevent them from being submitted to the server by calling preventDefault() on the event object from within the onSubmit event handler.
The Keys to Programming in React	We code components to render (visualize) application-state, for example, render a <ToDoListItem> component for each to-do in the todos application-state array. We can code components to render other components based upon UI-state, for example, hide/show a component based upon showDetails UI-state, disable a button based upon isValid, etc. In response to user-interaction, we apply any necessary program logic and/or calculations and ultimately update all impacted state causing the components to re-render.