markodayan

#dependencies 
npm install express graphql express-graphql lodash

markodayan

# add remote
git remote add origin <remote-link>

git add .
git commit -m "<commit message>"
git push -u origin master

markodayan

# Installing dependency
npm install materialize-css

markodayan

# Route, Link from react
npm install react-router-dom
# Some redux dependencies in React ( also thunk for async actions)
npm install redux react-redux redux thunk
# Firebase and redux middleware for Firebase and its features
npm install firebase react-redux-firebase redux-firestore

# React build and deploying to Netlify
npm run build 
netlify deploy --prod

markodayan

# SASS/SCSS automated compilation to CSS on save
sass --watch src/App.scss:src/App.css

markodayan

// When we want to request information from a server, we do this within dispatching an action by asynchronously fetching 
// data then dispatching to a reducer to alter app state.

// We achieve this with Redux middleware called 'redux-thunk'

// 'redux-thunk' allows you to call asynchronous tasks within action creators (dispatching actions). It halts the dispatch
// , performs the async request, then resumes the dispatch

// To use thunk it requires the 'applyMiddleware' method from 'redux'
// Thereafter it is applied to the store created as shown below:

markodayan

// 1) To ensure that paths are not accidently accessed - use 'exact' attribute on a Route
 <Route exact path='/' component={Dashboard} />
// 2) If Routing to a functional component, the props of it contain information about the route, check with console.log
 console.log(props) // in the functional comp -> eg props.match.params to get nav params from URL path
 console.log(props.match.params);
// 3)

 

markodayan

- Components
- Virtual DOM
- Lifecycle methods
- create-react-app
- HOCs
- Redux and Stores

markodayan

  handleClick = () => {
    this.props.deletePost(this.props.post.id);
    this.props.history.push('/'); // Redirect Action
  };

markodayan

// initState defined beforehand in file or wherever and import it

const rootReducer = (state = initState, action) => {
  if (action.type === 'DELETE_POST') {
    let newPosts = state.posts.filter(post => action.id !== post.id);

    return {
      ...state,
      posts: newPosts
    };