React

Image created by telexar on Telexar Software

Welcome

Welcome to this blog, I will be talking about what is React JS and why you should be interested in learning it, as well as show you an example of a navigation menu created with React and React-Bootstrap.

Contents

· What and Why React ?
o What is React ?
o Why learn and use React ?

· Start working with React
o Create-react-app

· Final Product
o Navigation Menu
o Components
o Break down of the Navigation Menu

· React-Bootstrap
o What is Bootstrap
o What is React-Bootstrap and Why use it ?
o How to use it ?

· Conclusion

What and Why React ?

What is React ?

React is one of the most popular front-end web development frameworks in the world. According to this Stack Overflow 2020 survey, React is ranked #2 most popular JavaScript framework for personal and professional use. It was created by Jordan Walke, a software engineer working for Facebook to address the growing difficulty of maintenance of Facebook.

Why learn and use React ?

· React uses reusable components which makes it much easier to develop and maintain your application. I talk more about them further in the post.

· If you learn React you will have access to React Native which is used for mobile application development.

· DOM is slow and changing it costs a lot of processing time, to go around this issue React introduced virtual DOM. It allows React to work on the virtual DOM and only update the real DOM with necessary changes.

· Since React uses a lot of plain JavaScript it is easy to learn start using it with basic HTML and JavaScript knowledge.

· The popularity of React means a lot of companies are saying yes to transitioning to React and it opens up new job opportunities

Start working with React

Create-react-app

Create-react-app provides an easy way to build a development environment for your React application.

Before using create-react-app you need to have Node and Npm installed on your machine. You can follow this link to download the installer for node which also include npm.
After installing node type in the cmd to check that the installation was successful.

node -V

and

npm -V

Now, using cmd, you can go the location where you want to start your project and type

npx create-react-app name-of-your-project

Voilà, you have a working directory with many dependencies already installed. To start your application, simply type “npm start”.

Final Product

Navigation Menu

In this blog post I want to show how to make a simple navigation menu for a website. The final product will look something like this.

This menu is a component that can be reused on all the pages of the website and it is composed of other reusable components, such as logo, login/register links and a button group which is composed of multiple other Components.

Components

Components are essentially JavaScript functions that return HTML via render() function. Simplest Component looks like this.

It is a simple class which returns and renders HTML code and is exported to be used on different pages. To user it on a page you need to import and render it in reactDOM in the main App.js file.

Components are used to create everything on the page from the simplest buttons to slide shows and full navigation menus. Same components such as buttons or text forms can be reused anywhere on a website and even in different projects.
Good practices of using them is to create small function-specific components. It is much easier to update, reuse, and maintain small Components.

Break down of the Navigation Menu

The navigation menu I am showing consists of:
Profile

Logo

And Navigation Buttons

As you can see, the Navigation Buttons Component is much more complex then the other two. It is actually not that complex, because I am using premade components from React-Bootstrap Library, which I talk about next.

React-Bootstrap

What is bootstrap ?

Bootstrap is a free CSS framework used to better stylise websites. It contains many premade css templates for forms, buttons, navigation and layout that make it much easier to give websites uniform appearance.

What is React-Bootstrap and Why use it ?

React-Bootstrap is a library for React that utilises vanilla Bootstrap to build true React components without unneeded dependencies like jQuery. And since it uses React Components states can be passed withing them as props

React-Bootstrap provides many different premade components for React that work together and can be easily stylised by using vanilla bootstrap stylesheets as well as custom css. It also uses a series of containers, rows and columns to create a responsive grid system for the layout.

How to use it ?

First of all, you need to install the React-bootstrap package using npm. To do it navigate to the project folder and type in cmd.

npm install react-bootstrap bootstrap

Next you need to import Components to the file, ideally you want to import only components you use and not the whole library, like so

import Button from ‘react-bootstrap/Button’;

To create a good layout we use Container, Row and Col Components

The result of this code will looks like this

It created two rows with two items in first row and one item in second.
Using the provided grid system together with bootstrap styling you can easily make components go where you want them to go.

Conclusion

React is a useful and powerful tool to be used for web-development. It is relatively easy to learn with minimal background knowledge needed, and it is extremely popular in the industry.

In this post I covered basics of React and React-Bootstrap.
If something didn’t make sense, feel free to leave a comment and I will try to answer it to my best ability.