Code 401: Class 27 - Props and State

Questions

Does a deployed React application require a server? A server is not explicitly required for deploying a React app.
Why do we prefer to test a React application at the behavior rather than unit level? Unit testing is good for confirming that an algorithm will always produce the desired result, but React apps are created to generate a user experience and it is more crucial that each state is rendered correctly at the correct time.
What does npm run build do? This command creates a build directory that houses a production build of the app.
Describe the actual composition/architecture of a React application.

Title & Favicon: Browser tab label and thumbnail
Router: Provides navigation through the DOM
Material UI & Robot Font: Allows the use of prebuilt customizable components
Backend Connectivity: Defines how the app interfaces with outside resources
Redux & Thunk: Provisions the app level state, thunk works with redux to handle side effects like outside resource fetching
Multi-Environment Setup: Defining dynamic configuration parameters via env variables
Internationalization: react-i18next is a library that provides tools for multilingual support
Unit testing: Jest works well for testing React apps
Deployment: Must deploy the final /build directory

Components allow the UI to be split in to independent, reuseable pieces, similar to JS functions
Simplest form: function Welcome(props) {return <h1>Hello, {props.name}</h1>}
props = properties
ES6 class: class Welcome extends React.Component { render () { return <h1>Hello, {this.props.name}</h1>; }}
Always capitalize component names
All React components must act like pure functions regarding their props

In HTML a <textarea> tag defines its text as a child, React uses the value attribute

React events are named with camelCase
Simple example: <button on Click={activateLasers}> Activate Lasers </button>
returning default does not prevent default behavior in React, must use e.preventDefault();

setState() is the only legitimate way to update state after it has been initialized
Reconciliation how react updates the DOM, only updates the parts that have changed
setState() should be treated as asynchronous

AAA pattern Arrange (set up the test), Act (trigger the necessary event), Assert (compare the expected outcome)
jest-dom library that adds declarative matchers to jest for use with React
- To install: $ npm i @testing-library/jest-dom
- Import the package to extend the Jest matchers: `import “@testing-library/jest-dom/extend-expect”