Fix typos

JavaScript/React/React Router.md

@@ -1,10 +1,10 @@
 # React Router
 
-Popular routing library. Allows to specify a route through React components, declating which component is to be loaded for a given URL.
+Popular routing library. Allows to specify a route through React components, declaring which component is to be loaded for a given URL.
 
 Key Components:
 
-- **Router**: wrap the app entrypoint, usually `BrowserRouter`
+- **Router**: wrap the app entry-point, usually `BrowserRouter`
 - **Route**: "Load this component for this URL"
 - **Link**: react-managed anchors that won't post back to the browser
 
@@ -74,7 +74,7 @@ import { Redirect } from "react-router-dom";
 <Redirect from="/old-route" to="/new-route" />
 { condition &&  <Redirect to="/route" /> }  // redirect if condition is true
 
-// or redirect manipolating the history (always in props)
+// or redirect manipulating the history (always in props)
 props.history.push("/new-route");  
 ```
 
@@ -83,13 +83,13 @@ props.history.push("/new-route");
 ```js
 import { Prompt } from "react-router-dom";
 
-// displayes a prompt when the condition is true
+// displays a prompt when the condition is true
 <Prompt when={condition} message="prompt message" />
 ```
 
 ## Link
 
-Clicks on a link created with React-Router will be captured by ract an all the routing will happen client side.
+Clicks on a link created with React-Router will be captured by react an all the routing will happen client side.
 
 ```js
 import { Link } from "react-router-dom";

JavaScript/React/React Tests.md

@@ -13,7 +13,7 @@ In `package.json`:
         "test": "jest --watch"  // watch re-runs test on save
     },
     "jest": {
-        // calls additional setups for enzyme, react tesing library, ...
+        // calls additional setups for enzyme, react testing library, ...
         "setupFiles": [
             "path/to/testSetup.js"  
         ],
@@ -64,16 +64,16 @@ In `Component.Snapshots.js`:
 
 ```js
 import React from "react";
-import rederer from "react-test-renderer";
+import renderer from "react-test-renderer";
 
 import Component from "./path/to/Component";
 // import mock data if necessary
 
-it("test descrtiption", () => {
+it("test description", () => {
     // renders the DOM tree of the component
     const tree = renderer.create(<Component funcProp={jest.fn() /* mock function */} /* component props */ />);
 
-    // save a snaphot of the component at this point in time ( in  __snaphsots__ folder)
+    // save a snapshot of the component at this point in time ( in  __snapshots__ folder)
     // in future test it will be checked to avoid regressions
     // can be updated during jest --watch pressing "u"
     expect(tree).matchSnapshot();
@@ -89,7 +89,7 @@ it("test descrtiption", () => {
 ```js
 // testSetup.js
 import { configure } from "enzyme";
-import Adapter from "enzyme-adapert-react-<version>";
+import Adapter from "enzyme-adapter-react-<version>";
 
 configure({ adapter: new Adapter() });
 ```
@@ -128,7 +128,7 @@ it("test description", () => {
 });
 
 // mount rendering test
-if("test descriotion" () => {
+if("test description" () => {
     const dom = mount(
         <WrapperComponent>
             <Component /* props *//>

JavaScript/React/React.md

@@ -2,7 +2,7 @@
 
 ## Components
 
-Thera are two types of react components:
+There are two types of react components:
 
 - Function Components
 - Class Components
@@ -29,7 +29,7 @@ class Component extends React.Component {
 
 Every components has two inputs: *props* and *state*. The props input is explicit while the state is implicit. State is used to determine the chages. Within the component state can be changed while the props object represent fixed values.
 
-JSX syntax can resable HTML bat gets converted to pure JavaScript before being sent to the browser:
+JSX syntax can reusable HTML bat gets converted to pure JavaScript before being sent to the browser:
 
 ```js
 // JSX
@@ -45,7 +45,7 @@ const element = React.createElement(
 );
 ```
 
-### App Entrypoint
+### App Entry-point
 
 ```js
 ReactDOM.render(
@@ -60,7 +60,7 @@ ReactDOM.render(
 ### Dynamic Expressions
 
 ```js
-<tag>{expression}</tag>  // expression is evalueted an it's result is displayed
+<tag>{expression}</tag>  // expression is evaluated an it's result is displayed
 <tag onEvent={funcReference}>{expression}</tag>
 <tag onEvent={() => func(args)}>{expression}</tag>
 ```
@@ -69,7 +69,7 @@ ReactDOM.render(
 
 ```js
 <Component propName={value} />  // pass a value the component
-<Component propName={funcreference} />  // pass a function to the component
+<Component propName={funcReference} />  // pass a function to the component
 
 function Component(props) {
     // use props with {props.propName}
@@ -135,7 +135,7 @@ class Button extends React.Component {
 }
 ```
 
-### Nesting Compnents
+### Nesting Components
 
 ```js
 import { useState } from "react";
@@ -225,7 +225,7 @@ const [state, setState] = useState(default);
 
 ### `useEffect`
 
-Hook used to trigger an action on each reder of the component or when one of the watched items changes.
+Hook used to trigger an action on each render of the component or when one of the watched items changes.
 
 ```js
 
@@ -240,7 +240,7 @@ useEffect(() => {
 
 ```js
 // hook definitions
-const useCutomHook = () => {
+const useCustomHook = () => {
     // eventual state definitions
 
     // eventual function definitions

JavaScript/React/Redux Tests.md

@@ -2,10 +2,10 @@
 
 ## Tests for Connected Components
 
-Connected components are warpped in a call to `connect`. Way of solving the problem:
+Connected components are wrapped in a call to `connect`. Way of solving the problem:
 
 - Wrap component with `<Provider>`. Added benefit: new store dedicated to tests.
-- Add named export for unconncted component.
+- Add named export for unconnected component.
 
 In `Component.js`:
 
@@ -38,8 +38,8 @@ function testHelper(args) {
 it("test description", () => {
     const dom = testHelper();
 
-    // simulate page interation
-    dom.find("selctor").simulate("<event>");
+    // simulate page iteration
+    dom.find("selector").simulate("<event>");
 
     // find changed component
     // test expected behaviour of component
@@ -91,7 +91,7 @@ import initialState from "path/to/initialState";
 import * as actions from "path/to/actionCreators";
 
 it("test description", () => {
-    const store = createStore(toorReducer, initialState);
+    const store = createStore(storeReducer, initialState);
 
     const expectedState = /* state after the update */
 
@@ -126,7 +126,7 @@ import * as actions from "path/to/actionCreators";
 
 describe("Async Actions", () => {
     afterEach(() => {
-        fetchMock.restore();  // init fecth mock for each test
+        fetchMock.restore();  // init fetch mock for each test
     });
 
     it("test description", () => {

JavaScript/React/Redux.md

@@ -57,7 +57,7 @@ export function configStore(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
+store.getState();  // retrieve current state
 ```
 
 ### Reducers
@@ -106,7 +106,7 @@ Container Components:
 - Subscribe to Redux State
 - Dispatch Redux actions
 
-Presentaional Components:
+Presentational Components:
 
 - Focus on how things look
 - Unaware of Redux
@@ -145,23 +145,23 @@ import { increment, decrement, reset } from './actionCreators';
 
 // const Component = ...
 
-// specifies which state is passed to the component (called on satte change)
+// specifies which state is passed to the component (called on state change)
 const mapStateToProps = (state, ownProps /* optional */) => {
-    // structure of the props passsed to the component
+    // structure of the props passed 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) {
+function mapDispatchToProps(dispatch) {
     return {
         // wrap action creators
         actionCreator: (args) => dispatch(actionCreator(args))
     };
 }
 // or
-function mapDispathToProps(dispatch) {
+function mapDispatchToProps(dispatch) {
     return {
         actionCreator: bindActionCreators(actionCreator, dispatch),
         actions: bindActionCreators(allActionCreators, dispatch)
@@ -177,7 +177,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(Component);
 
 **Note**: Redux middleware runs *after* and action and *before* it's reducer.
 
-Redux-Thunk allows to retrurn functions instead of objects from action creators.  
+Redux-Thunk allows to return functions instead of objects from action creators.  
 A "thunk" is a function that wraps an expression to delay it's evaluation.
 
 In `configStore.js`:
@@ -199,7 +199,7 @@ function configStore(initialState) {
 ```
 
 ```js
-// usally action on async func success
+// usually action on async func success
 function actionCreator(arg) {
     return { type: TYPE, data: arg };
 }