React

How to structure application?

About React

React is a JavaScript library which is used for creating user interfaces. It is only concerned with what you see on the front end.

React Component

Each section highlighted here is considered as a component. Component is a bit of code that represents bit of page.

Create react app using CLI

npm install -g create-react-app
create-react-app project-name
cd project-name

npm start

Git branch : codelab-1

Let's customise

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

Git branch : codelab-1

Think feature wise and create components

Git Branch: codelab-2

Styling React Components

CSS / SASS

Git branch : codelab-3

Managing State / Redux

Git branch : codelab-4

Redux Basic

Concept of data storing & communication with in application

Store - the whole state of your app is stored in an object tree

Action - The only way to change the state tree is to emit an action, an object describing what happened

Reducers - To specify how the actions transform the state tree

Redux

Store
Actions
Dispatchers
Reducers