Book Image

Node.js 6.x Blueprints

By : Fernando Monteiro
Book Image

Node.js 6.x Blueprints

By: Fernando Monteiro

Overview of this book

Node.js is the most popular framework to create server-side applications today. Be it web, desktop, or mobile, Node.js comes to your rescue to create stunning real-time applications. Node.js 6.x Blueprints will teach you to build these types of projects in an easy-to-understand manner. The key to any Node.js project is a strong foundation on the concepts that will be a part of every project. The book will first teach you the MVC design pattern while developing a Twitter-like application using Express.js. In the next chapters, you will learn to create a website and applications such as streaming, photography, and a store locator using MongoDB, MySQL, and Firebase. Once you’re warmed up, we’ll move on to more complex projects such as a consumer feedback app, a real-time chat app, and a blog using Node.js with frameworks such as loopback.io and socket.io. Finally, we’ll explore front-end build processes, Docker, and continuous delivery. By the end of book, you will be comfortable working with Node.js applications and will know the best tools and frameworks to build highly scalable desktop and cloud applications.
Table of Contents (16 chapters)
Node.js 6.x Blueprints
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface

Creating React components


Similar jQuery widget and AgularJS directives there is React.js, which is  very useful library for creating interface components. However, it is not a complete framework like AngularJS or Ember.js.

The way to think about React.js is by thinking about interface components: everything is a component and a component may be composed of one or more components.

See the following figure:

Screenshot simulating React.js components

Let's create the components one by one for a better understanding:

  1. Inside the client folder, create a new folder called js.

  2. Inside the js folder, create a new file called review.js and add the following content:

          var Review = React.createClass({ 
     
                   render: function() { 
                         return ( 
                             <div className="list-group-item"> 
                               <small className="text-muted pull-right">
                                  {this.props.email}
                               </small> ...