Learn React.js with me!

@KIPROSHBy Shivani Thakur

Guess what it is???

Still thinking?? Ok then Guess this...

Still not sure…. Guess this one !

JSX => SIMPLEJSX is easy and simple to read and understand :)React.DOM => ComplicatedReact.DOM end up getting complicated as more & more nodes gets added it ….

It’s nothing but JSX Vs React.DOM !!

DO BELIEVE ME :(Then Check

This Out

React.DOM Sample

BirthDayRow = React.createClass({ render: function() { return DOM.div({className: 'row', id: "bday-row1"}, DOM.div({className: 'columns'}, "How to make things complicated"), DOM.div({className: 'columns'}, DOM.div({className: 'row'}, DOM.div({className: 'columns'},"Hi"), DOM.div({className: 'columns'}, "Complicated!")

)))}});

JSX lets us create JavaScript objects using HTML syntax. So it is easy to write.var BirthDayRow = React.createClass({render: function(){ <div id='bday-row1' className='row'> <div className='columns'>How to make things COMPLICATED => SIMPLE</div> <div className='columns'>

<div className='row'><div className='columns'>Hi</div><div className='columns'>Simple!</div>

</div></div>

</div>} });

JSX Sample

Life is REALLY simple :) and if you really want to keep it simple then use => “ JSX ”But if you insist to make it complicated then use=> “ React.DOM ”

Wisdom Quote :)

Component is nothing but a function which takes input params as "Props" and "State". Using these input parameters it will render a dynamic HTML

*NOTE - Main limitation of the component is, "Render single node" only. If you return multiple nodes that will not be render. You have to wrap multiple nodes into single node

Component

Immutable => An immutable object is an object whose state cannot be modified after it is created."Props" (properties) is immutable within the component.

Mutable => Mutable object is an object which can be modified after it is created.

Immutable - Mutable

Once component is there we would like to have some interactions in component. And for that React introduces “State”. State is private to “Component” and can change it by calling “this.setState”

e.g. when I click button and want to show a message i.e. an interaction

State

Inputs to the component are called as props (properties) and we pass them as attribute in JSX or React.DOM

Props are passed from the parent and are "owned" by the parent.

Property

Start Learning!