Introduction to react_js
Download as PPTX, PDF0 likes2,246 views
React is a JavaScript library for building user interfaces. It was created by Facebook and is best for building dynamic websites like chat applications. React uses a virtual DOM for efficiently updating the view after data changes. Components are the building blocks of React and can contain state and props. The document provides an example of a simple component class and demonstrates how to add state and props. It also includes links to example code and MicroPyramid's social media profiles.
Introduction to react_js
- 2. React? ● JavaScript library for building UI ● created by Facebook ● “view” in MVC. ● Best Suitable for Dynamic Websites(ex: chat application)
- 3. Used By
- 4. Component
- 5. React ● Automatically updates your View after data changes. ● Render(Representation of view)
- 6. Virtual Dom
- 8. Create React APP: npm install -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 extends Component { 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 extends Component { 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> ); } }
- 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