What is React.js?
React.js also known as React stands as a popular JavaScript library that enables developers to construct dynamic user interfaces for building single-page applications (SPAs). Facebook developed React to help developers generate user interface components which react dynamically to changing data sources while keeping updates efficient.
Modern web applications choose React because it provides high performance together with its components-based structure and active developer support. The virtual DOM operates as a tool to simplify complex updates since it reduces the need to modify the browser’s actual DOM directly.
This blog provides comprehensive coverage of React beginning with its installation process and moving to basic principles that encompass components and props as well as state and hooks.
Setting Up a React Project
First we need to establish a fundamental React project before learning about concepts in the framework.
Installing Node.js
React requires Node.js to run. Users must visit the Node.js official website to obtain its download and installation files.
To check if Node.js is installed, run:
node -v
npm -v
Creating a React App
The most straightforward method to establish a React project employs create-react-app:
npx create-react-app my-app
cd my-app
npm start
This command enables the generation of new React projects and activates the project development server.
Understanding JSX (JavaScript XML)
JSX enables us to write HTML tags within JavaScript for describing elements in React. The UI components in React are described by using JSX syntax.
Example:
const element = <h1>Hello, React!</h1>;
Under the surface of JSX operates as a UI component generator until React.createElement() takes over the process.
React Components: Building Blocks of React
React applications exist as components to construct their interface. A component stands as a separate unit of UI content which developers can implement multiple times in different areas.
Functional Components
The basic function serves as a JSX return element:
function Welcome() {
return <h1>Hello, World!</h1>;
}
Class Components
The creation of components using ES6 classes may be accomplished by following this older approach:
class Welcome extends React.Component {
render() {
return <h1>Hello, World!</h1>;
}
}
Props: Passing Data to Components
The props system (which stands for properties) enables data transmission from parent components to child components.
Example:
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
<Greeting name="Alice" />
Props stay unchanged because components cannot modify their received content.
State: Managing Component Data
State differs from props since it permits components to update their internal data which varies throughout the application.
Example using a class component:
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.increment}>Increment</button>
</div>
);
}
}
Handling Events in React
All event handlers in React use camelCase syntax while the framework automatically provides event objects to connected event handlers.
Example:
function ClickButton() {
function handleClick() {
alert('Button clicked!');
}
return <button onClick={handleClick}>Click Me</button>;
}
React Hooks: The Modern Way to Handle State and Effects
Hooks brought state and side effect management to functional components when version 16.8 of React released them.
useState Hook
Manages state in functional components.
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
useEffect Hook
The useEffect Hook enables users to manage side effects that include API requests and subscription processes.
import { useEffect, useState } from 'react';
function Timer() {
const [time, setTime] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setTime(t => t + 1);
}, 1000);
return () => clearInterval(interval);
}, []);
return <p>Time: {time}s</p>;
}
Conditional Rendering
The system displays User Interface elements depending on specified conditions.
function UserStatus({ isLoggedIn }) {
return isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>;
}
Lists and Keys in React
A unique key becomes fundamental for React to correctly render lists.
const users = ['Alice', 'Bob', 'Charlie'];
function UserList() {
return (
<ul>
{users.map((user, index) => (
<li key={index}>{user}</li>
))}
</ul>
);
}
Forms in React
Every form component in React requires controlled components.
function Form() {
const [input, setInput] = useState('');
function handleSubmit(e) {
e.preventDefault();
alert(`Submitted: ${input}`);
}
return (
<form onSubmit={handleSubmit}>
<input value={input} onChange={e => setInput(e.target.value)} />
<button type="submit">Submit</button>
</form>
);
}
Conclusion
The user interface building library React enables both flexible and robust functionality. Learning the basics of components together with props and state allows you to understand hooks as well as event handling thus enabling building dynamic web applications.
if you are new to this web development field, you start by reading my What Is MERN Stack? Become a Full-Stack Developer for more.
Practicing more will lead you to explore advanced React concepts including React Router and Redux and send good intentions for your programming journeys ahead.
