Nzioki Dennis

Posted on Jul 10, 2023 • Updated on Jul 15, 2023

React: A comprehensive Guide to Beginners

#beginners #react

React, also known as ReactJS is a JavaScript library used by developers to build user interfaces that has transformed the landscape of web development.React is a library, not a JavaScript framework as many believe.A framework provides a complete structure and set of tools for developing applications. In the case of React, it is considered a library because it focuses on providing a declarative approach to building user interfaces.Developed by Facebook,companies such as Instagram, Netflix, Twitter and Dropbox use it in development of their products. With its component-based architecture, virtual DOM, and declarative syntax, ReactJS empowers developers to create dynamic and interactive applications efficiently. This beginner's guide aims to demystify ReactJS and provide newcomers with a solid foundation in this powerful library.

Is React Back-End or Front-End?

React is essentially a JavaScript frontend library.It is used for building user interfaces and handling the view layer of web applications.With the aid of React, developers can easily manage the state and rendering of reusable UI components. To create the user-facing portion of online applications, it is frequently used with other frontend technologies like HTML, CSS, and JavaScript.

React can also be utilized on the backend with frameworks like Next.js or Gatsby, which support server-side rendering or the creation of static websites, respectively.

Prerequisites

There are a few things you should know before you start working with React.

HTML

HTML (Hypertext Markup Language) is the standard markup language for creating the structure and content of web pages. It defines the elements and tags used to represent different components and content within a web page. Here's a sample code snippet demonstrating the basic structure of an HTML document:

<!DOCTYPE html>
<html>
<head>
  <title>Sample HTML Page</title>
</head>
<body>
  <header>
    <h1>Welcome to My Web Page</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section>
      <h2>About Me</h2>
      <p>I am a web developer passionate about creating user-friendly and interactive websites.</p>
    </section>

    <section>
      <h2>Contact Information</h2>
      <p>Email: example@example.com</p>
      <p>Phone: 123-456-7890</p>
    </section>
  </main>

  <footer>
    <p>&copy; 2023 My Web Page. All rights reserved.</p>
  </footer>
</body>
</html>

CSS

CSS (Cascading Style Sheets) is a styling language used to define the visual appearance and layout of HTML elements on a web page. Here's a sample code snippet demonstrating the usage of CSS to style an HTML document:

<!DOCTYPE html>
<html>
<head>
  <title>Sample HTML Page</title>
  <style>
    /* Set common styles for body */
    body{font-family:Arial,sans-serif;background-color:#f1f1f1;color:#333}

    /* Styles for the header */
    header{background-color:#333;color:#fff;padding:10px}

    /* Styles for the main heading */
    h1{font-size:24px;margin:0}

    /* Styles for the navigation menu */
    nav ul{list-style-type:none;margin:0;padding:0}

    nav ul li{display:inline-block;margin-right:10px}

    nav ul li a{color:#fff;text-decoration:none}

    /* Styles for the main content area */
    main{margin:20px}

    /* Styles for the section containers */
    section{background-color:#fff;padding:10px;margin-bottom:20px}

    /* Styles for the section headings */
    h2{font-size:18px}

    /* Styles for the footer */
    footer{background-color:#333;color:#fff;padding:10px;text-align:center}
  </style>
</head>
<body>
  <header>
    <h1>Welcome to My Web Page</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section>
      <h2>About Me</h2>
      <p>I am a web developer passionate about creating user-friendly and interactive websites.</p>
    </section>

    <section>
      <h2>Contact Information</h2>
      <p>Email: example@example.com</p>
      <p>Phone: 123-456-7890</p>
    </section>
  </main>

  <footer>
    <p>&copy; 2023 My Web Page. All rights reserved.</p>
  </footer>
</body>
</html>

JavaScript

JavaScript knowledge is very crucial since React is a JavaScript library. Here are some key concepts that are particularly relevant to React:

Variables and Data Types: Understand how to declare variables using var, let, and const keywords, and be familiar with different data types like strings, numbers, booleans, arrays, and objects.

Functions and Scope: Know how to define functions, pass arguments, and return values. Understand the concept of scope, including global and local scopes, and how variables are accessible within different scopes.

Arrays and Objects: Learn how to work with arrays and objects, including common operations such as accessing elements, adding or removing items, iterating over them, and manipulating their properties.

Loops and Iteration: Use loops such as for and while to iterate over arrays or perform repetitive tasks. Understand loop control statements like break and continue to control the loop execution.

DOM Manipulation: Understand the Document Object Model (DOM) and how to manipulate it using JavaScript. Learn how to select and modify HTML elements, handle events, and update the content or style of elements dynamically.

Promises and Asynchronous Programming: Grasp the concept of promises and asynchronous programming to handle asynchronous operations, such as making API calls or performing time-consuming tasks without blocking the main thread.

ES6+ Features: Familiarize yourself with modern JavaScript features introduced in ECMAScript 6 and later versions, such as template literals, destructuring assignments, spread syntax, classes, modules, and more. These features enhance code readability, maintainability, and productivity.

Key concepts of React

1. Components

ReactJS revolves around the concept of components, which are self-contained, reusable building blocks that encapsulate a specific piece of functionality and user interface. Understanding React components is crucial for developing applications with ReactJS.The component name MUST begin with an upper case letter when creating a React component.

Functional Components

Functional components are JavaScript functions that return JSX (JavaScript XML) elements. They are simpler and typically used for stateless and presentational components. Here's an example:

function MyComponent() {
  return <div>Hello, World!</div>;
}

Class Components

Class components are ES6 classes that extend the 'React.Component' class. They have additional features, such as state management and lifecycle methods, making them suitable for more complex components.

class MyComponent extends React.Component {
  render() {
    return <div>Hello, World!</div>;
  }
}

Props

Props (short for properties) allow data to be passed into a component from its parent component. They are immutable and used to customize a component's behavior or appearance. Props are like function arguments, and you send them into the component as attributes. Here's an example of passing and accessing props.

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

// Usage: <Greeting name="John" />

State

The state object is where you store property values that belong to the component.State represents the internal data of a component that can change over time.Class components can define and manage state using the this.state object. State updates trigger component re-rendering.Here's an example

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.increment()}>Increment</button>
      </div>
    );
  }
}

2. JSX (JavaScript XML)

You may write HTML-like code in JavaScript thanks to the JSX syntax extension, which is utilized in React.It provides a concise and expressive way to define the structure and appearance of UI components.
Syntax
JSX syntax resembles HTML, but it is not actually HTML. It is a syntax extension that gets transpiled into JavaScript using a build tool like Babel. JSX elements look like HTML tags but are defined within JavaScript.JSX is not mandatory to use as there are other ways to achieve the same thing but using JSX makes it easier to develop react application.

const element = <h1>Hello, JSX!</h1>;

You can embed JavaScript expressions within JSX using curly braces {}. This allows you to dynamically compute and display values within JSX elements.

const name = 'John Doe';
const element = <h1>Hello, {name}!</h1>;

JSX is commonly used within React components to define the structure and content of the UI. You can write JSX elements directly within the component's 'render()'

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Welcome to My Component</h1>
        <p>This is a paragraph within the component.</p>
      </div>
    );
  }
}

3. Virtual DOM

DOM stands for Document Object Model. The structure and content of an HTML or XML document are represented by a logical tree structure in this programming interface for web documents. Programs can access, modify, and update the components, properties, and text contained within a web page using the DOM.
When a web page is loaded in a browser, the browser parses the HTML or XML document and constructs the DOM tree, representing the document's structure. Each element in the tree is called a "node," and nodes can have parent-child relationships. For example, the element is the root of the DOM tree, with child nodes like head and body, and those, in turn, have their own child nodes.Here's a simplified visual representation of the DOM tree for an HTML document.

html
├── head
│   └── title
│       └── "Document Title"
└── body
    ├── h1
    │   └── "Heading"
    └── p
        └── "Paragraph text"

The Virtual DOM, introduced by React, is a lightweight representation of the actual DOM in memory. It is a virtual copy of the DOM tree maintained by React. React uses the Virtual DOM as a reconciliation mechanism to efficiently update and render components, minimizing the direct manipulation of the actual DOM.

By using the Virtual DOM, React can perform efficient diffing algorithms to identify and update only the necessary changes between previous and current states. This optimization reduces the number of actual DOM manipulations, resulting in faster and more efficient rendering of components.

4. State

State is a fundamental concept in React that represents the internal data of a component. It enables components to control and monitor data changes over time. For creating dynamic and interactive React apps, it's essential to understand how state works and how to work with it.
State represents the data that can alter and have an impact on the behavior or appearance of the component. Depending on changes to the data it carries, state enables components to update and re-render.
State management is included into class components. Using 'this.state', the constructor of the component defines the initial state. Typically, a state is an object with key-value pairs that represent various data fields. The state data is accessed and used by the component's render method to generate the user interface.

import React from 'react';

class Counter extends React.Component {
  constructor(props) {
    super(props);
    // Initial state with count set to 0
    this.state = {
      count: 0
    };
  }

  incrementCount() {
    // Update the count state by incrementing the current value
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        {/* Display the current count value from state */}
        <p>Count: {this.state.count}</p>
        {/* Button triggers the incrementCount method */}
        <button onClick={() => this.incrementCount()}>Increment</button>
      </div>
    );
  }
}

5. Props

Props (short for properties) are a fundamental concept in React that allow data to be passed from a parent component to its child components. Props enable parent components to control and customize the behavior and appearance of their child components.
Within JSX, props are provided to the child component as attributes. The props are defined by the parent component, which also gives them values. The child component gets the props and can utilize them for functionality or rendering. Through the props object, one can access props inside a component. Props are supplied as arguments to a functional component. Props are accessed within a class component using the 'this.props' method.

// Parent Component
class ParentComponent extends React.Component {
  render() {
    const name = 'John Doe';
    const age = 25;

    return (
      <div>
        <h1>Parent Component</h1>
        {/* Passing props to the child component */}
        <ChildComponent name={name} age={age} />
      </div>
    );
  }
}

// Child Component
const ChildComponent = (props) => {
  // Accessing props within the child component
  const { name, age } = props;

  return (
    <div>
      <h2>Child Component</h2>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
}

Props vs State

Mutability
State: State is mutable and has a setState() method for updating it. As soon as the state changes, React automatically renders the page again.
Props: Since props are read-only, child components shouldn't alter them. They are transferred from the parent component to the child component unaltered.

Ownership
State: Every element controls its own state. The component in which it is defined owns and governs state.
Props: A parent component transmits props to its child components. The child components receive and make use of the props, which are owned and controlled by the parent component.

Scope
State: State is a local property of the defined component. It is not immediately accessible to or modifiable by other components.
Props: Child components to whom they are provided can access the props. Within the scope of the child component, they are reachable.

Rendering and updates
State: React forces a re-render of the component and any child components when the state is updated using setState(), reflecting the modified state in the user interface.
Props: When a parent component's props change, React immediately propagates those changes to the child components, causing the impacted child components to be re-rendered.

6. Component Lifecycle

Lifecycle methods are predefined methods in React that are called at different stages of a component's existence. They include hooks that let you run code at precise points in a component's lifecycle to carry out tasks like initializing state, obtaining data, changing the user interface, or depleting resources.
Components in React have a lifespan that is divided into several stages. At particular times during the lifecycle of the component, a set of lifecycle methods for each phase are called. These methods give you the ability to manage the behavior of the component and carry out particular tasks at various points in its lifespan.
The Mounting Phase, the Updating Phase, and the Unmounting Phase are the three key stages of a component's lifecycle.

The Mounting Phase
Mounting is the process of adding elements to the DOM.
When mounting a component, React's four built-in functions are invoked in the following order:

constructor() - Called when a component is being initialized and constructed.
getDerivedStateFromProps() - Invoked just before rendering when new props are received.
render() - Renders the component's UI
componentDidMount() - Called immediately after the component is rendered to the DOM.

class MountingComponent extends React.Component {
  constructor(props) {
    super(props);
    // Initializing state in the constructor
    this.state = { count: 0 };
  }

  componentDidMount() {
    // Executed after the component is mounted
    // Perform side effects, such as data fetching or subscribing to events
    console.log('Component mounted!');
  }

  render() {
    return <div>Mounting Phase Example</div>;
  }
}

Updating Phase
When a component's state or props need to be updated in the DOM, this phase is when it happens.
React has five built-in methods that gets called, in this order, when a component is updated:

getDerivedStateFromProps() - Similar to the mounting phase, it is invoked when new props are received.
shouldComponentUpdate() - Determines if the component should re-render or not.
render() - renders the updated UI
getSnapshotBeforeUpdate() - Called right before the changes from the virtual DOM are reflected in the actual DOM.
componentDidUpdate() - Called after the component is updated and the changes are reflected in the DOM.

class UpdatingComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidUpdate(prevProps, prevState) {
    // Executed after the component is updated
    // Perform side effects based on prop or state changes
    console.log('Component updated!');
  }

  handleClick = () => {
    // Updating the state triggers component re-rendering
    this.setState({ count: this.state.count + 1 });
  };

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

Unmounting Phase
This is lifecycle stage where a component is being unmounted from the DOM (Document Object Model) and is no longer rendered or accessible.
React has only one built-in method that gets called when a component is unmounted:

componentWillUnmount() - Called right before a component is unmounted and removed from the DOM.

class UnmountingComponent extends React.Component {
  componentWillUnmount() {
    // Executed before the component is unmounted
    // Perform cleanup, such as cancelling timers or unsubscribing from events
    console.log('Component unmounted!');
  }

  render() {
    return <div>Unmounting Phase Example</div>;
  }
}

7. Hooks

A crucial idea added in React 16.8 is the concept of hooks, which enables functional components to manage lifecycle events, hold state, and handle side effects without the use of class components. They offer a clearer and more logical way to create React components. We can "hook" into React features like state and lifecycle methods using hooks.
The following rules apply to hooks:

Only React function components can use hooks; other components cannot.
Only the top level of a component can call hooks.
Hooks cannot be conditional
UseState() is a hook that enables state to be present in functional components. Multiple useState() hooks can be used by functional components to manage various state components.
UseEffect() is a hook that controls lifecycle activities and unintended consequences inside of functional components. A callback function and an optional array of dependencies are the first and second parameters of useEffect(), respectively.

Additional Hooks

Functional components can useContext to consume values from a context provider.
For managing complex state updates, useReducer is an alternative to useState.
UseRef supports direct DOM manipulation and the preservation of values across renderings.

Custom Hooks
You can create your own unique Hooks if you have stateful logic that has to be reused in several components. Custom hooks are regular JavaScript functions prefixed with use.

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

const ExampleComponent = () => {
  // State hook to manage a counter
  const [count, setCount] = useState(0);

  // Effect hook to perform side effect
  useEffect(() => {
    // Update the document title with the current count
    document.title = `Count: ${count}`;
  }, [count]);

  // Event handler to increment the count
  const incrementCount = () => {
    setCount(count + 1);
  };

  // Render the component
  return (
    <div>
      <h1>Example Component</h1>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
};

In above example:

The useState hook is used to declare a state variable count and a function setCount to update it. The initial value of count is set to 0.
The useEffect hook is used to perform a side effect. It takes a callback function as the first parameter, which updates the document title with the current count. The second parameter is an array [count] that specifies the dependencies of the effect. Whenever the count changes, the effect is re-run.
The incrementCount function is an event handler that updates the count state by calling setCount with the new value.
The component's UI renders the current value of count, a button to increment the count, and a heading for the component.

React Features

Although they have slightly distinct meanings, the phrases "React concepts" and "React features" are sometimes used interchangeably. React concepts are the essential concepts and tenets of the design and development methodology used with React. On the other side, React features refer to the particular functionalities and capabilities that React offers right out of the box.Here are some key features of React:

Virtual DOM

React makes use of a virtual version of the DOM called the Virtual DOM. React can update and render components quickly and effectively by avoiding direct DOM manipulations thanks to its abstraction. The diffing algorithm used by React calculates the smallest changes between the previous and current states that are necessary, which optimizes rendering performance.

Component-Based Architecture

React is a component-based architecture in which the user interface is divided up into reusable and self-contained components. Complex user interfaces may be managed and reasoned about more easily because components encapsulate their logic, state, and UI. The reuse of components encourages the modularity and maintainability of the code.

JSX

JSX is a JavaScript syntactic extension that enables you to construct HTML-like code inside of JavaScript. With JSX, declarative UI creation is made possible by fusing HTML and JavaScript into a single file. It improves readability, offers a framework that is similar to markup, and makes it possible to seamlessly incorporate JavaScript expressions and logic into the UI code.

Unidirectional Data Flow

React adheres to a unidirectional data flow, commonly referred to as one-way data binding. Props let data to pass from parent components to child components. This design pattern guarantees predictable data flow and makes application state change debugging easier.

Reusable UI Components

React supports the development of reusable user interface elements. A library of components that can be readily shared between projects or with the React community can be created. Reusable parts increase development uniformity, maintainability, and efficiency.

Performance Optimization

React offers optimization methods to enhance the performance of applications. Utilizing the Virtual DOM and putting important ideas into practice, such as memoization and shouldComponentUpdate (or React.memo for functional components), it is possible to reduce the number of unnecessary re-renders, which speeds up rendering and improves performance overall.

Getting Started with ReactJS

Everything we've discovered thus far has taken place in a testing environment.We discussed writing React code in an HTML file to quickly interact with React. We will set up our development environment for applications that are ready for production in this part. Making a build and deploying it will allow us to achieve this. There are a few crucial stages to setting up the ReactJS development environment. Here is a starter's manual to assist you:
Node.js and npm
Ensure that you have Node.js installed on your machine. Node.js includes npm (Node Package Manager), which you'll use to manage dependencies and run scripts. You can download Node.js from the official website https://nodejs.org/en

Create a New React Project
You can create a new React project by running the following command in your terminal or command prompt

npx create-react-app my-react-app

Replace my-react-app with the desired name for your project. This command creates a new directory with the project structure and installs the necessary dependencies

Navigate to Project Directory
After the project is created, navigate to the project directory using the following command

cd my-react-app

Start the Development Server
To start the development server and run your React application, use the following command

npm start

This command will launch the development server and open your React application in the browser. By default, it runs on http://localhost:3000.

Edit and Experiment
With the development server running, you can start editing the React components. The project structure created by Create React App includes a sample component (App.js) in the src folder. You can modify this component or create new ones as per your requirements.

Here's a visual representation of a basic structure of a React Application

my-react-app
├── README.md
├── node_modules/
├── package.json
├── .gitignore
├── public/
│   ├── index.html
│   └── favicon.ico
└── src/
    ├── App.js
    ├── App.css
    ├── index.js
    ├── index.css
    └── logo.svg

React Tools

Remember we talked about the prerequisites needed before jumping into development with React, well on the flip side, React tools are apparatus that development easy and smooth. We are going to look at a few of these tools that are vital in development.

Package Manager - You may install, manage, and update the dependencies for your React application using a package manager. Yarn and npm (Node Package Manager) are the two most widely used package managers in the React ecosystem.

Code Editor - To assist you in writing clear and error-free code, a decent code editor offers tools like syntax highlighting, code completion, and linting. Visual Studio Code, Sublime Text, and Atom are three common code editors for developing React applications. I use Visual Studio Code personally.

Developer Tools - The browser plugin React Developer Tools offers a number of tools for studying React component hierarchies, tracking state changes, and performance monitoring. Both Chrome and Firefox have an extension for it.

Bundler - Your JavaScript, CSS, and other components are combined and optimized by a bundler to create production-ready bundles. A common bundler used in React projects is Webpack. It makes features like asset optimization, hot module replacement, and code splitting possible.

Transpiler - A transpiler enables you to create backward-compatible code that can be run in older browsers by converting contemporary JavaScript syntax (ES6/ESNext) into a usable form. Babel is a transpiler that is frequently used in React projects.

Linting - By spotting potential errors, style infractions, and best practice infractions in your code, a linter helps enforce code quality and uniformity. Popular JavaScript linter ESLint has presets designed specifically for React development.

Testing - Developing reliable React applications requires a strong testing strategy. For writing unit tests and integration tests for React components, software like Jest, React Testing Library, and Enzyme are frequently used.

CSS Preprocessor - You can use a CSS preprocessor, such as Sass or Less, to develop modular, reusable CSS styles for your React project.

Version control - is essential for controlling and working together on your codebase. The most popular version control program is called Git. Repositories for version control and collaboration are provided by hosting systems like GitHub, GitLab, or Bitbucket.

Deployment - There are several common options for hosting your React application, including Netlify, Vercel, Firebase, and cloud computing providers like AWS, Azure, or Google Cloud.

Building a simple React component

Here's an example of a basic component that displays a "Hello, World!" message

import React from 'react';

const HelloWorld = () => {
  return <h1>Hello, World!</h1>;
};

export default HelloWorld;

Code breakdown

We import React from the 'react' package. This is necessary to use JSX and create React components.
We define the HelloWorld component as a JavaScript function that returns JSX. The component consists of an element with the text "Hello, World!".
The component is exported using the export default syntax so that it can be imported and used in other parts of the application.

Rendering the component
Now that we have our HelloWorld component, we can use it in our application by importing and rendering it. For example, we can move to App.js and use the HelloWorld component within it

import React from 'react';
import HelloWorld from './HelloWorld';

const App = () => {
  return <HelloWorld />;
};

export default App;

In this example, we import the HelloWorld component from the './HelloWorld' file and render it within the App component. Now, if you render the App component in your application's entry point (index.js), you should see the "Hello, World!" message displayed on the screen.

Output
Hello, World!

React Projects

There are a few projects we can build with React.

Beginner Projects

Todo List: Create a simple todo list application where users can add, delete, and mark tasks as completed.
Weather App: Build a weather application that displays the current weather conditions based on a user's location or search input.
Recipe Finder: Develop an app that allows users to search for recipes based on ingredients or specific cuisines.
Portfolio Website: Create a personal portfolio website showcasing your skills, projects, and contact information.

Intermediate Projects

E-commerce Store: Build an e-commerce store with features like product listings, shopping cart functionality, and user authentication.
Social Media Feed: Develop a social media feed application that displays posts from users, allows liking and commenting, and provides real-time updates.
Blogging Platform: Create a blogging platform where users can create, edit, and publish blog posts, complete with user authentication and comment sections.
Movie Recommendation App: Build a movie recommendation application that suggests movies based on user preferences, genre, and ratings.

Advanced Projects

Real-Time Chat Application: Develop a real-time chat application using technologies like React, WebSocket, and a backend server for handling messaging.
Collaborative Code Editor: Build a code editor that allows multiple users to code together in real-time, featuring syntax highlighting, code sharing, and collaboration.
Financial Dashboard: Create a financial dashboard that displays data visualizations, budget tracking, and expense analysis.
Multi-User Task Management: Build a multi-user task management system with features like task assignments, notifications, and progress tracking.

Embrace React, immerse yourself in its ecosystem, and embark on an exciting journey of building engaging and innovative web applications. Happy coding!