React Router

React Router:

Above video by inventor of react-router will make you to understand what it is and how good it really works..

Basically, it remembers your url each time of your navigation using transitions. Say, you are in one page where you were trying to see your friend profile. Then immediately after clicking your friend profile, it asks for login authentication. Now after logging in, it should redirect to your friend profile instead of home page. This is called transition(in simple words url memory). If you go through code, you will understand how that works clearly

There are different states in transitions like abort etc. We will go through those things later.

We used mixins in transitions to achieve the functionality. Mixins are to Pass functionality to multiple components. Looking for more updates on that?? then watch here


Reactjs Kickstart

Things to cover for beginners:

JSX – Allows us to write HTML like syntax which gets transformed to lightweight JavaScript objects.

Virtual DOM  – A JavaScript representation of the actual DOM.

React.createClass – The way in which you create a new component.

render (method) – What we would like our HTML Template to look like.

React.render – Renders a React component to a DOM node.

state – The internal data store (object) of a component.

getInitialState – The way in which you set the initial state of a component.

setState – A helper method for altering the state of a component.

props – The data which is passed to the child component from the parent component.

propTypes – Allows you to control the presence, or types of certain props passed to the child component.

getDefaultProps – Allows you to set default props for your component.

Component LifeCycle

componentWillMount – Fired before the component will mount

componentDidMount – Fired after the component mounted

componentWillReceiveProps – Fired whenever there is a change to props

componentWillUnmount – Fired before the component will unmount





I have covered all these concepts in my lessons here

Reactjs Basics



Pro lessons:

shopping card eg:

Lifecycle methods :


I worked on all basics of react components and updated that code in github. Please follow the below url to get sample lessons that taught by egghead.