Reader small image

You're reading from  Getting Started with React

Product typeBook
Published inApr 2016
Reading LevelIntermediate
Publisher
ISBN-139781783550579
Edition1st Edition
Languages
Tools
Right arrow
Authors (3):
Doel Sengupta
Doel Sengupta
author image
Doel Sengupta

Doel Sengupta is a software programmer and is working in the industry for over 7 years, as a DevOps engineer and as a developer building enterprise level Web and mobile applications using RubyonRails and Rhomobile, Chef. Currently she is exploring the Javascript ecosystem. She has been a speaker in Ruby conferences. She finds interest in life sciences and has publications of her work in customised human joint prostheses design using Ansys & Mimics. She is an avid blogger (www.doels.net) writing about her technical and not-so-technical passions like culinary, photography, films. Follow her on twitter @doelsengupta.
Read more about Doel Sengupta

Manu Singhal
Manu Singhal
author image
Manu Singhal

Manu Singhal has been a programmer for 8 years and loves to code on Ruby and React. These days, he is busy cofounding a startup in e-commerce. In earlier roles, he has developed many enterprise and consumer based web/mobile applications and has also been a speaker at Ruby Conferences in India and the USA. He never misses a chance to play tennis and go hiking. He has worked with Tata Consultancy Services and McKinsey & Company as a software developer and an architect. He has contributed in books on Rhomobile and RubyMotion by Packt earlier.
Read more about Manu Singhal

Danillo Corvalan
Danillo Corvalan
author image
Danillo Corvalan

Danillo Corvalan is a software engineer who is passionate about software patterns and practices. He has a keen interest in the rapidly changing world of software development. He is quite insistent about the need of fast and reliable frameworks. He is originally from Brazil, now living in Amsterdam, the Netherlands. He loves biking a lot. In Brazil, he worked on applications for the general public and lawyers, at the Court of Justice in his hometown city, Cuiab/MT. Then, he moved to Florianpolis/SC, and worked at Bravi Software for developing hybrid and responsive web apps for education. Now, in Amsterdam, he is working at Vigour.io and helping to develop live multiscreen and responsive apps. From the web client-side perspective, in general, he has been in touch with technologies, such as vanilla JavaScript, jQuery, Backbone, and ReactJS. For the past 5 years, Danillo has also worked with open source platforms and JavaScript on the server side (Node.js). He has played with React Native in order to develop native mobile applications with ReactJS.
Read more about Danillo Corvalan

View More author details
Right arrow

Chapter 5. Component Life cycle and Newer ECMAScript in React

So far, we have explored React component properties and how we need to initialize, update, and change the component's state(s) for interactive applications. Let's now explore the lifecycle of such a React component in this chapter. We will also dig into future ECMAScript syntax and a few changes that the React community also used from version 0.13.0. For this, we will review some ES6 and ES7 features within the React library.

While creating any React component by calling React.createClass(), we need to always have a render method. This render method returns a description of the DOM. React has a performance edge in our applications because React maintains a fast in-memory representation of the DOM and never directly interacts with the actual DOM. Thus, when the render method returns the description of the DOM, React can compare the difference between the actual DOM and the in-memory representation, and, based on the difference(s...

React component lifecycle


As per Facebook's React documentation from http://facebook.github.io/react/docs/working-with-the-browser.html, the React component lifecycle can be broadly classified into three categories as follows:

"Mounting: A component is being inserted into the DOM.

Updating: A component is being re-rendered to determine if the DOM should be updated.

Unmounting: A component is being removed from the DOM."

React provides lifecycle methods that you can specify to hook into this process. We provide will methods, which are called right before something happens, and did methods which are called right after something happens.

Mounting category

Mounting is the process of publishing the virtual representation of a component into the final UI representation (for example, DOM or native components). In a browser, it would mean publishing a React element into an actual DOM element in the DOM tree.

Other ES (ECMAScript) versions in React


In the second half of this chapter, we will explore how React supports newer versions of ECMAScript. Until now, we have explored the different lifecycle methods in a React component. In this section of the chapter, we will dig into something different: how changes in the new version of ECMAScript have been adopted by React.

ES6

ES6 is the current version of the ECMAScript Language Specification Standard. Further details about the changes and the new things incorporated can be found on the Mozilla Development Network site: https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla

Complete documentation for ES6 is beyond the scope of this book.

According to the Facebook documentation:

Starting with React 0.13.0 a transpiler allows us to use ES6 classes. JavaScript originally didn't have a built-in class system. The developer team wanted class creation using the idiomatic JavaScript style. Therefore instead of...

Summary


In this chapter, we have gone through the lifecycle of a typical React component, the various phases it undergoes, and how React renders the view based on the diff-ing algorithm (that is, calculating the deltas between the virtual DOM and the actual DOM).

In the second part of the chapter, we explored the future of ECMAScript and how React.js already supports it. For this, we have used sample code examples from Facebook's documentation.

In the next chapter, we will discuss React's reusable components known as mixins. We will also explore how we can add validations in a React-based application. Validations are required for apps that accept user input. User inputs should be validated before being sent to the server, to prevent malicious or invalid content from being sent.

lock icon
The rest of the chapter is locked
You have been reading a chapter from
Getting Started with React
Published in: Apr 2016Publisher: ISBN-13: 9781783550579
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
undefined
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at €14.99/month. Cancel anytime

Authors (3)

author image
Doel Sengupta

Doel Sengupta is a software programmer and is working in the industry for over 7 years, as a DevOps engineer and as a developer building enterprise level Web and mobile applications using RubyonRails and Rhomobile, Chef. Currently she is exploring the Javascript ecosystem. She has been a speaker in Ruby conferences. She finds interest in life sciences and has publications of her work in customised human joint prostheses design using Ansys & Mimics. She is an avid blogger (www.doels.net) writing about her technical and not-so-technical passions like culinary, photography, films. Follow her on twitter @doelsengupta.
Read more about Doel Sengupta

author image
Manu Singhal

Manu Singhal has been a programmer for 8 years and loves to code on Ruby and React. These days, he is busy cofounding a startup in e-commerce. In earlier roles, he has developed many enterprise and consumer based web/mobile applications and has also been a speaker at Ruby Conferences in India and the USA. He never misses a chance to play tennis and go hiking. He has worked with Tata Consultancy Services and McKinsey & Company as a software developer and an architect. He has contributed in books on Rhomobile and RubyMotion by Packt earlier.
Read more about Manu Singhal

author image
Danillo Corvalan

Danillo Corvalan is a software engineer who is passionate about software patterns and practices. He has a keen interest in the rapidly changing world of software development. He is quite insistent about the need of fast and reliable frameworks. He is originally from Brazil, now living in Amsterdam, the Netherlands. He loves biking a lot. In Brazil, he worked on applications for the general public and lawyers, at the Court of Justice in his hometown city, Cuiab/MT. Then, he moved to Florianpolis/SC, and worked at Bravi Software for developing hybrid and responsive web apps for education. Now, in Amsterdam, he is working at Vigour.io and helping to develop live multiscreen and responsive apps. From the web client-side perspective, in general, he has been in touch with technologies, such as vanilla JavaScript, jQuery, Backbone, and ReactJS. For the past 5 years, Danillo has also worked with open source platforms and JavaScript on the server side (Node.js). He has played with React Native in order to develop native mobile applications with ReactJS.
Read more about Danillo Corvalan

Method Name

Method Function

getInitialState()

This method is invoked before the component is...