React Beginner Tutorial

Introduction to React

React is a JavaScript library for building user interfaces. It is maintained by Facebook and a large community of developers. React makes it easy to create interactive UIs using components.

Prerequisites

Before starting with React, you should have basic knowledge of:

• HTML
• CSS
• JavaScript (ES6+ features like arrow functions, destructuring, modules, etc.)
• Node.js and npm (for package management)

Setting Up a React Project

You can create a new React application using Create React App (CRA), which sets up everything for you.

Install Node.js

Download and install Node.js from https://nodejs.org/. It includes npm (Node Package Manager).

Create a New React App

Run the following command in your terminal:

npx create-react-app my-app
cd my-app
npm start

This creates a React project and starts a development server.

Understanding React Components

Functional Component Example:

import React from 'react';

function Welcome() {
  return <h1>Hello, React!</h1>;
}

export default Welcome;

Class Component Example:

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Hello, React!</h1>;
  }
}

export default Welcome;

JSX (JavaScript XML)

JSX allows you to write HTML inside JavaScript. Example:

const element = <h1>Hello, JSX!</h1>;

Props and State

Using Props:

Props allow you to pass data to components.

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

Usage:

<Greeting name="John" />

Using State:

State is used to manage component data.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Handling Events

function ButtonClick() {
  function handleClick() {
    alert('Button clicked!');
  }

  return <button onClick={handleClick}>Click Me</button>;
}

Lists and Keys

Rendering a list of items:

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => <li key={number}>{number}</li>);

function NumberList() {
  return <ul>{listItems}</ul>;
}

Conditional Rendering

Using conditional statements:

function UserGreeting(props) {
  return props.isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>;
}

React Router (Navigation)

Install React Router:

npm install react-router-dom

Usage:

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

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

Fetching Data from an API

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

function DataFetching() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []);

  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}

Conclusion

This guide covered the basics of React, including components, props, state, event handling, routing, and fetching data. You can now build interactive web applications using React!