React for JavaScript (Node.js): A Complete Guide with Examples

What is React and Why Do You Need It?

React is a declarative, efficient, and flexible open-source JavaScript library for building user interfaces (UI). It was developed by engineers at Facebook (now Meta) in 2013 and has since become one of the most popular frontend technologies in the world. React allows developers to create complex, interactive, and scalable web applications by breaking the interface into independent, reusable components.

Why do you need React?

• Component-based approach: React builds UI from isolated blocks (components), each managing its own state. This simplifies development, testing, and code maintenance.
• Declarativeness: You describe how the UI should look for each application state, and React efficiently updates and renders only the components that have changed. This makes code more predictable and easier to debug.
• Virtual DOM: React uses a lightweight copy of the real DOM (Document Object Model). When the application state changes, React first updates the virtual DOM, then compares it with the previous version (diffing) and applies the minimal set of changes to the real DOM. This significantly improves performance, especially in applications with frequent updates.
• Huge community and ecosystem: React has one of the largest developer communities, meaning an abundance of ready-made solutions, libraries, tools (React Router, Redux, Next.js, Gatsby), and learning materials.
• Versatility: React can be used not only for web applications but also for mobile (React Native), desktop (Electron), and even VR applications (React 360).

React is suitable for projects of any scale: from simple single-page applications (SPA) to complex enterprise systems and social networks.

Installing React (npm)

To work with React, you will need Node.js (version 14 or higher) and a package manager npm (or yarn). The easiest way to start a new project is to use the official tool Create React App.

# Install Create React App globally (optional)npm install -g create-react-app

# Create a new project named my-appnpx create-react-app my-app

# Navigate to the project directorycd my-app

# Start the development servernpm start

After running these commands, your browser will automatically open at http://localhost:3000 with a working React application.

Important: npx is a tool that runs packages without installing them globally. If you have an older version of npm (< 5.2), use npm install -g create-react-app, then create-react-app my-app.

Alternative method (manual installation):

# Create a project folder and initialize npmmkdir my-react-app && cd my-react-appnpm init -y

# Install React and ReactDOMnpm install react react-dom

# Install Babel for JSX transpilation and Webpack for bundling (requires configuration)npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli html-webpack-plugin

However, for beginners, it is strongly recommended to use Create React App, as it handles all the complex bundler configuration (Webpack, Babel) for you.

Quick Start with a Code Example

After creating a project with Create React App, open the file src/App.js. This is the main component of your application. Let's create a simple "Hello, World!" application with a button that changes the title.

// src/App.jsimport React, { useState } from 'react';import './App.css';

function App() {