React Zero to Hero: Part 1 – Understanding the Core Basics

By PomegraTeam

Welcome to the first installment of our “React Zero to Hero” series! If you’re looking to dive into the world of modern web development, ReactJS is an indispensable skill. This tutorial aims to take you from knowing absolutely nothing about React to building interactive user interfaces, eventually covering Redux for state management and crucial best practices.

What is React?

React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. Developed and maintained by Meta (Facebook) and a community of individual developers and companies, React allows developers to create large web applications that can change data without reloading the page. Its main goal is to be fast, simple, and scalable.

Why Choose React?

Declarative: React makes it painless to create interactive UIs. You describe the desired state of your UI, and React handles updating the DOM to match that state. This makes your code more predictable and easier to debug.
Component-Based: Build encapsulated components that manage their own state, then compose them to make complex UIs. This modular approach promotes reusability and maintainability.
Learn Once, Write Anywhere: While often associated with web development, React Native, a derivative, allows you to build mobile applications for iOS and Android using the same React paradigm.
Virtual DOM: React uses a virtual representation of the DOM. When state changes, React first updates its virtual DOM, then efficiently calculates the minimal changes needed to the actual browser DOM, leading to high performance.

Setting Up Your First React Project (Conceptual)

While we won’t run the commands here, setting up a React project typically involves tools like Create React App or Vite. They provide a comfortable environment for learning React by configuring all the necessary build tools (like Webpack, Babel) for you.


# Using Create React App (a bit older, but still common)
npx create-react-app my-react-app
cd my-react-app
npm start


# Using Vite (modern and faster)
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

These commands will create a new directory with a basic React application, which you can then open in your code editor.

Understanding JSX: JavaScript XML

JSX stands for JavaScript XML. It’s a syntax extension for JavaScript, recommended by React to describe what the UI should look like. JSX might remind you of HTML, but it’s actually JavaScript under the hood.

Basic JSX Syntax

You can write JSX directly inside your JavaScript files. Here’s a simple example:


// App.js
import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Hello, React!</h1>
      <p>This is your first JSX.</p>
    </div>
  );
}

export default App;

Notice className instead of class for HTML attributes. This is because class is a reserved keyword in JavaScript.

Embedding JavaScript Expressions in JSX

You can embed any valid JavaScript expression inside JSX by wrapping it in curly braces {}.


// App.js
import React from 'react';

function App() {
  const name = 'Alice';
  const greeting = <p>Nice to meet you, {name}!</p>;

  return (
    <div>
      <h1>Hello, {name}!</h1>
      {greeting}
      <p>The current year is {new Date().getFullYear()}.</p>
    </div>
  );
}

export default App;

Conditional Rendering in JSX

You can use standard JavaScript conditionals (if statements, ternary operators, logical &&) within JSX.


// App.js
import React from 'react';

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <h2>Welcome back!</h2>
      ) : (
        <h2>Please log in.</h2>
      )}

      {/* Another way using logical && operator */}
      {isLoggedIn && <p>You have access to exclusive content!</p>}
    </div>
  );
}

function App() {
  return (
    <div>
      <Greeting isLoggedIn={true} />
      <Greeting isLoggedIn={false} />
    </div>
  );
}

export default App;

Rendering Lists in JSX

When rendering lists of elements, you typically use the JavaScript map() array method. Remember to include a unique key prop for each item in the list.


// App.js
import React from 'react';

function ShoppingList() {
  const items = ['Apples', 'Bread', 'Milk', 'Eggs'];

  return (
    <div>
      <h2>My Shopping List</h2>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li> // Using index as key is okay for static lists without reordering
        ))}
      </ul>
    </div>
  );
}

export default ShoppingList;

React Components: The Building Blocks

Components are independent, reusable pieces of UI. They take inputs (called “props”) and return React elements describing what should appear on the screen.

Functional Components

With the advent of React Hooks, functional components are the preferred way to write React components today. They are simpler and often more readable than class components.


// MyButton.js
import React from 'react';

function MyButton() {
  return <button>Click Me!</button>;
}

export default MyButton;

// App.js
import React from 'react';
import MyButton from './MyButton';

function App() {
  return (
    <div>
      <h1>Component Example</h1>
      <MyButton />
      <MyButton /> {/* Reusable! */}
    </div>
  );
}

export default App;

Props: Passing Data Down

Props (short for properties) are a way of passing data from parent components to child components. Props are read-only; a child component should never modify the props it receives.

Passing Props


// GreetUser.js
import React from 'react';

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

export default GreetUser;

// App.js
import React from 'react';
import GreetUser from './GreetUser';

function App() {
  return (
    <div>
      <GreetUser name="Alice" />
      <GreetUser name="Bob" />
    </div>
  );
}

export default App;

Destructuring Props for Cleaner Code

It’s common practice to destructure props in the function signature for better readability.


// UserCard.js
import React from 'react';

function UserCard({ name, age, city }) {
  return (
    <div style={{ border: '1px solid #ccc', padding: '10px', margin: '10px' }}>
      <h3>{name}</h3>
      <p>Age: {age}</p>
      <p>City: {city}</p>
    </div>
  );
}

export default UserCard;

// App.js
import React from 'react';
import UserCard from './UserCard';

function App() {
  return (
    <div>
      <UserCard name="Charlie" age={30} city="New York" />
      <UserCard name="Diana" age={25} city="London" />
    </div>
  );
}

export default App;

State: Making Components Dynamic with useState

While props allow data flow from parent to child, `state` allows a component to manage data that changes over time within itself. The `useState` Hook is the most fundamental Hook in React, allowing functional components to have state.

Introducing `useState`

useState is a function that returns an array with two elements: the current state value and a function that lets you update it.


import React, { useState } from 'react';

function Counter() {
  // Declare a new state variable called "count"
  const [count, setCount] = useState(0); // Initial value is 0

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

In this example, count holds the current value, and setCount is the function to update it. When setCount is called, React re-renders the component with the new state value.

Updating State with Previous State

When your new state depends on the previous state, it’s safer to pass a function to the state setter. This function receives the previous state as an argument.


import React, { useState } from 'react';

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

  const increment = () => {
    setCount(prevCount => prevCount + 1); // Safely update based on previous state
  };

  const decrement = () => {
    setCount(prevCount => prevCount - 1);
  };

  return (
    <div>
      <p>Current Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default SafeCounter;

Controlled Input Example

useState is commonly used to manage the values of form inputs, creating “controlled components.”


import React, { useState } from 'react';

function NameForm() {
  const [name, setName] = useState('');

  const handleChange = (event) => {
    setName(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault(); // Prevent default form submission behavior
    alert(`A name was submitted: ${name}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      <button type="submit">Submit</button>
      <p>You are typing: {name}</p>
    </form>
  );
}

export default NameForm;

Conclusion of Part 1

In this first part of our “React Zero to Hero” journey, you’ve gained a foundational understanding of React. We’ve covered what React is, why it’s powerful, the crucial role of JSX in defining UI, how components act as reusable building blocks, how props facilitate data flow, and how the `useState` hook brings dynamic state management to your functional components.

This is just the beginning! In the next parts, we will delve deeper into more advanced React Hooks, explore the React ecosystem including routing, and eventually move into state management with Redux and essential best practices for building robust and scalable React applications. Stay tuned!