ReactJS

class-based components

(also referred to as "containers", "smart" or "stateful" components) => class Cmp extends Component { render () { return <div>some JSX</div> } }

Functional components

(also referred to as "presentational", "dumb" or "stateless" components - more about this later in the course) => const cmp = () => { return <div>some JSX</div> } (using ES6 arrow functions as shown here is recommended but optional)

Build Workflow

- use dependency management tool - npm or yarn - use a bundler - Webpack - use a compiler - Babel and CSS presets - development server

Basics of syntax

- use {} for dynamic js code

Planning a React App

1. Component Structure 2. Application State(data) 3. Components vs Containers - which components should be stateless(functionals)? which components using useState or with state property

What are the major features of React?

1. It uses VirtualDOM instead RealDOM considering that RealDOM manipulations are expensive. 2. Supports server-side rendering. 3. Follows Unidirectional data flow or data binding. 4. Uses reusable/ composable UI components to develop the view. 5. Able to focus on business logic and UI experience as opposed to code.

SECTION 8

BURGER BUILDER - Basic Version

Redux flow

Component (wants to manipulate app state) DISPATCHES Action (predefined information package) REACHES Reducers (receives action and update state - pure sync function) UPDATES Central Store (stores entire app state)~ TRIGGERS Subscription(passes updated state to app automatically) PASSES UPDATED STATE AS PROPS

JSX

JSX is a XML-like syntax extension to ECMAScript (the acronym stands for JavaScript XML). Basically it just provides syntactic sugar for the React.createElement() function, giving us expressiveness of JavaScript along with HTML like template syntax. -JSX elements will be transpiled to React.createElement() functions to create React elements which are going to be used for the object representation of UI

SECTION 15

REDUX

React DOM / Virtual DOM

React DOM is a package which renders components to the real DOM.

Babel

React uses next generation ES6 and above javascript features and syntax. Babel is a transpiling tool which parses JSX and compiles this ES6 javascript code so that the browser can read.

SPA vs MPA

SPA - In one HTML page, content is rerendered on client, using one ReactDOM.render() call. MPA - content is rendered on server, with ReactDOM.render() called per widget

Why use redux?

State is very complex in larger apps. For instance, when the user is signed in the state of this makes a huge difference across the whole app in terms of what information to share. Redux holds all this information in one global store and communication is much easier.

props

data in a React component that gets passed down from its parent. In the parent component, it will pass data down to the child component through attributes in the child component's JSX.

state

dynamic data in a React component. This is often used to track variables that will be re-rendered in the UI based on events that occur in the application. - You can then access it via this.state in your class JSX code (which you return in the required render() method).

Event handlers

https://reactjs.org/docs/events.html Clipboard, Composition, Keyboard, Focus, Form, Mouse, Pointer, Selection, Touch, UI, Wheel, Media, Image, Animation, Transition, Other

react-redux has a component called Provider that can help with saving and getting store state, and dispatching action in React component

import { createStore } from "redux"; import { Provider } from "react-redux"; const store = createStore(reducer); return ( <Provider store={store}> <Container /> </Provider> )

React

is a library for creating highly reactive and super fast javascript driven Web applications. - users don't have to wait for page reloads

JS Array Functions

map() find() findIndex() filter() reduce() concat() slice() splice() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

install Redux

npm install --save react-redux

Passing Method References Between Components

pass methods as props, not just variables. use .bind() syntax

ReactDOM.render

renders a HTML element or most often a React component in JSX to a DOM node. Takes in two arguments, HTML element or component in JSX and where to render it, usually document.getElementById('root')

components

reusable pieces of React code to control part of the user interface. Components capture the structure of UI, and can have internal data to track the user behavior throughout the lifetime of the app.

When using class-based components, how is state changed?

state can be modified using this.setState({})

When using function-based components, how is state changed?

useState() returns an array with exactly two elements: 1) Your current state value 2) A method to update your state value const [someState, setSomeState] = useState(a function) const someFunction = () => { setSomeState('new state') }