| 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.
|