firebase host

npm install -g firebase-tools

firebase login

firebase init

firebase deploy

flex css

parent

display: flex

justify-content: space-around|

align-items: flex-start|

flex-direction: column|row (default)

react redux firebase

npm i redux react-redux react-redux-firebase redux-firestore firebase

https://github.com/prescottprue/react-redux-firebase

import { createStore, combineReducers, compose } from 'react';

import firebase from 'firebase';

import 'firebase/firestore';

import { reactReduxFirebase, firebaseReducer } from 'react-redux-firebase';

import { reduxFirestore, firestoreReducer } from 'redux-firestore';

//Reducers

// @todos

const firebaseConfig = {

apiKey: '',

authDomain: '',

databaseURL: '',

projectId: '',

storageBucket: '',

messagingSenderId: '',

appId: '',

};

// react-redux-firebase config

const rrfConfig = {

userProfile: 'users',

useFirestoreForProfile: true, // Firestore for Profile instead of Realtime DB

};

//init firebase instance

firebase.initializeApp(firebaseConfig);

//Init firestore

const firestore = firebase.firestore();

// Add react ReduxFirebase enhancer when making store creator

const createStoreWithFirebase = compose(

reactReduxFirebase(firebase, rrfConfig),

reduxFirestore(firebase) // needed if using firestore

)(createStore);

// Add firebase to reducers

const rootReducer = combineReducers({

firebase: firebaseReducer,

firestore: firestoreReducer, // <- needed if using firestore

});

// create initial state

const initialState = {};

// Create store

const store = createStoreWithFirebase(

rootReducer,

initialState,

compose(

reactReduxFirebase(firebase),

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

)

);

export default store

using env-cmd to hide sensitive information (eg: API_KEY)

npm install env-cmd

add .env.development

in package.json

add to scripts: env-cmd -f .env.development

add to .env.development

REACT_APP_NAME=BEST APP

referencing to this varible in jsx:

{process.env.REACT_APP_NAME}

what's jsx

A: html inside javascript

how to render component to dom

A: ReactDOM.render(<App />, document.getElementById('app'));

no public src folder created after using create-react-app

A: Try with these steps :

1. npm rm -g create-react-app
2. npm install -g create-react-app
3. npx create-react-app my-app

load component dynamically

checkoutCancelledHandler = () => {

this.props.history.goBack();

};

checkoutContinuedHandler = () => {

this.props.history.replace('/checkout/contact-data');

};

render() {

return (

<div>

<CheckoutSummary

ingredients={this.state.ingredients}

checkoutCancelled={this.checkoutCancelledHandler}

checkoutContinued={this.checkoutContinuedHandler}

/>

<Route

path={this.props.match.path + '/contact-data'}

render={props => (

<ContactData

ingredients={this.state.ingredients}

price={this.state.price}

{...props}

/>

)}

/>

</div>

);

}


======when using redux, no need to pass props

checkoutCancelledHandler = () => {

this.props.history.goBack();

};

checkoutContinuedHandler = () => {

this.props.history.replace('/checkout/contact-data');

};

render() {

return (

<div>

<CheckoutSummary

ingredients={this.props.ings}

checkoutCancelled={this.checkoutCancelledHandler}

checkoutContinued={this.checkoutContinuedHandler}

/>

<Route

path={this.props.match.path + '/contact-data'}

component={ContactData}

/>

</div>

);

}

Immutable Update Patterns

Immutable Update Patterns on reduxjs.org: http://redux.js.org/docs/recipes/reducers/ImmutableUpdatePatterns.html

Updating Nested Objects

The key to updating nested data is that every level of nesting must be copied and updated appropriately. This is often a difficult concept for those learning Redux, and there are some specific problems that frequently occur when trying to update nested objects. These lead to accidental direct mutation, and should be avoided.

Common Mistake #1: New variables that point to the same objects

Defining a new variable does not create a new actual object - it only creates another reference to the same object. An example of this error would be:

function updateNestedState(state, action) {
    let nestedState = state.nestedState;
    // ERROR: this directly modifies the existing object reference - don't do this!
    nestedState.nestedField = action.data;
 
    return {
        ...state,
        nestedState
    };
}

This function does correctly return a shallow copy of the top-level state object, but because the nestedState variable was still pointing at the existing object, the state was directly mutated.

Common Mistake #2: Only making a shallow copy of one level

Another common version of this error looks like this:

function updateNestedState(state, action) {
    // Problem: this only does a shallow copy!
    let newState = {...state};
 
    // ERROR: nestedState is still the same object!
    newState.nestedState.nestedField = action.data;
 
    return newState;
}

Doing a shallow copy of the top level is not sufficient - the nestedState object should be copied as well.

Correct Approach: Copying All Levels of Nested Data

Unfortunately, the process of correctly applying immutable updates to deeply nested state can easily become verbose and hard to read. Here's what an example of updating state.first.second[someId].fourth might look like:

function updateVeryNestedField(state, action) {
    return {
        ...state,
        first : {
            ...state.first,
            second : {
                ...state.first.second,
                [action.someId] : {
                    ...state.first.second[action.someId],
                    fourth : action.someValue
                }
            }
        }
    }
}

Obviously, each layer of nesting makes this harder to read, and gives more chances to make mistakes. This is one of several reasons why you are encouraged to keep your state flattened, and compose reducers as much as possible.

Inserting and Removing Items in Arrays

Normally, a Javascript array's contents are modified using mutative functions like push, unshift, and splice. Since we don't want to mutate state directly in reducers, those should normally be avoided. Because of that, you might see "insert" or "remove" behavior written like this:

function insertItem(array, action) {
    return [
        ...array.slice(0, action.index),
        action.item,
        ...array.slice(action.index)
    ]
}
 
function removeItem(array, action) {
    return [
        ...array.slice(0, action.index),
        ...array.slice(action.index + 1)
    ];
}

However, remember that the key is that the original in-memory reference is not modified. As long as we make a copy first, we can safely mutate the copy. Note that this is true for both arrays and objects, but nested values still must be updated using the same rules.

This means that we could also write the insert and remove functions like this:

function insertItem(array, action) {
    let newArray = array.slice();
    newArray.splice(action.index, 0, action.item);
    return newArray;
}
 
function removeItem(array, action) {
    let newArray = array.slice();
    newArray.splice(action.index, 1);
    return newArray;
}

The remove function could also be implemented as:

function removeItem(array, action) {
    return array.filter( (item, index) => index !== action.index);
}

Updating an Item in an Array

Updating one item in an array can be accomplished by using Array.map, returning a new value for the item we want to update, and returning the existing values for all other items:

function updateObjectInArray(array, action) {
    return array.map( (item, index) => {
        if(index !== action.index) {
            // This isn't the item we care about - keep it as-is
            return item;
        }
 
        // Otherwise, this is the one we want - return an updated value
        return {
            ...item,
            ...action.item
        };    
    });
}

Immutable Update Utility Libraries

Because writing immutable update code can become tedious, there are a number of utility libraries that try to abstract out the process. These libraries vary in APIs and usage, but all try to provide a shorter and more succinct way of writing these updates. Some, like dot-prop-immutable, take string paths for commands:

state = dotProp.set(state, `todos.${index}.complete`, true)

Others, like immutability-helper (a fork of the now-deprecated React Immutability Helpers addon), use nested values and helper functions:

var collection = [1, 2, {a: [12, 17, 15]}];
var newCollection = update(collection, {2: {a: {$splice: [[1, 1, 13, 14]]}}});

They can provide a useful alternative to writing manual immutable update logic.

Immutable Data#Immutable Update Utilities section of the Redux Addons Catalog.