In the project directory, you can run:

npm install
# or
yarn install

START APP BY RUNNING BELOW COMMAND

npm start
# or
yarn start

TO USE DATABASE SERVER

keep the app running and open another terminal and run below command:

npm server
# or
yarn server

BABEL Go ahead and install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react.

babel-core: is the main babel package — We need this for babel to do any transformations on our code.

babel-cli: allows you to compile files from the command line.

preset-react and preset-env: are both presets that transform specific flavors of code — in this case, the env preset allows us to transform ES6+ into more traditional javascript and the react preset does the same, but with JSX instead.

WEBPACK Go ahead and install --save-dev webpack webpack-cli webpack-dev-server webpack-merge babel-loader css-loader style-loader

Webpack uses loaders to process different types of files for bundling. It also works easily alongside the development server that we’re going to use to serve our React project in development and reload browser pages on (saved) changes to our React components. In order to utilize any of this though, we’ll need to configure Webpack to use our loaders and prepare the dev server.

REACT react react-dom

REDUX @reduxjs/toolkit react-redux

store.js > createStore tasksSlice.js > createSlice

USE OF REDUX TOOLKIT METHODS: createStore, createSlice, createAsyncThunk USE OF REACT REDUX HOOKS: useSelector, useDispatch USE OF REACT HOOKS: useEffect, useState, useCallback

useSelector():

• Allows you to extract data from the Redux store state, using a selector function.
• The selector is approximately equivalent to the mapStateToProps argument to connect conceptually
• The selector will be called with the entire Redux store state as its only argument
• The selector may return any value as a result, not just an object.
• When an action is dispatched, useSelector() will do a reference comparison of the previous selector result value and the current result value. If they are different, the component will be forced to re-render. If they are the same, the component will not re-render.
• You may call useSelector() multiple times within a single function component. Each call to useSelector() creates an individual subscription to the Redux store

mapState arg of 'connect' hook:

• The first argument to a mapStateToProps function is the entire Redux store state (the same value returned by a call to store.getState()). Because of this, the first argument is traditionally just called state. (While you can give the argument any name you want, calling it store would be incorrect - it's the "state value", not the "store instance".)

The mapStateToProps function should always be written with at least state passed in.

• Your mapStateToProps function should return a plain object that contains the data the component needs:

  • Each field in the object will become a prop for your actual component
  • The values in the fields will be used to determine if your component needs to re-render

• You may define the function with a second argument, ownProps, if your component needs the data from its own props to retrieve data from the store. This argument will contain all of the props given to the wrapper component that was generated by connect

// Todo.js

function mapStateToProps(state, ownProps) {
  const { visibilityFilter } = state
  // ownProps would look like { "id" : 123 }
  const { id } = ownProps
  const todo = getTodoById(state, id)

  // component receives additionally:
  return { todo, visibilityFilter }
}

// Later, in your application, a parent component renders:
;<ConnectedTodo id={123} />
// and your component receives props.id, props.todo, and props.visibilityFilter