https://code-maze.com/react-series/

Create React app npx create-react-app <app name>

Add Bootstrap for styling npm i --save react-bootstrap bootstrap

inside index.js:

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';

Stateless (functional components) vs. stateful (containers) components

npm i --save react-router-dom install react router

npm i --save react-router-bootstrap used to merge a Bootstrap nav with a React-router nav

...

<Route path="*" component={NotFound} />

npm i --save axios

npm i --save redux
npm i --save react-redux

npm i --save redux-rethunk send async requests with the Redux actions

• Using the Redux repository inside a component and to use it to fetch data from the server
• Lazily load components to demonstrate the advantage of lazy content loading

• repositoryAction.js:

import { connect } from 'react-redux';
import * as repositoryActions from '../../../store/actions/repositoryActions';

const mapStateToProps = (state) => {     
    return {  
       data: state.data     
    } 
}
const mapDispatchToProps = (dispatch) => {
     return {
         onGetData: (url, props) => dispatch(repositoryActions.getData(url, props))     
    } 
} 
export default connect(mapStateToProps, mapDispatchToProps)(OwnerList);

To work with dates:

npm i --save react-moment
npm i --save moment

history.push('url') react routing (consider using instead)

• use componentDidMount in OwnerList to dispatch `onGetData' on mount to retrieve owner data from API
• set owners array to array using this.props.data.map()

• load components asynchronously