From 6af14dff5a85e21ce5e9aa0af7480fc33fe60df0 Mon Sep 17 00:00:00 2001 From: Marcello Lamonaca Date: Wed, 17 Mar 2021 11:34:22 +0100 Subject: [PATCH 1/4] Add React-Router Notes --- JavaScript/React/React Router.md | 103 +++++++++++++++++++++++++++++++ 1 file changed, 103 insertions(+) create mode 100644 JavaScript/React/React Router.md diff --git a/JavaScript/React/React Router.md b/JavaScript/React/React Router.md new file mode 100644 index 0000000..2895428 --- /dev/null +++ b/JavaScript/React/React Router.md @@ -0,0 +1,103 @@ +# React Router + +Popular routing library. Allows to specify a route through React components, declating which component is to be loaded for a given URL. + +Key Components: + +- **Router**: wrap the app entrypoint, usually `BrowserRouter` +- **Route**: "Load this component for this URL" +- **Link**: react-managed anchors that won't post back to the browser + +## Routers + +Router Types: + +- *HashRouter*: `#route`, adds hashes to the URLs +- *BrowserRouter*: `/route`, uses HTML5 history API to provide clean URLs +- *MemoryRouter*: no URL + +```js +// index.js + +//other imports ... + +import { BrowserRouter as Router } from "react-router-dom"; + +React.render( + + + , + document.getElemendById("DomID"); +) +``` + +```js +// Component.js +import { Route, Switch } from "react-router-dom"; + +
+ {/* match route pattern exactly, all subroutes will be matched otherwise */} + + + ... +
+ +// only one child can match, similar to switch-case + + + + {/* mathes all non-existent URLs */} + +``` + +### Redirectin + +```js +import { Redirect } from "react-router-dom"; + +// redirects to another URL, should'nt be rendered on component mount but after an action + + +{ condition && } // redirect if condition is true + +// or redirect manipolating the history (alwais in props) +props.history.push("/new-route"); +``` + +### URL Parameters & Query String + +```js +// Given + +// URL: app.com/route/subroute?param=value + +function Component(props) { + props.match.params.placeholder; // subroute + props.location.query; // { param: value } + props.location.pathname; // /route/subroute?param=value +} +``` + +### Propts + +```js +import { Prompt } from "react-router-dom"; + +// displayes a prompt when the conditioni true + +``` + +## Link + +Clicks on a link created with React-Router will be captured by ract an all the routing will happen client side. + +```js +import { Link } from "react-router-dom"; + +// TARGET: +Text + +// add styling attributes to the rendered element when it matches the current URL. +Text +Text +``` From 5dff3ab7c99f3dd8eb965fb9579869b2f3bc258f Mon Sep 17 00:00:00 2001 From: Marcello Lamonaca Date: Wed, 17 Mar 2021 15:36:40 +0100 Subject: [PATCH 2/4] Spread operator cloning improvements --- JavaScript/JavaScript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/JavaScript/JavaScript.md b/JavaScript/JavaScript.md index ba7c398..e5a4f26 100644 --- a/JavaScript/JavaScript.md +++ b/JavaScript/JavaScript.md @@ -444,7 +444,7 @@ let merge = [ ...array1, ...attay2 ]; // merge the arrays contents in new array // objects let obj = { prop1: value1, prop2: value2 }; -let clone = { ...obj }; +let clone = { ...obj, prop: value }; // shallow copy, and update copy prop let cloneAndAdd = { prop0: value0, ...obj, prop3: value3 }; // strings From c5adc0b2df9712ea6e9c687a966e4775fc770f5c Mon Sep 17 00:00:00 2001 From: Marcello Lamonaca Date: Thu, 18 Mar 2021 10:33:22 +0100 Subject: [PATCH 3/4] Clarify notation for object with same key-value pair --- JavaScript/JavaScript.md | 124 +++++++++++++++++++-------------------- 1 file changed, 62 insertions(+), 62 deletions(-) diff --git a/JavaScript/JavaScript.md b/JavaScript/JavaScript.md index e5a4f26..ce19e10 100644 --- a/JavaScript/JavaScript.md +++ b/JavaScript/JavaScript.md @@ -30,9 +30,9 @@ ### Naming Conventions -Elements | Case -----------|----------- -variable | camelCase +| Elements | Case | +| -------- | --------- | +| variable | camelCase | ### Modern Mode @@ -225,82 +225,82 @@ Number("A") == NaN; //false ?!? ## Operators -Operator | Operation ----------------|---------------- -`(...)` | grouping -a`.`b | member access -`new` a(...) | object creation -a `in` b | membership +| Operator | Operation | +| ------------ | --------------- | +| `(...)` | grouping | +| a`.`b | member access | +| `new` a(...) | object creation | +| a `in` b | membership | ### Mathemetical Operators -Operator | Operation ------------|---------------- -a `+` b | addition -a `-` b | subtraction -a `*` b | multiplication -a `**` b | a^b -a `/` b | division -a `%` b | modulus +| Operator | Operation | +| -------- | -------------- | +| a `+` b | addition | +| a `-` b | subtraction | +| a `*` b | multiplication | +| a `**` b | a^b | +| a `/` b | division | +| a `%` b | modulus | ### Unary Increment Operators -Operator | Operation ---------------|------------------ -`--`variable | prefix decrement -`++`variable | prefix incremente -variable`--` | postfiz decrement -variable`++` | ostfix increment +| Operator | Operation | +| ------------ | ----------------- | +| `--`variable | prefix decrement | +| `++`variable | prefix incremente | +| variable`--` | postfiz decrement | +| variable`++` | ostfix increment | ### Logical Operators -Operator | Operation ----------|---------------- -a `&&` b | logical **AND** -a `||` b | logical **OR** -`!`a | logical **NOT** +| Operator | Operation | +| -------- | --------------- | +| a `&&` b | logical **AND** | +| a `||` b | logical **OR** | +| `!`a | logical **NOT** | ### Comparison Operators -Operator | Operation -----------|-------------------- -a `<` b | less than -a `<=` b | less or equal to -a `>` b | greater than -a `>=` b | greater or equal to -a `==` b | equaltity -a `!=` b | inequality -a `===` b | strict equality -a `!==` b | strict inequality +| Operator | Operation | +| --------- | ------------------- | +| a `<` b | less than | +| a `<=` b | less or equal to | +| a `>` b | greater than | +| a `>=` b | greater or equal to | +| a `==` b | equaltity | +| a `!=` b | inequality | +| a `===` b | strict equality | +| a `!==` b | strict inequality | ### Bitwise Logical Operators -Operator | Operation ------------|----------------------------- -a `&` b | bitwise AND -a `|` b | bitwise OR -a `^` b | bitwise XOR -`~`a | bitwise NOT -a `<<` b | bitwise left shift -a `>>` b | bitwise rigth sigt -a `>>>` b | bitwise unsigned rigth shift +| Operator | Operation | +| --------- | ---------------------------- | +| a `&` b | bitwise AND | +| a `|` b | bitwise OR | +| a `^` b | bitwise XOR | +| `~`a | bitwise NOT | +| a `<<` b | bitwise left shift | +| a `>>` b | bitwise rigth sigt | +| a `>>>` b | bitwise unsigned rigth shift | ### Compound Operators -Operator | Operation -------------|------------- -a `+=` b | a = a + b -a `-=` b | a = a - b -a `*=` b | a = a * b -a `**=` b | a = a ** b -a `/=` b | a = a / b -a `%=` b | a = a % b -a `<<=` b | a = a << b -a `>>=` b | a = a >> b -a `>>>=` b | a = a >>> b -a `&=` b | a = a & b -a `^=` b | a = a ^ b -a `|=` b | a = a ! b +| Operator | Operation | +| ---------- | ----------- | +| a `+=` b | a = a + b | +| a `-=` b | a = a - b | +| a `*=` b | a = a * b | +| a `**=` b | a = a ** b | +| a `/=` b | a = a / b | +| a `%=` b | a = a % b | +| a `<<=` b | a = a << b | +| a `>>=` b | a = a >> b | +| a `>>>=` b | a = a >>> b | +| a `&=` b | a = a & b | +| a `^=` b | a = a ^ b | +| a `|=` b | a = a ! b | ## Decision Statements @@ -559,7 +559,7 @@ let variable = value; // object literal let obj = { property: value, - variable, // instead of variable: variable to use the variable's value -> variable: value + variable, // same as variable: variable object: { ... From 0fa769f448b002a1e9fb7d7dc8c2c336919d9b55 Mon Sep 17 00:00:00 2001 From: Marcello Lamonaca Date: Thu, 18 Mar 2021 11:43:56 +0100 Subject: [PATCH 4/4] Add Redux notes --- JavaScript/React/Redux.md | 148 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 148 insertions(+) create mode 100644 JavaScript/React/Redux.md diff --git a/JavaScript/React/Redux.md b/JavaScript/React/Redux.md new file mode 100644 index 0000000..a30b3da --- /dev/null +++ b/JavaScript/React/Redux.md @@ -0,0 +1,148 @@ +# [Redux](https://redux.js.org/) + +Redux is a pattern and library for managing and updating application state, using events called *actions*. It serves as a centralized store for state that needs to be used across the entire application, with rules ensuring that the state can only be updated in a predictable fashion. + +## Actions, Store, Immutability & Reducers + +### Actions & Action Creators + +An **Action** is a plain JavaScript object that has a `type` field. An action object can have other fields with additional information about what happened. +By convention, that information is stored in a field called `payload`. + +**Action Creators** are functions that creates and return an action object. + +```js +function actionCreator(data) +{ + return { type: ACTION_TYPE, payload: data } // action obj +} +``` + +### Store + +The current Redux application state lives in an object called the **store**. +The store is created by passing in a reducer, and has a method called `getState` that returns the current state value. + +The Redux store has a method called `dispatch`. The only way to update the state is to call `store.dispatch()` and pass in an action object. +The store will run its reducer function and save the new state value inside. + +**Selectors** are functions that know how to extract specific pieces of information from a store state value. + +```js +function configStore(initialState) { + return createStore(rootReducer, initialState); +} + +replaceReducer(newReducer); // replace an existing reducer, useful for Hot Reload + +store.dispatch(action); // trigger a state change based on an action +store.subscribe(listener); +store.getState(); // retireve current state +``` + +### Reducers + +**Reducers** are functions that receives the current state and an action, decide how to update the state if necessary, and return the new state. + +Reducers must **always** follow some specific rules: + +- They should only calculate the new state value based on the `state` and `action` arguments +- They are not allowed to modify the existing `state`. +Instead, they must make *immutable updates*, by copying the existing `state` and making changes to the copied values. +- They must not do any asynchronous logic, calculate random values, or cause other "side effects" + +```js +function reducer(state, action) { + switch(action.type){ + case "ACTION_TYPE": + return { ...state, prop: value }; // return modified copy of state (using spread operator) + break; + + default: + return state; // return unchanged state (NEEDED) + } +} + +// combining reducers +import { combineReducers } from "redux"; + +const rootReducer = combineReducers({ + entity: entityReducer +}); +``` + +## [React-Redux](https://react-redux.js.org/) + +### Container vs Presentational Components + +Container Components: + +- Focus on how thing work +- Aware of Redux +- Subscribe to Redux State +- Dispatch Redux actions + +Presentaional Components: + +- Focus on how things look +- Unaware of Redux +- Read data from props +- Invoke callbacks on props + +### Provider Component & Connect + +Used at the root component and wraps all the application. + +```js +// index.js +import React from 'react' +import ReactDOM from 'react-dom' + +import { Provider } from 'react-redux' +import store from './store' + +import App from './App' + +const rootElement = document.getElementById('root') +ReactDOM.render( + + + , + rootElement +) +``` + +```js +// Component.js +import { connect } from 'react-redux' +import { increment, decrement, reset } from './actionCreators' + +// const Component = ... + +// specifies which state is passed to the component (called on satte change) +const mapStateToProps = (state, ownProps /* optional */) => { + // structure of the props passsed to the component + return { propName: state.property } +} + +// specifies the action passed to a component (the key is the name that the prop will have ) +const mapDispatchToProps = { actionCreator: actionCreator } +// or +function mapDispathToProps(dispatch) { + return { + // wrap action creators + actionCreator: (args) => dispatch(actionCreator(args)) + } +} +// or +function mapDispathToProps(dispatch) { + return { + actionCreator: bindActionCreators(actionCreator, dispatch), + actions: bindActionCreators(allActionCreators, dispatch) + }; +} + +// both args ar optional +// if mapDispatch is missing the dispatch function is added to the props +export default connect(mapStateToProps, mapDispatchToProps)(Component) +```