This project was bootstrapped with Create React App.

JSX

• JSX --> Javascript and XML
• generates React elements
• const example = <div>I am JSX element</div>
• Expressions in JSX

const name = 'something';
const expressionExample = <h1>Hello, {name}</h1>;

• Events and styling in JSX --> Events in JSX are camel cased. So click event will be used as onClick blur as onBlur so on...Also to add class attribute will be className

• Tags in JSX --> JSX elements will have closing tag if the element has content inside the element

const reactElement = <div/>;
const closingTagElement = <div>some content</div>

React

• Element is rendered by calling render method from ReactDOM

const element = <div>this is element</div>;
ReactDOM.render(element, document.getElementById('root'));

• Component

  • Javascript function
  • accepts properties aka props
  • returns React elements to be displayed on the screen
  • Can be defined either using function or class
  • name must be initialized uppercase ie - MyComponent

• Props & State

  • Props

    • are read only
    • Components defined by class and function have access to props
    • passed down from parent to child component thus facilitating uni directional flow of data
    • default value can be provided by ComponentName.defaultProps = {propName: value}
    • prop-types package can be used for type check

    ComponentName.propTypes = {
      propName: PropTypes.type.isRequired
    }

  • State

    • are private members
    • accessible for components defined using class
    • initialized inside the constructor
    • can be modified using setState function which is asynchronous in nature

• Lifecycle hooks

  • Mounting

    • constructor
    • render
    • componentDidMount

  • Updating

    • shouldComponentUpdate
    • render
    • componentDidUpdate

  • Unmounting

    • componentWillUnmount

Redux

• Action
• Action Creator
  • Synchronous
  • Asynchronous

redux-thunk - redux middleware

redux-thunk enables to dispatch functions rather than objects which can be useful for asynchronous events

Getting Started

• Import applyMiddleware from redux package
• Import thunk from redux-thunk package
• Pass thunk as parameter for applyMiddleware
• Pass the above function as second parameter to createStore from redux package

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
//...
const store = createStore(
  //...
  composeWithDevTools(applyMiddleware(thunk))
);

Graphical Presentation of redux with thunk