Web Programming TutorialsLearn How To Use Components To Create A React Application

Learn How To Use Components To Create A React Application

use-components
React components give the developer a way to create visual elements and interactions that make up an application. For example, look at the Eduonix contact us page shown in the screen-shot below.
eduonix-contact
The image above shows how the finished application looks like. Each of the parts that make up the application is wrapped around a self contained module referred to as a component. Each element in the Eduonix contact us page is a component that takes care of the visual aspects and any interactions needed to make the application functional. This may not seem clear for now, but once we look at some examples you will understand how components are used.

From a coding perspective, you can think of components as reusable pieces of JavaScript code that are used to display HTML elements. In the learn react framework, we looked at three ways in which you can begin to write React code. These were JSFiddle, starter kit and using Node.js. Please refer to that article to learn how to set up a development environment. In this tutorial, we will use the starter kit. Navigate to this link https://facebook.github.io/react/downloads.html and download the starter kit.
starter-kit
A fully function web application consists of HTML, CSS and JavaScript code. The code below shows the basic structure of a react application. Using an HTML or text editor create a firstapplication.html document in the root directory of the starter kit.

<!DOCTYPE html>
<html>
 
<head>
  <title>Learning React Components</title>
  <script src="https://fb.me/react-15.1.0.js"></script>
  <script src="https://fb.me/react-dom-15.1.0.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
 
<body>
  <div id="container"></div>
  <script type="text/babel">
 
  </script>
</body>
 
</html>

text-doc
There is no functionality in the code above. We are just referencing the Babel and React libraries and creating a div element. We will use components to add functionality in our web application.

At the beginning of this tutorial, we noted that components are just JavaScript code that displays HTML. In the code shown below we are using the render method of ReactDOM to display Hello World text.

ReactDOM.render(
  <div>
    <p>Hello, world!</p>
  </div>,
  document.querySelector("#container")
);

There are several ways that we can use to create components, but for now we will use React.createclass method. To use a component to display the Hello World text we need to add the code below immediately above the render method.

var HelloWorld = React.createClass({
 
});

What we have done in the code above is created an empty component. For now, the component does not do anything. We will add properties to the component to create its functionality. The render property is mandatory as it helps a component function properly. To add the render method you modify your code as shown below

 var HelloWorld = React.createClass({
  render: function() {
 
  }
});

Earlier we encountered the ReactDOM.render method that handles JSX. The render function works similarly to handle JSX. Don’t worry about JSX, we have dedicated an entire article to discuss it. Refer to learn how to use JSX article. To display some text using our component, we add the return method as shown below

var HelloWorld = React.createClass({
  render: function() {
    return (
      <p>Hello, this is my first React component I learned at Eduoix</p>
    );
  }
});

Once we have built our component, we need to use it by calling it. To call a component we use ReactDOM.render by passing the name of the component. The correct way to call our HelloWorld component is shown below.

ReactDOM.render(
  <HelloWorld/>,
  document.querySelector("#container")
);

Open JSFiddle paste the code and click run to quickly test if the code is working properly. JSFiddle is available at this link https://jsfiddle.net/reactjs/69z2wepo/
helloworld-react
The way in which we have called our component using HTML like tags is an example of JSX. This means we can manipulate our components just like any other HTML object. For example, we can display our component in a div as shown below

ReactDOM.render(
  <div>
    <HelloWorld/>
  </div>,
  document.querySelector("#container")
);

Use JSFiddle to see the output.

For now our component just displays some hard coded text. To make our components more interactive we use properties. Access to a property is done via this.props property and placing it in between curly braces. In the component we have created, we would like to greet a specific person. We modify our component by accessing our property as shown below

var HelloWorld = React.createClass({
  render: function() {
    return (
      <p>Hello, {this.props.greetTarget}! I am learning React at Eduonix</p>
    );
  }
});

We also need to modify our component call to include the people we would like to know we are learning React at Eduonix. This happens by adding an attribute having the same name as our property followed the value we would like to pass. In the component call, we will add our properties as shown below.

ReactDOM.render(
  <div>
    <HelloWorld greetTarget="Teacher"/>
    <HelloWorld greetTarget="Dad"/>
    <HelloWorld greetTarget="Mum"/>
    <HelloWorld greetTarget="Brother"/>
  </div>,
  document.querySelector("#container")
);

Add the code to JSFiddle to see the results.
react-property1
There is no limit to the number of properties you can have. The this.props proerty will take care of all your property calls.

Earlier we noted that components can be manipulated like any other HTML object. In this section, we will look at how to use children in components. To demonstrate this let us look at a ChildButton component that has children inside a button. The code is shown below.

var ChildButton = React.createClass({
  render: function() {
    return (
      <div>
        <button type={this.props.behavior}>{this.props.children}</button>
      </div>
    );
  }
});

We call our component using ReactDOM.render as shown below

ReactDOM.render(
  <div>
    <ChildButton behavior="Submit">A child in a button</ChildButton>
  </div>,
  document.querySelector("#container")
);

In our component call, we have created a custom property behavior that helps us specify the type attribute of our button. Use JSFiddle to see the results.
child-button
In this tutorial we introduced components as the building blocks used in a React application. We discussed how components are used to handle visual aspects and functionality attached to those visual aspects. We looked at the basic structure of a React application. We proceeded to see how to create components and modify their properties. This tutorial focused on building a very simple application. In subsequent applications, we will look at more complex examples to demonstrate how to build React applications.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -