Introduction to React

Piumi Ekanayake
Apr 17 · 4 min read

What is React?

React is a tech stack framework that belongs to the JavaScript UI Libraries group. It is a front end JavaScript library for building user interfaces. It makes the website more interactive and faster. React is often used as the V in MVC architecture. It’s simple to try out React on a small feature in an existing project because it makes no assumptions about the rest of the technology stack.

Who use React?

React is currently used by 9514 firms, including

· Uber

· Facebook

· Twitter

· Amazon

· Shopify

· Instagram

· Pinterest

· Netflix

· Airbnb

Advantages of react

· It makes the whole process of writing components easier.

· It improves efficiency and makes future maintenance easier.

· It guarantees a faster rendering time.

· It ensures that the code is secure.

· It is search engine friendly.

· It includes a range of useful developer tools.

· For mobile app creation, there is React Native.

· It is centered and simple to understand.

· It has a powerful community behind it.

· It is used by Fortune 500 firms as well as cutting-edge startups.

Disadvantages of react

· The rapid rate of change

· Documentation is lacking.

· Only the View Part

· JSX as a barrier

Features in ReactJs

The developer community loves ReactJs for its robust features. Some of the ReactJs features that distinguish it from the rest are:

· Virtual Dom

· React Native

· Declarative UI

· Component-Based Architecture

· One way data binding

1. Virtual Dom

Virtual DOM is one of the most important features of React that allows for quick and flexible application creation.

React can recreate a web page in its virtual memory thanks to its memory reconciliation algorithm. A virtual DOM is a reflection of an initial DOM in this way. React compares the virtual DOM with the original DOM and then renders the changes. Thus making React applications faster.

2.JSX

JSX stands for JavaScript XML.

It’s a markup language that’s very similar to HTML and is used to explain how an app’s user interface looks.

3.One way data binding

The one-way data flow is one of the most compelling reasons to use Reactjs for your next project. The data flow in Reactjs is unidirectional. As a result, developers are unable to modify any part directly. In order to make adjustments to the elements, they must use the callback function. One-way data binding is the name for this process.

4.React Native

React Native is a custom Reactjs renderer. React Native uses native components rather than web components.

5. Declarative UI

For designing engaging and immersive user interfaces for mobile and web apps, Reactjs is the best option.

Reactjs makes and updates the appropriate components in the event of data change. It creates a simple view for each application state. This function improves the readability of the code and makes debugging easier.

6.Component-Based Architecture

Reactjs has a component-based architecture. In other words, the user interface of a React-based mobile or web application is split into several sections. Each component follows its own logic. Instead of using models, the logic is written in JavaScript. This allows Reactjs developers to transfer data around the framework without having to worry about the DOM.

How to create your first React App?

Before installing React we need to make sure that we have installed npm in our computer. You can check it by typing the below code in the terminal

If it is installed it will display the version or else you will have to install npm.

If you have npm already installed then you can type the below code in the terminal to create your react app.

Instead of myapp, you can type the name of your React Project. Make sure that the name contains only simple letters otherwise, you might get an error. Once you run the above command, it will take a couple of minutes to complete the installation and once completed a folder will be created with the given name containing the necessary files for your React project.

Go inside the folder and open the terminal and type the below code to start the server.

This will start the server and once the server is started open your favourite browser and type and see whether you get the below output, if not make sure you followed the above steps correctly.

Congratulations! you have created your first React app. You can open the project folder in your favourite IDE and start editing.

If you need to know more about React you can visit their official website at https://reactjs.org/

Geek Culture

Proud to geek out.

Sign up for Geek Culture Hits

By Geek Culture

Subscribe to receive top 10 most read stories of Geek Culture — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Geek Culture

A new tech publication by Start it up (https://medium.com/swlh).

Piumi Ekanayake

Written by

3rd Year Software Engineering Undergraduate at SLIIT

Geek Culture

A new tech publication by Start it up (https://medium.com/swlh).

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store