yasircse/loadingcomponet

React Js App designed on material-ui demonstrates the implementation of React-Router3.0.0. Along with Conditional Component, Component Reusability and React Life cycle metthods.

React Router

According to React-Router official websit [https://reacttraining.com/react-router/ ], React-Router is the collection of navigational components it enables you to navigate througout your web App. Lets say you have designed the web app contains different pages and you want to surf through pages there comes a react router to play the part. Currently, the latest version of React-Router is 4.0, however in this tutorial we will use React-Router 3.0.0. Since this tutorial is to give you the basic idea how React-Router workes, but along with this we will also learn

Conditional Components

Component Reusability

React Life Cycle Methods used in this tutorial

Conditional Component

Conditional component are nothing but the react components. with conditional behaviour depending upon the state of the app. Lets say in your app you want logout button to apear next to Account profile whenever user logs in and disapear when user logs out

Component Reusability

Reusability is the main essence of React. Reusability refers to using same component one or more times depending upon its need in the App. Lets say we are using Login Button component in the App, then in order to use it multiple time we will pass its basic properties such as name style and onCLick event as the props, by doing that we can use same button Component for aother purpose, this way we can avoid bulking up the App

React Life Cycle Methods used in this tutorial

There are many Life cycle methods that react provide, however in this tutorial we will use

componentDidMount()

componentWillRecieveProps

componentDidMount()

componentDidMount() is invoked soon after component is rendered.

componentWillReceiveProps()

componentWillReceiveProps() is invoked when rendered component recieves the new props.

Lets Dive into the Tutorial

So, we will design the simple login app with material-ui from scratch. with few pages to give you idea of the routing.

Step 1

Create-react-app projectname

Step 2

cd projectname

Step 3

npm install --save material-ui

Step 4

npm install --save react-tap-event-plugin'

Note: Step 4 is important! you need to install 'react-tap-event-plugin', and use the 'injectTapEventPlugin()' method in your index.js file otherwise you will mess up with onTouchTap() functionality. According to Material-UI official website (http://www.material-ui.com/#/get-started/installation)the react-tap-event-plugin provides onTouchTap() to all React Components. It's a mobile-friendly onClick() alternative for components in Material-UI, especially useful for the buttons.

App Preview

https://hidden-peak-81473.herokuapp.com/

AppScreen shot