Getting Started with ReactJS: A Beginner’s Guide

By /

Introduction to ReactJS

ReactJS is a popular JavaScript library for building dynamic and interactive user interfaces. Developed by Facebook, React allows developers to create reusable UI components and efficiently manage application state. With its declarative and component-based approach, React makes it easier to build scalable and maintainable web applications.

In this guide, we will cover the core concepts of React, including components, state management, and essential hooks. Additionally, we will walk through the installation and setup process using Yarn.

Understanding Components in ReactJS

React applications are built using components, which are reusable pieces of UI. There are two main types of components:

  1. Functional Components – These are JavaScript functions that return JSX (a syntax similar to HTML). They are simpler and recommended for most use cases.
  2. Class Components – These are ES6 classes that extend React.Component. They were commonly used before React Hooks were introduced but are now less favored.

Example of a Functional Component

import React from 'react';

const Greeting = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export default Greeting;

State and Hooks in React

React introduced Hooks in version 16.8, allowing functional components to manage state and lifecycle methods without using class components. Below are some commonly used hooks:

1. useState: Managing State

useState helps add state to functional components.

import React, { useState } from 'react';

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

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

export default Counter;

2. useEffect: Handling Side Effects

useEffect helps perform side effects such as fetching data or updating the DOM.

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

const Timer = () => {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setTime((prevTime) => prevTime + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return <p>Time elapsed: {time} seconds</p>;
};

export default Timer;

3. useMemo: Optimizing Performance

useMemo helps memoize expensive calculations and prevents unnecessary re-renders.

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

const ExpensiveCalculation = ({ num }) => {
  const result = useMemo(() => {
    console.log('Calculating...');
    return num * 2;
  }, [num]);

  return <p>Double: {result}</p>;
};

export default ExpensiveCalculation;

4. useRef: Accessing DOM Elements

useRef is useful for accessing and modifying DOM elements directly.

import React, { useRef } from 'react';

const TextInput = () => {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
};

export default TextInput;

Installing and Building a React App Using Yarn

Step 1: Install Node.js and Yarn

Before installing React, make sure you have Node.js installed. Then install Yarn globally:

npm install -g yarn

Step 2: Create a New React App

Use Yarn to create a new React application:

yarn create react-app my-app

Then, navigate to the project folder:

cd my-app

Step 3: Start the Development Server

Run the following command to start the development server:

yarn start

This will open your React app in the browser at http://localhost:3000/.

Step 4: Build for Production

To create an optimized production build, run:

yarn build

This will generate a build folder containing the static assets for deployment.

Conclusion

ReactJS is a powerful and flexible library for building modern web applications. By understanding components, hooks, and the build process, you can start developing efficient and scalable React applications. Furthermore, keep exploring React’s ecosystem, including libraries like React Router and Redux, to enhance your projects even further!

Scroll to Top