React.

js Guide: Getting Started

Introduction

React.js is a popular JavaScript library for building user interfaces, particularly single-
page applications where data changes over time. Developed by Facebook, React
enables developers to create large web applications that can update and render
efficiently in response to data changes.

Core Concepts

1. Components

Components are the building blocks of a React application. They are JavaScript
functions or classes that optionally accept inputs (called “props”) and return React
elements that describe how a section of the UI should appear.

Functional Component Example:

jsx

Copy code

import React from 'react';

function Welcome(props) {

return <h1>Hello, {props.name}</h1>;

export default Welcome;

Class Component Example:

jsx

Copy code

import React, { Component } from 'react';

class Welcome extends Component {

 render() {

return <h1>Hello, {this.props.name}</h1>;

export default Welcome;

2. JSX (JavaScript XML)

JSX is a syntax extension for JavaScript that looks similar to HTML. It is used with
React to describe what the UI should look like.

Example:

jsx

Copy code

import React from 'react';

function App() {

return (

<div>

<h1>Welcome to React!</h1>

<p>This is a paragraph in JSX.</p>

</div>

);

export default App;

3. Props

Props (short for properties) are read-only attributes used to pass data from parent
components to child components.
Example:

jsx

Copy code

import React from 'react';

function Greeting(props) {

return <h1>Good {props.timeOfDay}, {props.name}!</h1>;

function App() {

return (

<div>

<Greeting timeOfDay="Morning" name="Alice" />

<Greeting timeOfDay="Evening" name="Bob" />

</div>

);

export default App;

4. State

State is used to manage data that changes over time within a component. Unlike
props, state is mutable and can be changed by the component itself.

Example:

jsx

Copy code

import React, { useState } from 'react';

function Counter() {

const [count, setCount] = useState(0);

return (

<div>

<p>You clicked {count} times</p>

<button onClick={() => setCount(count + 1)}>Click me</button>

</div>

);

export default Counter;

5. Lifecycle Methods

Lifecycle methods are hooks in class components that allow you to run code at
specific points in a component’s lifecycle, such as when it mounts or updates.

Example:

jsx

Copy code

import React, { Component } from 'react';

class MyComponent extends Component {

componentDidMount() {

console.log('Component has mounted');

}
 componentDidUpdate() {

console.log('Component has updated');

render() {

return <h1>Hello World</h1>;

export default MyComponent;

Setting Up React

1. Create a React Application

The easiest way to start a new React project is by using Create React App, a
command-line tool that sets up a new React project with a sensible default
configuration.

Steps:

1. Install Create React App:

bash

Copy code

npx create-react-app my-app

2. Navigate to Your Project Directory:

bash

Copy code

cd my-app

3. Start the Development Server:

bash

Copy code
npm start

This will open your new React application in the default web browser at
http://localhost:3000.

2. Directory Structure

A typical React project has the following structure:

java

Copy code

my-app/

├── node_modules/

├── public/

│ ├── index.html

│ └── favicon.ico

├── src/

│ ├── App.js

│ ├── index.js

│ ├── components/

│ └── styles/

├── .gitignore

├── package.json

└── README.md

• public/: Contains the static HTML file and other assets.

• src/: Contains the JavaScript and CSS files. This is where you will write your
React components.

Advanced Topics

1. Handling Forms
Forms in React are controlled components, meaning that form data is handled by the
state of the component.

Example:

jsx

Copy code

import React, { useState } from 'react';

function Form() {

const [formData, setFormData] = useState({ name: '', email: '' });

const handleChange = (e) => {

const { name, value } = e.target;

setFormData({ ...formData, [name]: value });

};

const handleSubmit = (e) => {

e.preventDefault();

alert(`Name: ${formData.name}, Email: ${formData.email}`);

};

return (

<form onSubmit={handleSubmit}>

<label>

Name:

<input type="text" name="name" value={formData.name}

onChange={handleChange} />

</label>
 <br />

<label>

Email:

<input type="email" name="email" value={formData.email}

onChange={handleChange} />

</label>

<br />

<button type="submit">Submit</button>

</form>

);

export default Form;

2. React Hooks

React Hooks are functions that let you use state and other React features without
writing a class. Common hooks include useState, useEffect, and useContext.

Example of useEffect:

jsx

Copy code

import React, { useState, useEffect } from 'react';

function Timer() {

const [seconds, setSeconds] = useState(0);

useEffect(() => {

const interval = setInterval(() => setSeconds(seconds + 1), 1000);

return () => clearInterval(interval); // Cleanup on component unmount

 }, [seconds]);

return <h1>Time: {seconds} seconds</h1>;

export default Timer;

3. Context API

The Context API is used to pass data through the component tree without having to
pass props down manually at every level.

Example:

jsx

Copy code

import React, { createContext, useState, useContext } from 'react';

// Create Context

const ThemeContext = createContext();

// Provider Component

function ThemeProvider({ children }) {

const [theme, setTheme] = useState('light');

return (

<ThemeContext.Provider value={{ theme, setTheme }}>

{children}

</ThemeContext.Provider>

);
}

// Consumer Component

function ThemedComponent() {

const { theme, setTheme } = useContext(ThemeContext);

return (

<div>

<p>Current theme: {theme}</p>

<button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>

Toggle Theme

</button>

</div>

);

// App Component

function App() {

return (

<ThemeProvider>

<ThemedComponent />

</ThemeProvider>

);

export default App;

4. Routing with React Router

React Router is a library for handling routing in React applications.

Example:

bash

Copy code

npm install react-router-dom

jsx

Copy code

import React from 'react';

import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

function Home() {

return <h2>Home</h2>;

function About() {

return <h2>About</h2>;

function App() {

return (

<Router>

<nav>

<ul>

<li><Link to="/">Home</Link></li>

<li><Link to="/about">About</Link></li>
 </ul>

</nav>

<Switch>

<Route path="/" exact component={Home} />

<Route path="/about" component={About} />

</Switch>

</Router>

);

export default App;

Best Practices

1. Component Composition

Compose components rather than inheriting them. Use small, reusable components
to build up larger components.

2. State Management

For complex state management, consider using libraries like Redux or the React
Context API.

3. Performance Optimization

Use React.memo to prevent unnecessary re-renders of functional components. Utilize

lazy loading with React.lazy and Suspense for code splitting.

4. Testing

Test components using libraries like Jest and React Testing Library to ensure your
components work as expected.

5. Code Quality
Follow consistent coding conventions and use linters (e.g., ESLint) to maintain code
quality.