Components in React library

6 min readMar 3, 2021

React Logo

So ,in this post we will start by learning more about Components as well as types of Components in React . Finally ,we will be building a Simple Counter App .

What is React ?

You can find more about React at :

React Docs

My First Post

Components

Components are like functions that return HTML elements. Components can be thought of as code fragments or building blocks for web page . Components are independent, small pieces of code which are reusable .

There are two types of components in React Library :

1. Class Components

Lets break the syntax to understand it more precisely :

import React from 'react' ;

To share functionality across modules we use import and export statements . Modules can contain functions and classes in them . Using export keyword we can share variables, functions , objects as well as classes and these can be imported in other files using import keyword .

In the first statement we are importing React from ‘ react ’ module . So , It can be simply said that a module named ‘react’ is exporting something named React which has certain functionality using default export statement “export default React” and we are importing it in somewhere in another module using import keyword .

Note : There can be only a single export default in a module .

If we wish to have multiple exports from a module we can make use of named exports . For ex : Something exported as export {object_1,object_2} and can be imported using import {object_1,object_2} from ‘module_name’ .

So , from a module named ‘react’ we are importing a named export called Component like :

import { Component } from 'react' ;

class Counter extends Component

Here class is a keyword used to define a class with a name “ Counter ” . The extends keyword is used to create a child class ( Counter ) of parent Class ( React.Component ). We define React.Component as parent for every class Component so that the child can inherit all the methods from the same .

render( )

This method inside any component returns HTML .

2. Function Components .

As it’s clearly visible React function Components are just a JavaScript function returning HTML .

Note : Function Component do not require render method .

Now we have basic understanding of the React Components we will dive in build our React App .

This tutorial contains three important steps :

Creating React App .
Running Server on Machine .
Writing Code .

Step 1 : Creating React App

Open up the terminal or command-line . Navigate to location where you want you create your project folder and there run the following commands :

mkdir project— creates a new directory named project
cd project — navigate to project folder
npx create-react-app counter — This commands sets up all the necessary configuration and installs packages for us automatically .We don’t need to do all these things manually . This command handles all these things for us .

Once the installation is complete we will see output something like this on our terminal :

By this we are absolutely sure that we have completed our first step successfully . Congrats !

Step 2 : Running Development Server

Now first we will navigate to our counter folder . Then we will start our local development server .

Commands

A Browser window will pop up and we will see a spinning logo at the middle of the browser’s window .

Browser Window with spinning react logo .

Step 3 : Writing Code

For this step we will navigate to our App.js file and tidy it up . The updated file will look like this :

Navigate back to browser window and now instead of spinning React logo we will have text content . So finally by making use of React component we rendered text content on the screen .

Now , we move on to next writing code for the Counter . Navigate to src folder which is inside the COUNTER app . There create a new file called Counter.js

Once the first is created we will start writing our first React component .

So the updated counter.js file will look something like this . Here first we defined a function Component that return a <h1> tag . Finally we exported the Counter component .

We can import the Counter component in our App.js using default import statement and use it in our App file .

import Counter from './Counter.js'function App() {
return(
<div className='App'>
  <h1>Counter App</h1>
  <Counter/>
</div>
) ;
}
export default App ;

Now we will add some HTML to our Counter Component and as well as some styling :

Our Counter component looks like this after making changes :

To style our component create a file named Counter.css in src folder and import it in our Counter component using import './Counter.css' statement. You can simply copy the following code in your Counter.css file .

.counter{
display: flex;
flex-direction: column;
max-width: 300px;
justify-content: space-evenly;
min-height: 300px;
margin: 100px auto;
background-color: rgb(71, 210, 245);
}
.btn_grp{
justify-content: space-evenly;
display: flex;
}
.btn_grp > button{
padding: 20px;
border: none;
font-weight: 800;
cursor: pointer;
background-color: white;
}

Now our App will look something just like :

Now , comes the most important part adding state to our function component . For this purpose React provides us a useState hook that lets us add state to the component .

const [count,setCount] = useState(0)

Here we are using useState to declare a “state variable” . In our case the state variable is called count . The value passed to useState is the initial value of count . setCount is the function that we should to modify the value of count variable .

The next step is to add event listeners to counter’s button i.e when we click + ,- or zero button a function should be invoked and the state should be updated accordingly .

<button id='increment' onClick={increment}>+</button>
<button id='zero' onClick={reset}>zero</button>
<button id='decrement' onClick={decrement}>-</button>

Now we define increment ,decrement and reset function in our component .

const increment = () =>{ setCount(count+1) ; }const decrement = () =>{ setCount(count- 1) ; }const reset = () =>{ setCount(0) ; }

Our final Counter component now looks like this :

We initially declared a variable called count , we can use it inside JSX by wrapping it in curly braces .

Thanks for spending your valuable time reading this post .

Have a Nice :Day .