What is React? How to Use React React.Js

Burak Vural
4 min readSep 14, 2023

--

React.js, one of the most preferred libraries in JavaScript, is known as a framework in some articles. React is a JavaScript library.

React can be used to create many interactive designs and can be used professionally in many projects. React is an actively used library in mobile, web and desktop applications.

Some areas where React is used:

  • Web applications: React is one of the most popular JavaScript libraries for creating web applications. React helps improve the performance and usability of web applications.
  • Mobile applications: React Native is a version of React used to create mobile applications. React Native simplifies the mobile application development process, allowing developers to use the same code for both iOS and Android applications.
  • Desktop applications: React can also be used to create desktop applications. React simplifies the desktop application development process, allowing developers to use the same code for both web and desktop applications.

React can be used in many different applications, such as:

  • E-commerce sites: React can be used to create e-commerce sites. React helps improve the performance and usability of e-commerce sites.
  • Social media applications: React can be used to create social media applications. React helps improve the performance and usability of social media applications.
  • News and information applications: React can be used to create news and information applications. React helps improve the performance and usability of news and information applications.
  • Games: React can be used to create games. React helps improve the performance of games.

Platforms where you can get information about React:

How to run React.JS

To run React, you first need to have Node.js installed. Node.js is a JavaScript runtime environment that is required to run React. You can download the latest installer for Node.js from the Node.js website.

Once you have Node.js installed, you can create a React project. To create a React project, you can use the npx create-react-app command. This command will create all the files and packages required for a React project.

After you have created a React project, you can run the project using the npm start command. This command will open the project in a local web browser.

For example, to create a React project called “my-app”, you can use the following command:

npx create-react-app my-app

To run the project, you can use the following command:

cd my-app
npm start

This command will open the project in a local web browser. You should see the following page in your browser:

Welcome to React!

You can also use other methods to run your React projects. For example, you can use a package manager like webpack or parcel.

Here are some ways to run your React projects:

  • Use the npx create-react-app command to create a React project, and then use the npm start command to run the project.
  • Use a package manager like webpack or parcel to create a React project, and then use the webpack serve or parcel serve command to run the project.
  • Use the node command to run the index.js file.

React’s basic features include:

  • Modular components: React makes it easy to design and manage a user interface by using modular components. This makes the application easier to read and manage.
  • Virtual DOM: React uses a virtual DOM that mirrors the real DOM. This improves the performance of the application by only updating the necessary changes when the DOM needs to be updated.
  • State management: React provides a state management system to manage the application’s state. This ensures that the application’s data is consistent and updated according to user interactions.

To get started with React, you first need to learn the basic concepts of React. These concepts include modular components, virtual DOM, and state management.

  • Modular components: Modular components are the building blocks of React. A modular component represents a user interface element, such as a button component, a paragraph component, or an image component.
  • Virtual DOM: The virtual DOM is a feature of React that improves the performance of the application. It mirrors the real DOM, so only the necessary changes are updated when the DOM needs to be updated.
  • State management: State management allows React to manage the application’s state. State represents the data of the application, such as the user of the application, the data of the application, or the state of the application.

Here is an example of a simple React application:

import React from 'react';
const App = () => {
return (
<div>
<h1>Hello, world!</h1>
</div>
);
};
export default App;

This code creates a simple heading component that displays the text “Hello, world!” using the h1 tag.

Here is an example of a modular React.js component:

import React from 'react';
const Button = ({ text }) => {
return (
<button>{text}</button>
);
};
export default Button;

This code creates a simple button component that displays text using the button tag.

Here is an example of using a React component’s state:

import React, { useState } from 'react';
const Counter = () => {
const [counter, setCounter] = useState(0);
const handleClick = () => {
setCounter(counter + 1);
};
return (
<div>
<h1>Counter: {counter}</h1>
<button onClick={handleClick}>+</button>
</div>
);
};
export default Counter

By carefully examining React.JS projects and various GitHub repositories, you can learn more about how to use React.JS.

--

--

Burak Vural
Burak Vural

Written by Burak Vural

Software | Cyber Security | FullStack | Dev.Note and some coffee! Ars magus de templum clavis

No responses yet