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

Passing data to components


"Do we define our data and everything else in the render method?"

"I was just getting to that. Our component should not contain this information. The information should be passed as a parameter to it."

"React allows us to pass the JavaScript objects to components. These objects would be passed when we call the React.render method and create an instance of the <App> component. The following is how we can pass objects to it:"

React.render(<App title='Recent  Changes'/>, document.body);

"Notice how are using the <App/> syntax here, instead of createElement. As I mentioned previously, we can create elements from our components and represent them using JSX as done earlier."

React.render(React.createElement(App), document.body)

"The preceding code becomes the following:"

React.render(<App/>, document.body)

"That looks even more cleaner", said Shawn.

"As you can see, we are passing the title for our table as the title parameter, followed by the contents of the title. React makes this data passed to the component as something called props. The props, short for properties, are a component's configuration options that are passed to the component when initializing it."

"These props are just plain JavaScript objects. They are made accessible to us within our component via the this.props method. Let's try accessing this from the render method, as follows:"

…
  render: function(){
   console.log(this.props.title);
  }
…

"That should start logging the title that we passed to the component to the console."

"Now, let's try to abstract the headings as well as the JSON data out of the render method and start passing them to the component, as follows:"

       var data = [{ "when": "2 minutes ago",
                           "who": "Jill Dupre",
                           "description": "Created new account"
                         },
                         ….
                        }];  
var headings = ['When', 'Who', 'Description']
<App headings = {headings} data = {data} />

"There. We pulled the data out of the render method and are now passing it to our component."

"We defined the dynamic headers for our table that we will start using in the component."

"Here the curly braces, used to pass the parameters to our component, are used to specify the JavaScript expressions that will be evaluated and then used as attribute values."

"For example, the preceding JSX code will get translated into JavaScript by React, as follows:"

React.createElement(App, { headings: headings, data: data });

"We will revisit props later. However, right now, let's move on to complete our component."

"Now, using the passed data and headings via props, we need to generate the table structure in the app's render method."

"Let's generate the headings first, as follows:"

var App = React.createClass({

  render: function(){
      var headings = this.props.headings.map(function(heading) {
          return(<th>
                 {heading}
                 </th>);
      });
  }
});

"Notice, how we are using this.props.headings to access the passed information about headings. Now let's create rows of the table similar to what we were doing earlier:"

var App = React.createClass({

  render: function(){
      var headings = this.props.headings.map(function(heading) {
          return(<th>
                 {heading}
                 </th>);
      });

      var rows = this.props.data.map(function(change) {
          return(<tr>
                   <td> { change.when } </td>
                   <td> { change.who } </td>
                   <td> { change.description } </td>
                 </tr>);
      });
  }
});

"Finally, let's put the headings and rows together in our table."

var App = React.createClass({

  render: function(){
      var headings = this.props.headings.map(function(heading) {
          return(<th>
                 {heading}
                 </th>);
      });

      var rows = this.props.data.map(function(change) {
          return(<tr>
                   <td> {change.when} </td>
                   <td> {change.who} </td>
                   <td> {change.description} </td>
                 </tr>);
      });

      return(<table>
               {headings}
               {rows}
             </table>);
  }
});

React.render(<App headings = {headings} data = {data} />,
                      document.body);

"The table is now displayed with the passed dynamic headers and JSON data."

"The headings can be changed to ["Last change at", "By Author", "Summary"] and the table in our view will get updated automatically."

"Alright, Shawn, go ahead and add a title to our table. Make sure to pass it from the props."

"Ok," said Shawn.

"Now, the render method will be changed to the following:"

…
 return <div>
               <h1>
                 {this.props.title}
               </h1>
               <table>
                 <thead>
                   {headings}
                 </thead>  
                 {rows} 
                </table>
            </div>
…

"While the call to React.render will change to the following:"

var title =  'Recent Changes';
React.render(<App headings={headings} data={data} title={title}/>, document.body);

"Awesome. You are starting to get a hang of it. Let's see how this looks in completion shall we?"

var App = React.createClass({
  render: function(){
      var headings = this.props.headings.map(function(heading) {
          return(<th>
                 {heading}
                 </th>);
      });

  var rows = this.props.data.map(function(row){
  return  <tr>
     <td>{row.when}</td>
     <td>{row.who}</td>
     <td>{row.description}</td>
   </tr>

  })
 return <div><h1>{this.props.title}</h1><table>
 <thead>
{headings}
 </thead>  
{rows} 
 </table></div>
  }
});
  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"
            }];

var headings = ["Last updated at", "By Author", "Summary"]
var title = "Recent Changes";
React.render(<App headings={headings} data={data} title={title}/>, document.body);

"We should again start seeing something as follows:"

"Here we have it, Shawn. Our very first component using React!", said Mike.

"This looks amazing. I can't wait to try out more things in React!", exclaimed Shawn.