React JS Tutorial

React JS is a popular JavaScript library for building fast and interactive user interfaces. Created by Facebook, this library transforms how developers design web applications. This tutorial will guide you through the basics of React, preparing you to create your first React application.

Getting Started with React

Before writing code, ensure that you have the necessary tools installed.

Prerequisites

• Node.js: You need to have Node.js installed on your system. Download it from the official Node.js website.
• npm or yarn: npm comes with Node.js, but you can also use yarn. Install yarn from here.

Setting Up a React Application

Using Create React App is the simplest way to set up a new React project. This command-line tool generates all the boilerplate you need.

1npx create-react-app my-first-react-app
2cd my-first-react-app
3npm start

With these commands, you create a new React project named my-first-react-app. Navigate to the project directory, then start the development server. Open http://localhost:3000 in your browser to view your React application.

Understanding JSX

JSX stands for JavaScript XML. It allows you to write HTML directly within JavaScript. Understanding JSX is crucial in React.

1const element = <h1>Hello, world!</h1>;

The code above creates a React element that renders as an h1 tag. JSX resembles HTML but is transformed into JavaScript objects.

Creating Components

Components in React are reusable UI pieces. They can be either class-based or function-based. We will focus on function-based components, which are more common in modern React.

Functional Component

1function Welcome(props) {
2  return <h1>Hello, {props.name}</h1>;
3}

The Welcome component takes properties as an argument and returns a heading element.

Class Component

You can also create a class-based component.

1class Welcome extends React.Component {
2  render() {
3    return <h1>Hello, {this.props.name}</h1>;
4  }
5}

Both the functional and class components achieve the same result but are structured differently.

Props and State

Props (properties) are read-only attributes that pass data between components. State is managed within the component and can change over time.

Example: Using Props

1function App() {
2  return (
3    <div>
4      <Welcome name="Alice" />
5      <Welcome name="Bob" />
6    </div>
7  );
8}

In this App component, the Welcome component receives a name through props and displays it.

Example: Using State

To include state in a functional component, use the useState hook.

1import React, { useState } from 'react';
2
3function Counter() {
4  const [count, setCount] = useState(0);
5
6  return (
7    <div>
8      <p>You clicked {count} times</p>
9      <button onClick={() => setCount(count + 1)}>
10        Click me
11      </button>
12    </div>
13  );
14}

Here, useState initializes the state variable count to 0, while setCount updates count.

Handling Events

Handling events in React is similar to handling events on elements. The naming convention in React is camelCase, and you pass a function as the event handler.

1function App() {
2  function handleClick() {
3    alert('Button clicked!');
4  }
5
6  return (
7    <button onClick={handleClick}>Click Me</button>
8  );
9}

This example shows a button that alerts a message when clicked.

Conditional Rendering

Rendering different UI based on conditions is essential in any application. React simplifies this with conditional statements.

1function UserGreeting(props) {
2  return <h1>Welcome back!</h1>;
3}
4
5function GuestGreeting(props) {
6  return <h1>Please sign up.</h1>;
7}
8
9function Greeting(props) {
10  const isLoggedIn = props.isLoggedIn;
11  if (isLoggedIn) {
12    return <UserGreeting />;
13  }
14  return <GuestGreeting />;
15}

In this example, Greeting displays a message based on the isLoggedIn value passed via props.

Lifecycle Methods

Class components provide lifecycle methods such as componentDidMount, componentDidUpdate, and componentWillUnmount. These methods allow you to execute code at specific points in a component's lifecycle. Functional components use hooks like useEffect to access these lifecycle features.

Example: Using useEffect

1import React, { useState, useEffect } from 'react';
2
3function Timer() {
4  const [count, setCount] = useState(0);
5
6  useEffect(() => {
7    const timer = setInterval(() => {
8      setCount((prevCount) => prevCount + 1);
9    }, 1000);
10
11    return () => {
12      clearInterval(timer);
13    };
14  }, []);
15
16  return <h1>{count}</h1>;
17}

In this timer example, the useEffect hook sets up an interval timer to update the count every second and cleans up the timer when the component unmounts.

This tutorial has covered the fundamentals of React JS, including project setup, component creation, props and state management, event handling, conditional rendering, and lifecycle methods. You are now equipped to explore advanced features in React.