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 https://github.com/rackt/react-router 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

Advertisements

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

Events

onClick

onSubmit

onChange

I have covered all these concepts in my lessons here

Reactjs Basics

https://scotch.io/tutorials/learning-react-getting-started-and-concepts

https://scotch.io/tutorials/build-a-real-time-twitter-stream-with-node-and-react-js

https://scotch.io/courses/getting-started-with-facebooks-react-js

https://scotch.io/tutorials/getting-to-know-flux-the-react-js-architecture

https://scotch.io/tutorials/creating-a-simple-shopping-cart-with-react-js-and-flux

https://scotch.io/tutorials/make-a-mobile-app-with-reactjs-in-30-minutes

Videos

Basics: https://www.youtube.com/playlist?list=PLX7ZnQs0Gb1rA7wXTGNCzvpc0wEyjC6Mt

Pro lessons: https://www.youtube.com/playlist?list=PLX7ZnQs0Gb1rNCtHKGPcr6XjdzXWwz9EX

shopping card eg: https://www.youtube.com/playlist?list=PLX7ZnQs0Gb1oj9qcsKzznOJEbPdppOac9

Lifecycle methods :

http://bigbinary.com/videos/keep-up-with-reactjs/react-life-cycle-methods-in-depth

 

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.

https://github.com/sathyalog/react-lessons