An image

Corporate Blogs

Learn to Build an Application with ReactJS in 30 Minutes

E-Commerce Businesses Need a Mobile App

ReactJS has become a versatile development platform for developers across the globe. It is a specially designed framework for performance and productivity.

Today let’s see how to make a simple “note-taking” application with ReactJS in under 30 minutes.

react mobile - note-taking app

What is React?

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “Components”.

Install React

To get started, open the command line interface run the below command,

>> npm install -g create-react-app

Note: When using create-react-app ensure you are in the desired directory or folder location as this command will create the project folder in the current path.

Creating “Note-app” application in React

In the  command line interface, need to run below the line so that note-app will be created,

>>npx create-react-app note-app

The entire process is automated and begins with creating a new React app folder for the project, then install packages and dependencies. Default, packages include react, react-dom and react-scripts and it will take a few minutes

Run an application in React

>> cd note-app

>> npm start

Default In local,  React applications are running in http://localhost:3000/ it looks like this,

react mobile app 

In this application, I’m going to use “react-bootstrap” for responsive and icons from “font-awesome”.

Here, we can find how to use these packages in our application

How to use React-bootstrap?

Install it with this following command,

>> npm install react-bootstrap bootstrap

Below stylesheet link, we need to add in index.html

Usage in Application

In the render return statement like follow.

How to use Fontawesome in React Applications?

Install the following packages using npm, 

>> npm i –save @fortawesome/fontawesome-svg-core  @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome

Usage in application

In the render return statement like follow,

How to display notes as Card?

Initialized the constructor to App component,

In the  App component, render function like,

Create a new note

Here, I’ve created one button so when we are clicking on that the form modal will be open while clicking on the save button the note added to state notes then will display in notes Dashboard.

The button code with a click be like,

The form modal will be like,

In the handleShow() function maintains showing the modal and initializing the form values like,

While closing, we need to set the show state as false.

When submitting the changes, form values adding to notes array.

Update a note

If we want to update existing notes then we just need to click on a notecard, after that form modal opens with respective card values

While saving the changes, it will update in the existing notes as, 

Remove the Card

Remove icon will be present for each card if we are clicking on the button, for that we are calling removeCard() function and based on Card Id we are removing that particular card from the notes list.

You can find the code available on Github here. 

Was this helpful? Share with your ReactJS folks out there! Feel free to comment on your doubts and suggestions in the comment section.

Looking for highly skilled ReactJS developers? Hire React developers at Agira. Get started with your dream project right with our React JS expertise. reach us today!

Turn your vision to magnificent reality With
Our Web and Mobile Solutions
Professional Life of an IT Consultant Interview with Valentin Crettaz
Written by
Software Engineer having 2 years of experience in Web Development, hands on expertise in Ruby, Ruby On Rails, Angular and CMS. An Active ally of Social services and Blood camps.

Leave a Comment

Rate this Blog!