React Component Props State, Life-cycle methods.

1. Introduction to ReactJs
18-02-2017

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

7. Virtual Dom(Diffing alg)

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>
);
}
}

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