Building the first React Component

After having created the first project using Create-React-App, we can get started with our first React app development.

At the end of installation using Create-React-App, we get a valuable list of instructions which can be kept handy during development.

react1

The Folder Structure

Now that we are all set, let’s first understand the default folder structure which gets created.

react2

Folder Files Description
node_modules Includes all the dependencies required for the application as listed in package.json. This is installed as a part of the project creation. If any new dependencies added or to regenerate the dependencies, use npm install.
public This folder includes the common elements to be used across the application.
index.html The single page application template html where all the DOM elements and components finally get rendered.
manifest.json This is the application manifest which provides information about the application (such as name, author, icon, and description) in a JSON text file. The purpose is to provide users with quicker access and a richer experience with all the information.
favicon.ico The icon for your application or website.
src The folder which contains all our application code including all the components, js, jsx etc.
App.css This is the css for the App component which is imported and used in App.js
App.js This is the first component which has been defined and provided in this template.
App.test.js This is to test the App component.
index.css Common css file
index.js This is the javascript entry file which imports the App component and renders to the root of the DOM.
registerServiceWorker.js This is a capability provided for improved performance of the application in production used to register a service worker to serve assets from local cache.

Below 2 files are mandatory to be present with the exact same name and location for the project to build. Other files can be deleted or renamed.

public/index.html  

src/index.js 

Any new code should be added within the src folder only to be processed in the application. You can go through the README for more details.

Creating a new Component

We will start with adding a simple component called MyInput which contains an input box and a button.

Let’s start with creating a components folder under src folder where we save all the component related js files.

MyInput.js

react-3

Next we import and include the new component in the App.ts component.

import MyInput from './components/MyInput';

Include the tag for the new component in the html content

 <MyInput />

App.js after inclusion of MyInput

react4

Following this approach we can modify the view and define any number of complex components and include in our applications. The components can be nested to any level as per the need of the design.

Next let’s understand how we can make these components more powerful using state.

Understanding State

State is a plain JavaScript object which exists in any instance of a class based component and is used to record and react to user events.

Class based component only have a state. Whenever the state changes, the component and all its child components are automatically re-rendered.

The properties of the state should include the properties of the component on which changes need to be tracked.

How to use state

The first step to make use of state is to initialize state using constructor.

The state is initialized within the constructor function where the value of the property associated with the state is set to the initial value when the instance is created. The constructor is the first function to be executed when an instance of the component is created. The property can be any user defined property which needs to be associated with the state change of the component.

In the below example, txtvalue is the property name to track the state of the input component.

constructor(props){

super(props);

this.state= { txtvalue :''};

}

The value is assigned directly to the state only in the constructor. Anywhere else in the component, the state should be manipulated using the function setState(). Direct assignment should not be done.

Let’s see state in action in MyInput component.

react5

In the above example, we set the state property txtvalue, to the value of the input text as entered by the user, using the onChange event handler. The state is then displayed on the button using {this.state.txtvalue}.

This is how the application looks now.

react6

Class based components are used when the state of the component needs to be tracked and acted upon. For simple components needed for display only, functional components are preferable to use.

Conclusion

This blog helps to get started with ReactJS development by defining components and making them powerful with state manipulations. In future blogs we will see how this can be done for different types of UI elements to unleash the full potential of ReactJS.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s