Creating a React Component

About this course: Up and Running with React.js

A new JavaScript framework has arrived: React.js. React.js is designed to make the process of building modular, reusable user interface components simple and intuitive. Here Eve Porcello will help you learn React.js while guiding you through the process of building the interface for a bulletin board app. She reviews components, properties, and states, as well as the foundational parent/child relationships within React.js. Eve also describes the life cycle of components and how developers can trigger creation, lifetime, and teardown events. The course wraps with a chapter dedicated to building a more complete app with React.js and companion tools CommonJS, Browserify, and Reactify. See more: Up and Running with React.js

Topics include:

• What is React.js?
• Introducing JSX
• Creating a React component
• Handling events
• Using states
• Defining parent/child relationships
• Adding child elements
• Mounting and updating components
• Creating a React.js app

React: a JavaScript library

React, sometimes styled React.js or ReactJS, is an open-source JavaScript library for creating user interfaces that aims to address challenges encountered in developing single-page applications. It is maintained by Facebook, Instagram and a community of individual developers and corporations.

React is intended to help developers build large applications that use data that changes over time. Its goal is to be simple, declarative and composable. React only handles the user interface in an app; it is considered to only be the view in the model–view–controller (MVC) software pattern, and can be used in conjunction with other JavaScript libraries or larger MVC frameworks such as AngularJS. It can also be used with React-based add-ons that take care of the non-UI parts of building a web application.

According to JavaScript analytics service, Libscore, React is currently being used on the homepages of Imgur, Bleacher Report, Feedly, Airbnb, SeatGeek, HelloSign, and others.

How to define a component, rendering, events, properties and state

1. var BreadcrumbsDemo = React.createClass({ 
2. getContent: function(path) { 
3. return path[path.length - 1]; 
4. }, 
5. getInitialState: function() { 
6. return { 
7. path: this.props.path 
8. }; 
9. }, 
10. onPathChange: function(value) { 
11. this.setState({ 
12. path: value 
13. }); 
14. }, 
15. reset: function() { 
16. this.setState({ 
17. path: this.props.path 
18. }); 
19. }, 
20. render: function() { 
21. return ( 
22. <div> 
23. <div id="breadcrumb-container"> 
24. <Breadcrumbs path={this.state.path} maxEntries="5" 
25. onChange={this.onPathChange}/> 
26. </div> 
27. <div id="content">{this.getContent(this.state.path)}</div> 
28. <button id="resetButton" onClick= {this.reset}>Reset</button> 29. </div> 
30. ) 
31. } 
32. }); 
33. 
34. var fullPath = ['element1', 'element2', 'element3', 'element4', 35. 'element5', 'element6', 'element7']; 
36. 
37. React.render( 
38. <BreadcrumbsDemo path={fullPath}/>, 
39. document.querySelector('#container') 
40. );

The most important part of a component definition is method render in lines 20–31 where the component declaratibely defines how it should be rendered. This can include other components like Breadcrumbs in line 24 and familiar HTML elements like div in line 27.

We can also parameterize the rendition with the component data which can come from two sources: component state and component properties. See more: Web Components and Friends: React.js, Angular.js, Polymer

See more resources:

The React.js Way: Getting Started Tutorial
React.js: Super-fast Single Page Web Applications
React.js Tutorial Part 3

Website:
Build My Site