React Components Lifecycle | React Tutorial for Beginners | ReactJS Training | Edureka

Copyright © 2017, edureka and/or its affiliates. All rights reserved. Agenda  What Is Artificial Intelligence ?  What Is Machine Learning ?  Limitations Of Machine Learning  Deep Learning To The Rescue  What Is Deep Learning ?  Deep Learning Applications

Copyright © 2017, edureka and/or its affiliates. All rights reserved. React Components 1 3 4 2 5 We can easily update or change any of these components without disturbing the rest of the application Browser

Copyright © 2017, edureka and/or its affiliates. All rights reserved. React Components – UI Tree Single view of UI is divided into logical pieces. The starting component becomes the root and rest components become branches and sub-branches. 1 3 4 2 5 Browser 1 4 32 UITree 5

Copyright © 2017, edureka and/or its affiliates. All rights reserved. ReactJS Components – Sample Code Each component returns ONE DOM element, thus JSX elements must be wrapped in an enclosing tag Hello World Welcome To Edureka 3 4 2 5 class Component1 extends React.Component{ render() { return( <div> <h2>Hello World</h2> <h1>Welcome To Edureka</h1> </div> ); } } ReactDOM.render( <Component1/>,document.getElementById('content') ); Enclosing Tag

Copyright © 2017, edureka and/or its affiliates. All rights reserved. {this.props.name} Props {this.props.name} Props help components converse with one another. class Body extends React.Component({ render (){ return( <Header name =“BOB”/> <Footer name =“ALEX”/> ); } }); <Body/> <Header/> <Footer/> BOB ALEX

Copyright © 2017, edureka and/or its affiliates. All rights reserved. {this.props.name} Props {this.props.name} Using Props we can configure the components as well class Body extends React.Component({ render (){ return( <Header name =“MILLER”/> <Footer name =“CODDY”/> ); } }); <Body/> <Header/> <Footer/> MILLER CODDY

Copyright © 2017, edureka and/or its affiliates. All rights reserved. Props Props Props Props Props Props Components Components Components Components Components Data flows downwards from the parent component Uni-directional data flow Props are immutable i.e pure Can set default props Work similar to HTML attributes1 2 3 4 5

Copyright © 2017, edureka and/or its affiliates. All rights reserved. Props var Body = React.createClass( { render: function(){ return ( <div> <h1 > Hello World from Edureka!!</h1> <Header name = "Bob"/> <Header name = "Max"/> <Footer name = "Allen"/> </div> ); } } ); Parent Component Sending Props ES5

Copyright © 2017, edureka and/or its affiliates. All rights reserved. Props var Header = React.createClass({ render: function () { return( <h2>Head Name: {this.props.name} </h2> ); } }); var Footer = React.createClass({ render: function () { return( <h2>Footer Name: {this.props.name}</h2> ); } }); ReactDOM.render( <Body/>, document.getElementById('container') ); Child Components Receiving Props ES5

Copyright © 2017, edureka and/or its affiliates. All rights reserved. State Components can change, so to keep track of updates over the time we use state Increase In Temperature ICE WATER State changes because of some event

Copyright © 2017, edureka and/or its affiliates. All rights reserved. State Unlike Props, component States are mutable1 Core of React Components3 Objects which control components rendering and behavior Must be kept simple 2 4 Props Props Props Props Props Components Components Components Components Components State State State State

Copyright © 2017, edureka and/or its affiliates. All rights reserved. State STATEFUL <Component/> STATELESS <Component/> STATELESS <Component/> • Calculates states internal state of components • Contains no knowledge of past, current and possible future state changes Stateless • Core which stores information about components state in memory • Contains knowledge of past, current and possible future state changes Stateful

Copyright © 2017, edureka and/or its affiliates. All rights reserved. class MyApp extends React.Component { constructor(props) { super(props); this.state = { isLoggedIn: false } } receiveClick() { this.setState({ isLoggedIn: !this.state.isLoggedIn }); } Flow Of Stateless & Stateful Components Parent Component Setting Initial State Changing State ES6

Copyright © 2017, edureka and/or its affiliates. All rights reserved. render() { return( <div> <h1>Hello.. I am Stateful Parent Component</h1><br/> <p>I monitor if my user is logged in or not!!</p> <br/> <p>Let's see what is your status : <h2><i>{this.state.isLoggedIn ? 'You Are Logged In' : 'Not Logged In'}</i></h2></p><br/> <h2>Hi, I am Stateless Child Component</h2> <p>I am a Logging Button</p><br/> <p><b>I don't maintain state but I tell parent component if user clicks me </b></p><br/> <MyButton click={this.receiveClick.bind(this)} isLoggedIn= {this.state.isLoggedIn}/> </div> ); } } Flow Of Stateless & Stateful Components Passing Props To Child Component ES6

Copyright © 2017, edureka and/or its affiliates. All rights reserved. const MyButton = (props) => { return( <div> <button onClick={() => props.click()}> Click TO ---> { props.isLoggedIn ? 'Log Out' : 'Log In'} </button> </div> ); }; ReactDOM.render( <MyApp />, document.getElementById('content') ); Flow Of Stateless & Stateful Components Child Component Receiving Props From Parent Component ES6

Copyright © 2017, edureka and/or its affiliates. All rights reserved. Lifecycle Phases Lifecycle methods notifies when certain stage of the lifecycle occurs Code can be added to them to perform various tasks Provides a better control over each phase 04 01 02 03

Copyright © 2017, edureka and/or its affiliates. All rights reserved. Component Lifecycle In A Glance componentWillUnmount() shouldComponentUpdate(nextProps,nextState) componentWillUpdate(nextProps,nextState) componentsWillReceiveProps(nextProps) componentDidUpdate(prevProps, prevState) render() can use this.state getInitialState() componentWillMount() getDefaultProps() componentDidMount() render() ReactDOM.render() ReactDOM.unmount ComponentAtNode() setProps() setStates() forceUpdate() true false

React Components Lifecycle | React Tutorial for Beginners | ReactJS Training | Edureka

More Related Content

What's hot

Viewers also liked

Similar to React Components Lifecycle | React Tutorial for Beginners | ReactJS Training | Edureka

More from Edureka!

Recently uploaded

In this document

React Components Lifecycle | React Tutorial for Beginners | ReactJS Training | Edureka