REACT 1

node start in package json

"start": "node index.js"

error after axios call

.catch(error=>console.log(error))

after axios call chain

.then(response => { console.log(response.data); this.setState((state)=>{ state.wines=response.data; return state;

to make your own component class you must?

subclass React.Component class COMPONENTNAME

static analysis

testing code without actually running it. E.G., linting, typescript typing

To make a React component, you write a JSX element. What do you name it?

the same as your component class

all methods are written inside?

the state method

to change state

this.setState({})

to only change the state in the current file?

{this.xxxxxxxx.state.bind(this)}

what do you put between error and console.log

=>

virtual DOM

A JS object that is a virtual representation of the DOM. Any new view changes are first performed on the virtual DOM, which lives in memory and not on your screen. An efficient algorithm then determines the changes made to the virtual DOM to identify the changes that need to be made to the real DOM. It then determines the most effective way to make these changes and then applies only those changes to the real DOM. This guarantees a minimum update time to the real DOM, providing higher performance and a cleaner user experience all around.

JSX

A dialect of JavaScript that embeds raw HTML templates inside JavaScript code. JSX code by itself cannot be read by the browser; it must be transpiled into traditional JavaScript using tools like Babel and webpack.

What is node?

A javascript runtime for network applications like web servers. A JS enigne (V8) and a set of libraries that make it possible to write and execute network applications in Javascript.

express library

A minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. const app = express() : start an instance of express http server .get, .post, .delete ,etc(route, onReq callback) - method for handling requests to routes Middleware - functions between req and res that have accress to both objects. Most popular: logging, CORS, file compression, csrf pretection, cookie sessions

libuv

A multi-platform support library with a focus on asynchronous I/O. Some of the features of libuv are: Full-featured event loop Asynchronous file and file system operations Child processes File system events

Redux

A predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. Most important features are single source of truth and enforcing of synchronous action handling. combineReducers({reducers}) - generates a function that calls your reducers with the slices of state selected according to their keys, and combining their results into a single object again. createStore(reducer) - self-explantory: creates store object

stateless component

A pure function that renders DOM object based solely on the properties (parameters) provided to it. No internal state, no lifecycle hooks

Component

A small, independent, reusable piece of UI. A function that returns a React element to be rendered to the DOM

Webpack

A static module bundler for modern JavaScript applications. It recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into one or more bundles.

async library

A utility module which provides straight-forward, powerful functions for working with asynchronous JavaScript. Provides around 70 functions that include the usual 'functional' suspects (map, reduce, filter, each...) as well as some common patterns for asynchronous control flow (parallel, series, waterfall...). All these functions assume you follow the Node.js convention of providing a single callback as the last argument of your asynchronous function -- a callback which expects an Error as its first argument -- and calling the callback once.

ReactDOMServer API

API for server-side rendering initial HTML. renderToString(element) - render initial HTML to string for faster first load, then Hydrate with client JS. renderToNodeStream(element) - same as above, but sends data as stream for faster transfer byte-by-byte

ReactDOM API

API providing top-level methods for DOM manipulation: render(element, containerRef) - Mount/update a react component to DOM hydrate(element, containerRef) - same as render, but for SSR HTML unmountComponentAtNode(containerRef) - remove component from DOM and clean up event listeners and state findDOMNode(component) - returns correspondingnative DOM element (throws exception for unmounted Component) createPortal(child, container) - a way of rendering an element outside of normal the native DOM hierarchy of the component, while preserving React DOM hierarchy. Good for Modals.

Flux pattern

An architectural pattern that enforces unidirectional data flow — its core purpose is to control derived data so that multiple components can interact with that data without risking pollution. SOLVES: vanilla and jQuery MVC problem of poorly defined data flow and lack of data integrity (storing state in the DOM). The Flux pattern is generic; it's not specific to React applications, nor is it required to build a React app. However, Flux is commonly used by React developers because React components are declarative — the rendered UI (View) is simply a function of state (Store data). action -> dispatcher -> store -> view the Store is the central authority for all data; any mutations to the data must occur within the store. Changes to the Store data are subsequently broadcast to subscribing Views via events. Views then update themselves based on the new state of received data. To request changes to any Store data, Actions may be fired. These Actions are controlled by a central Dispatcher; Actions may not occur simultaneously, ensuring that a Store only mutates data once per Action.

Webpack Entry

An entry point indicates which module webpack should use to begin building out its internal dependency graph. After entering the entry point, webpack will figure out which other modules and libraries that entry point depends on (directly and indirectly).

Controlled component

An input form element whose value is controlled by React. When a user enters data into a controlled component, a change event handler is triggered and your code decides whether the input is valid (by re-rendering with the updated value). If you do not re-render then the form element will remain unchanged.

Redux Action

An object that describes the outcome of an event. Payload of information that sends data from your application to your store. The only source of information for the store.

What is React?

An open-source JavaScript library created by Facebook for building UI components for web and mobile. It has no opinions on the other pieces of your technology stack and can be seamlessly integrated into any application.

context

Context lets components make data available to other components further down the tree without being passed through explictly as props. When a component defines some data onto its context, any of its descendants can access that data. That means any child further down in the component tree can access data from it, without being passed it as a property.

state

Data associated with a component that changes over time. The most important difference between state and props is that props are passed from a parent component, but state is managed by the component itself. A component cannot change its props, but it can change its state.

module

Discrete chunk of functionality. Each module has a smaller surface area than a full program, making verification, debugging, and testing trivial. Well-written modules provide solid abstractions and encapsulation boundaries, so that each module has a coherent design and a clear purpose within the overall application.

socket.io library

Enables real-time bidirectional event-based communication.

React API

Entry point for react library. Component - base class for React components when they are defined using ES6 classes. PureComponent - same as above, but implements shouldComponentUpdate() based on shallow comparison of state/props createReactElement(type, [props], [...children]) - method underlying JSX statements. Children - utilities object for dealing with the this.props.children opaque data structure (map, forEach, only, toArray). Fragment - Component that lets you return multiple elements in a render() method without creating an additional container DOM element createRef() - creates a ref that can be attached to React elements via the ref attribute.

Jest

Facebook's JS testing platform, includes testing snapshots of serialized component Assertions: expect(component) .toBe(value) .toHaveBeenCalled() .toHaveBeenCalledTimes(int) .toHaveBeenCalledWith(arg, arg, arg, ...) .toHaveProperty(key, val)

React 16 new features

Fragments - allows return of more than one top-level element from component. can be array of elements or <React.Fragment /> Error Boundaries and componentDidCatch - Prior to React v16.0, any error in any part of the UI would crash the whole application. Now a component with componentDidCatch method defined acts as boundary that conditionally renders based on error state createPortal(child, container) - a way of rendering an element outside of normal the native DOM hierarchy of the component, while preserving React DOM hierarchy. Good for Modals. stream support in serverside rendering (SSR) Context API - lets components make data available to other components further down the tree without being passed through explicitly as props.

JSX can either be either what? And uses what to distinguish the difference.

HTML-like, or component instances CAPS shows it's an instance of a class

how are class components written?

InUpperCamelCase

General component lifecycle

Initialization (mounting); State/props updates; Destruction (unmounting).

props

Inputs to a React component. Data passed down from a parent component to a child component. Props are readonly. They should not be modified in any way.

How does Node work?

It is single-threaded, and uses async callbacks and an event loop to perform tasks like fetching data or interacting with a DB

SPA

Single Page Application. An application that loads a single HTML page and all the necessary assets (such as JavaScript and CSS) required for the application to run. Any interactions with the page or subsequent pages do not require a round trip to the server which means the page is not reloaded.

Webpack loaders

Loaders enable webpack to process more than just JavaScript files. They give you the ability to leverage webpack's bundling capabilities for all kinds of files by converting them to valid modules that webpack can process. Loaders transform all types of files into modules that can be included in your application's dependency graph (and eventually a bundle). in other words, makes it so you can import/require non-js files

Stream

Objects that allow reading of data from the source and writing of data to the destination as a continuous process. There are four types of streams: read, write, duplex, transform

Major Benefits of React

Performance: rendering and virtual DOM. Unidirectional flow and functional programming. Developer experience: compile-time debugging, JSX, organization, devtools, community, ecosystem.

PureComponent

PureComponent is exactly the same as Component except that it handles the shouldComponentUpdate method for you. When props or state changes, PureComponent will do a shallow comparison on both props and state.

how do you call al render method

React.DOM.render(< />, document.getElementById('app'))

when a react element is compiled it transforms into a what?

React.createElement() call

what goes at the bottom of app.js usually

ReactDOM.render( <MyComponentClass />, document.getElementById('app') );

write ReactDOM.render

ReactDOM.render( <Owl />, document.getElementById('app') );

Redux Reducer

Reducers specify how the application's state changes in response to actions sent to the store. Reducer is a function that takes current state and action as arguments, returns new state. thus, state remains immutable

ref

Refs provide a way to access DOM nodes or React elements created in the render method, in the few cases where you need to imperatively modify a child outside of the typical dataflow: Managing focus, text selection, or media playback; Triggering imperative animations; Integrating with third-party DOM libraries. Avoid using refs for anything that can be done declaratively.

Stub

Stubs are functions that simulate the behaviors of components/modules (i.e., dependencies). Used to provide expected data/functionality from a component/module that IS NOT being tested

Redux store

The object that holds application state and provides the following methods: .getState() - allows access to state .dispatch(action) - updates state; .subscribe(listener) - registers listeners

Webpack output

The output property tells webpack where to emit the bundles it creates and how to name these files, it defaults to ./dist. Basically, the entire app structure will get compiled into the folder that you specify in the output path.

Enzyme

Tool for testing React component output. Note that React provides its own testing utilities, but also recommends Enzyme and react-testing-library shallow(component) - constrain yourself to testing a component as a unit, and to ensure that your tests aren't indirectly asserting on behavior of child components. mount(component) - Full DOM rendering is ideal for use cases where you have components that may interact with DOM APIs, or may require the full lifecycle in order to fully test the component (i.e., componentDidMount etc.) render() - used to render react components to static HTML and analyze the resulting HTML structure. find(selector) => wrapper (like jQuery) simulate(event)

diffing and reconciliation

When a component's props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one (diffing). When they are not equal, React will update the native DOM (reconciliation).

Webpack plugins

While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks. Plugins range from bundle optimization and minification all the way to defining environment-like variables. The plugin interface is extremely powerful and can be used to tackle a wide variety of tasks.

Uncontrolled component

Works like form elements do outside of React. When a user inputs data into a form field (an input box, dropdown, etc) the updated information is reflected without React needing to do anything. However, this also means that you can't force the field to have a certain value.

to make a component you do use what? And that is what?

a base class from the React library: React.Component a React.Component is a javascript class

what is a small reusable chunk of code that is usually used to render html

a component

every component must come from what?

a component class

steps to create context

at parent level, create MyContext with React.createContext() Create class MyProvider, set state inside the class, return MyContext.Provider (notice composition) MyProvider is equvalent of Redux store Wrap entire app in MyProvider Inside of component that needs access to context, create MyContext.Consumer component, and make its child a function that returns elements which can access the context!

axios call

axios({ method: 'get', url: 'http://myapi-profstream.herokuapp.com/api/f4b493/wines', responseType: 'json' })

where do you put instructions for a component

between the { }

methods are effectual

by returning elements

what is state?

change

what kind of component is this import React, { Component } from 'react'

component with life-cycle

component did mount with axios

componentDidMount(){ axios({ method: 'get', url: 'http://myapi-profstream.herokuapp.com/api/f4b493/wines', responseType: 'json' }).then(response => { console.log(response.data); this.setState((state)=>{ state.wines=response.data; return state; }) }).catch(error=>console.log(error)) }

method used with axios call

componentDidMount(){}

Update hooks

componentWillReceiveProps - (deprecated) getDerivedStateFromProps shouldComponentUpdate componentWillUpdate - (deprecated) render getSnapshotBeforeUpdate componentDidUpdate

Destruction hooks

componentWillUnmount

create div without jsx

const greatestDivEver = React.createElement( "div", null, "i am div" );

write a loop with a key

const people = ['Rowe', 'Prevost', 'Gare']; const peopleLis = people.map((person, i) => <li key={'person_' + i}>{people}</li> <li key={'person_' + i}>{person}</li> ));

Initialization hooks

constructor static getDerivedStateFromProps componentWillMount - (deprecated) render componentDidMount

flow in react

data flows downward. behavior flows upward

How do we change something?

event

concurrency

executing multiple function calls simultaneously, out of order, or partially. Can be achieved through multithreading or async

what do you put at the end of app.js?

export default App

you always name class same as what

file

this.state is???

immutable

render a component

import React from 'react'; import ReactDOM from 'react-dom'; class MyComponentClass extends React.Component { render() { return <h1>Hello world</h1>; } }; ReactDOM.render( <MyComponentClass />, document.getElementById('app') );

what kind of component is this import React from 'react'

stateless component

import config from "./config" does what?

it turns config into a variable

what do you have to add to jsx as an attribute usually for lists? When do you need this attribute?

keys The list-items have memory from one render to the next. For instance, when a to-do list renders, each item must "remember" whether it was checked off. The items shouldn't get amnesia when they render. A list's order might be shuffled. For instance, a list of search results might be shuffled from one render to the next.

Benefits of Node

low latency and high throughput- Non-blocking approach to serving requests means less time (and less memory) wasted waiting for I/O requests to resolve Built on V8, which is already super fast best for apps that are computationally simple, but high frequency of access

Chaining

mechanism whereby the output of one stream is connected to another stream creating a chain of multiple stream operations.

whenever you make a component. That component inherits all the ________________________

methods of it's component class

update webpack run

npm run build

empty object

null

synthetic event

objects which act as a cross-browser wrapper around the browser's native event. They combine the behavior of different browsers into one API. This is done to make sure that the events show consistent properties across different browsers.

REPL

read, evaluate, print, loop

never set state inside

render

render is a what? and return is a what

render = method return = statement

when you render a component you need what 2 things

render function with class in < /> and getElementById function with app id from the HTML file

to reset game?

set to 0