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

Title Text

How to structure React Application

By Mukesh Yadav

Made with Slides.com

How to structure React Application

While building React application, we have to think how to structure application, as React is known as Component library also, then our thinking should be according to it. Covering this, but again its depend project, and developer

  • 586

More from Mukesh Yadav