Introduction to react_js

Introduction to react_js

• 1.
  Introduction to ReactJs 18-02-2017
• 2.
  React? ● JavaScript libraryfor building UI ● created by Facebook ● “view” in MVC. ● Best Suitable for Dynamic Websites(ex: chat application)
• 3.
  Used By
• 4.
  Component
• 5.
  React ● Automatically updatesyour View after data changes. ● Render(Representation of view)
• 6.
  Virtual Dom
• 7.
  Virtual Dom(Diffing alg)
• 8.
  Create React APP: npminstall -g create-react-app create-react-app hello-world cd hello-world npm start
• 9.
  First Component import React,{ Component } from 'react'; class FirstComponent extends Component { render() { return ( <div className="firstComponent"> Hello, World! </div> ); } }
• 10.
  Props
• 11.
  Props class PropsExample extendsComponent { alertmessage(){ alert('Hi, Test alert') } render() { return ( <button class="ActionButton" onClick={this.alertmessage}> <span>{this.props.buttontext}</span> </button> ); } } // Usage: <PropsExample buttontext=”RSVP”>
• 12.
  State
• 13.
  State: class StateExample extendsComponent { constructor(props) { super(props); this.state = { count: 0 }; } Add(){ this.setState({count: this.state.count + 1}) } render() { return ( <h1>{this.state.count}</h1> <button class="ActionButton" onClick={this.Add}> <span>+(Add)</span> </button> ); } }
• 14.
  Component Life Cycle.
• 15.
  Meetup Code Examples https://github.com/ravigadila/learn-react/tree/master/meetup/18_02_2017
• 16.
  Micro Pyramid Micropyramid.com Blog: micropyramid.com/blog Forum:micropyramid.com/forum/ GitHub: https://github.com/MicroPyramid/ Facebook: https://www.facebook.com/MicroPyramid/ Twitter: https://twitter.com/MicroPyramid