Book Image

ReactJS by Example - Building Modern Web Applications with React

By : Vipul A M
Book Image

ReactJS by Example - Building Modern Web Applications with React

By: Vipul A M

Overview of this book

ReactJS is an open-source JavaScript library that brings the power of reactive programming to web applications and sites. It aims to address the challenges encountered in developing single-page applications, and is intended to help developers build large, easily scalable and changing web apps. Starting with a project on Open Library API, you will be introduced to React and JSX before moving on to learning about the life cycle of a React component. In the second project, building a multi-step wizard form, you will learn about composite dynamic components and perform DOM actions. You will also learn about building a fast search engine by exploring server-side rendering in the third project on a search engine application. Next, you will build a simple frontpage for an e-commerce app in the fourth project by using data models and React add-ons. In the final project you will develop a complete social media tracker by using the flux way of defining React apps and know about the best practices and use cases with the help of ES6 and redux. By the end of this book, you will not only have a good understanding of ReactJS but will also have built your very own responsive frontend applications from scratch.
Table of Contents (20 chapters)
ReactJS by Example - Building Modern Web Applications with React
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Preface
Index

Back to work


"That's good to start, Shawn. Let's move back to the task of building our app using Open Library's Recent changes API now. We already have a basic prototype ready without using ReactJS."

"We will be slowly replacing parts of it using ReactJS."

"This is how the information is displayed right now, using server-side logic, as follows:"

"First task that we have is to display the information retrieved from the Open Library Recent Changes API in a table using ReactJS similar to how it's displayed right now using server-side."

"We will be fetching the data from the Open Library API similar to the following:"

var data = [{ "when": "2 minutes ago",
              "who": "Jill Dupre",
              "description": "Created new account"
            },
            {
              "when": "1 hour ago",
              "who": "Lose White",
              "description": "Added fist chapter"
            },
            {
              "when": "2 hours ago",
              "who": "Jordan Whash",
              "description": "Created new account"
            }];

"Let's use this to prototype our app for now. Before that, let's take a look at the simple HTML version of this app. In our React.render method, we start returning a table element, as follows:"

var App = React.createClass({

  render: function(){
 return <table>
 <thead>
   <th>When</th>
   <th>Who</th>
   <th>Description</th>
 </thead>  
   <tr>
     <td>2 minutes ago</td>
     <td>Jill Dupre</td>
     <td>Created new account</td>
   </tr>
   <tr>
     <td>1 hour ago</td>
     <td>Lose White</td>
     <td>Added fist chapter</td>
   </tr>  
   <tr>
     <td>2 hours ago</td>
     <td>Jordan Whash</td>
     <td>Created new account</td>
   </tr>  
 </table>
  }
});

"This should start displaying our table with three rows. Now, go ahead and add a heading at top of this table from the React App, as follows:"

…
return <h1>Recent Changes</h1>
           <table>
          ….
          </table>
…

"There, something like that?" asked Shawn. "Oh, that didn't work."

"That's because React expends our render method to always return a single HTML element. In this case, after you added the h1 heading, our app started returning two elements, which is wrong. There'll be many cases when you will come across this. To avoid this, just wrap the elements in a div or span tag. The main idea is that we just want to return a single element from the render method."

"Got it. Something like this?"

…
return <div>
         <h1>Recent Changes</h1>
           <table>
          ….
          </table>
         </div>
…