Silas

Posted on May 18 • Edited on Jun 3

Getting Started with ReactJS

#webdev #react #programming

Installation
JSX Basics
useState
useEffect

Ever wanted to get started with react but just couldn't find the straight-to-the-point guide and you also couldn't handle sitting through hours of tutorials? Well, let's try it this way.

I will not even try to get you from 0-100 of react in this one post. Just a little push is what I promise, so let's dive right in.

What is React

React is a popular open-source javascript framework by Meta used primarily for building user interfaces majorly for single page applications.

Installation

To get started, you need to have node (and npm) installed. To install, follow the guide here

Once installation is complete, you can confirm by running node -v on your terminal(or command prompt), which should output something like v24.9.0. That should confirm the installation was successful.

Install React

Over the years, react installation has changed from the traditional create-react-app to more reliable and efficient methods of using scaffolds, specifically vite.

open your terminal(if not already opened)
Navigate to your desired directory
Run npm create vite@latest This will prompt you for a few inputs like project name, framework as shown:

Finally, execute the last 3 commands shown : cd project-name, npm install and finally npm run dev.

npm install installs the dependencies required by the project as defined in package.json
npm run dev starts the development server which runs your project locally.

And that's our checkpoint. You have successfully installed and ran a react project.

As of vite 8, the setup comes with:
/public - this directory contains public assets like images
/src - contains all the source code of the app
.gitignore - default populated .gitignore template
eslint.config.js - configuration for the linter
index.html - the main html file that react appends components
package*.json - stores configuration and dependencies for the app
README.md - basic vite documentation
vite.config.js - configuration for vite development server

Inside src, we have 2 css and 2 jsx files. The .jsx files are native to react, they denote react components.

App.css is styling used within App.jsx whereas
index.css is a global styling sheet for index.html, which App inherits.
Main.jsx is the entrypoint of the app. This is where the react app is injected into index.html's <div id="root"></div>

Now let's code ...

Delete everything in App.jsx and replace it with this:

function App(){
    return(<p>Hello React</p>)
}

When you run the server , npm run dev and open the address http://localhost:5173 in browser, you should see Hello React displayed

JSX Basics

JSX(Javascript XML) is a syntax that allows you to write HTML-like code within Javascript. This is what aims to make react easy and intuitive, and make transition from HTML almost seamless.
JSX will look almost exactly like HTML, but with a few differences:

//jsx
<div className="container"></div> 

instead of

//html
<div class="container"></div>

It is worth noting that, a JSX component or function MUST return ONLY ONE child/parent component. Having more than one will result in React throwing an error.

//only one element is returned. This will work
function App(){
    return(
      <p>Hello React</p>
    )
}

//More than one element is returned. This will NOT work
function App(){
    return(
      <p>Hello React</p>
      <p>Another element that will break compilation</p>
    )
}

Ensure to only have one parent element always: To fix the above, do this:

function App(){
    return(
<div>
      <p>Hello React</p>
      <p>Another element that will break compilation</p>
</div>
    )
}

This consequently wraps all the elements in one parent div and thus the jsx only returns one element.

Manage States with useState()

In React, you will run into a number of functions that start with use e.g useState, useEffect, useContext and so on. These are called Hooks. We will learn later about them in depth.
For now, we will start with the common ones: useState and useEffect.

useState

This is a snapshot of a component(and its data) at a particular point in time. Component's data changes over time, so each change represent a new state.
React has a state manager, useState() to manage change in states. When a state changes, react triggers a re-render of that component to show the change, e.g user typing into a textfield. Every keypress is a new state hence the textbox is re-rendered with the new data everytime.

To use this, first import useState at the top of the file:
import {useState} from 'react'

Within the function body:
const [count,setCount] = useState(0)

useState() takes a default value that represents the datatype of what the state stores.
Our example tells us that count is of type int

count -> state variable
setCount -> function to change state.

** NB: you should NEVER directly change count**

import { useState } from "react";

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

  function handleClick() {
    setCount((prev) => setCount(prev + 1));
  }

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

export default App;

This shows us a simple implementation of useState() in action.

TODO: Try implement a decrement.

UseEffect

This hook is used to define an action done when a particular event happens.
It is used to define what happens:

Immediately the app loads/runs
When a state changes.

The syntax for this is:

First, import: import { useEffect } from react
Second, implement:

Pattern 1: Run on Every Render

useEffect(() => {
  console.log("This runs after EVERY render");
});
// No dependency array = runs every time the component re-renders

Pattern 2: Run Once on Mount

useEffect(() => {
  console.log("This runs O
NCE when component first appears");
}, []);
// Empty array [] = runs only on initial mount

Pattern 3: Run When Dependencies Change

useEffect(() => {
  console.log("This runs when 'count' changes");
}, [count]);
// Array with variables = runs when any of those variables change

The Dependency Array Explained
Think of the dependency array as React asking: "What should I watch for changes?"

No array - "Watch everything, run after every render"
Empty [] - "Watch nothing, run once and done"
[count, name] - "Watch count and name, run when either changes"

import { useEffect, useState } from "react";

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

  // Runs every render
  useEffect(() => {
    console.log("Component rendered");
  });

  // Runs once when app starts
  useEffect(() => {
    console.log("App mounted - this runs once");
  }, []);

  // Runs when count changes
  useEffect(() => {
    console.log(`Count changed to: ${count}`);
  }, [count]);

  function handleClick() {
    setCount(prev => prev + 1);
  }

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

export default App;

TODO:
Open your browser console and click the increment button. Watch the console to see which useEffect hooks run and when.

Note: You might see each log appear twice in development mode. This is React's StrictMode deliberately rendering components twice to help catch bugs - it only happens in development, not in production.

Common Use Cases

[] empty array: Fetching initial data, setting up event listeners
[dependency]: Fetching new data when a filter changes, updating localStorage when state changes
No array: Usually avoided unless you need something to happen on every render

This guide has introduced you to JSX,useState and useEffect hooks in react.

Check out Understanding Components and Props to continue with your journey

Keep practicing, see you on the next one.

DEV Community