Learn react.js with me!
Download as PPTX, PDF1 like583 views
This document discusses React concepts like JSX, React.DOM, components, props, state, and immutability. It explains that JSX is easier to read and write than React.DOM. Components are functions that take props and state as input and render dynamic HTML. Props are immutable properties passed from a parent, while state can be changed internally using setState. The document encourages learning React and provides sample code to illustrate these concepts.
Learn react.js with me!
- 1. Learn React.js with me! @KIPROSH By Shivani Thakur
- 2. Guess what it is???
- 3. Still thinking?? Ok then Guess this...
- 4. Still not sure…. Guess this one !
- 5. JSX => SIMPLE JSX is easy and simple to read and understand :) React.DOM => Complicated React.DOM end up getting complicated as more & more nodes gets added it …. It’s nothing but JSX Vs React.DOM !!
- 6. DO BELIEVE ME :( Then Check This Out
- 7. 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!") )))}});
- 8. 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
- 9. 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 :)
- 10. 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
- 11. 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
- 12. 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
- 13. 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
- 14. Start Learning!