DEV Community: Ashton Heald

React Fundamentals (Part 1)

Ashton Heald — Tue, 20 May 2025 16:52:58 +0000

React is one of the most widely used JavaScript libraries for building user interfaces, especially for web applications. In this series, we’ll cover the core concepts that form the foundation of React development. In Part One, we’ll start with the basics.

What is React?

React is an open-source JavaScript library developed by Facebook for building fast, interactive user interfaces. It allows developers to create reusable UI components and manage the state of an application efficiently.

Why use react over vanilla JS

Vanilla JavaScript can be used to build user interfaces, but managing complex UIs with dynamic state, user interactions, and DOM updates becomes difficult and error-prone. React provides a structured way to build and update UIs using components and a virtual DOM, which improves performance and maintainability. It also encourages cleaner code, better separation of concerns, and easier debugging.

Why use react over another library/framework?

React offers a balance of flexibility and structure. Unlike full frameworks like Angular or Vue, React is focused on the UI and doesn’t impose strict architectural patterns, giving developers more control over the stack. It has a large ecosystem, strong community support, and is widely adopted in the industry. React’s declarative component model and use of hooks make it intuitive and scalable for both small and large applications.

What are Components in React?

Components are the building blocks of a React application. Each component represents a piece of the UI and can be reused throughout the application. Think of components as custom HTML elements that encapsulate their own structure, styling, and behavior.

Functional Components

Functional components are JavaScript functions that return JSX. They are the most common way to write components in modern React. They are simple, lightweight, and easy to test.

// Welcome.jsx
function Welcome() {
  return <h1>Hello, world!</h1>;
}

Component Basics

JSX: JSX (JavaScript XML) is a syntax extension for JavaScript that looks similar to HTML. React uses JSX to describe what the UI should look like.

const element = <h1>Welcome to React</h1>;

Props: Props (short for properties) are used to pass data from a parent component to a child component. Props are read-only and help make components dynamic.

// Welecome.jsx (Basic)
const Welcome = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

// Welcome.jsx (Destructuring)
const Welcome = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

// App.jsx
const App = () => {
  return <Welcome name="Ash" />;
};

State: State is a built-in object used to store data that can change over time. Unlike props, which are passed from a parent, state is managed within the component itself. When state changes, React automatically re-renders the component to reflect the new data.
In modern React, state is handled using the useState hook.
(More on that in part 3.)
Conditional Rendering: React lets you render elements or components based on conditions. This allows the UI to change dynamically depending on application state or props.

// Using if statement
const Message = ({ isMorning }) => {
  if (isMorning) {
    return <p>Good morning!</p>;
  }

  return <p>Good evening!</p>;
};

//Using ternary operator
const Message = ({ isMorning }) => {
  return <p>{isMorning ? 'Good morning!' : 'Good evening!'}</p>;
};

Composition: Composition is the practice of building complex UIs by combining simpler, reusable components. Instead of creating one large component, you break it down into smaller parts that each handle a specific piece of the UI. This leads to cleaner, more maintainable code.

// Header.jsx
const Header = () => {
  return <h1>My App</h1>;
};

// Content.jsx
const Content = () => {
  return <p>This is the main content.</p>;
};

// Footer.jsx
const Footer = () => {
  return <small>&copy; 2025</small>;
};

// App.jsx
const App = () => {
  return (
    <div>
      <Header />
      <Content />
      <Footer />
    </div>
  );
};

How to add Dropbox to XAMPP using an Alias

Ashton Heald — Tue, 31 May 2022 16:56:00 +0000

How to Access an outside folder in Localhost

By default, localhost uses the htdocs folder, but we want it to use a specified folder inside of our dropbox called www.

We will achieve this by using an alias.

First, open httpd.conf; you can find this in \xampp\apache\conf or in the XAMPP Control Panel located in the Apache row, click Config then Apache (httpd.conf).

Now, locate the <Directory> tag that should looks something like this;

DocumentRoot "C:/xampp/htdocs"
<Directory "C:/xampp/htdocs">
    # important content
</Directory>

You will want to copy the entire Directory tag and paste it below, then change the path to your specified folder like so

DocumentRoot "C:/xampp/htdocs"
<Directory "C:/xampp/htdocs">
    # important content
</Directory>

<Directory "C:/your_path/">
    # important content
</Directory>

Eg. <Directory "C:/Users/ash/Dropbox/www">

Now, let's scroll down and find <IfModule alias_module> then locate and copy Alias /webpath /full/filesystem/path, then locate ScriptAlias /cgi-bin/ "C:/xampp/cgi-bin/" and paste below like so

ScriptAlias /cgi-bin/ "C:/localservers/xampp/cgi-bin/"
Alias /webpath /full/filesystem/path

Now change the Alias to /your_folder /your_path
Eg. Alias "/www" "C:/Users/ash/Dropbox/www".

Save and close, then restart Apache.
Now you can access, localhost/your_folder
Eg. localhost/www

But Wait! What if you wanna access your folder with just localhost

How to change the default location using PHP

Inside of htdocs let's create an index.php or if one already exist, replace or edit it.

Then add the following snippet and change /your_folder/ to your specified folder.

<?php
    if (!empty($_SERVER['HTTPS']) && ('on' == $_SERVER['HTTPS'])) {
        $uri = 'https://';
    } else {
        $uri = 'http://';
    }
    $uri .= $_SERVER['HTTP_HOST'];
    header('Location: '.$uri.'/your_folder/');
    exit;
?>

Eg. header('Location: '.$uri.'/www/');

Save and close, then restart Apache.
Now go to localhost and it should automatically redirect to localhost/your_folder

and you're all set!