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') }