Introduction to React

Let's get Reactive

React is a highly influential JavaScript library that makes building dynamic user interfaces much more robust. Its component-based and declarative approach to interface design has revolutionized the way we build websites and web applications.

But what exactly makes React so special? And how does it differ from other front-end libraries?

Well, imagine you're building a complex user interface, with several interacting elements. Without a framework, this can quickly become a big mess spaghetti mess of event listeners and state management. But with React, you can define each element as a component, and clearly state how it should behave and render in different states.

In modern web development, React is a go-to choice for building high-performance web applications because it cleverly updates only the elements that have changed, instead of re-rendering the entire page.

JavaScript Prerequisites

Before diving in, it's mandatory to have a solid understanding of JavaScript and its modern features, especially ES6 syntax. These are some of the key concepts you need to be familiar with:

• Variables, Functions, and Arrow Functions

• Template Literals

• Destructuring and Spread Operators

• Classes and Inheritance

• Modules and Import/Export Statements

If you think you're not confident enough, feel free to brush up on these concepts on our JavaScript resource page.

JSX and Babel

JSX is a syntax extension for JavaScript that allows us to write HTML-like code. It's a fundamental part of React, as it enables us to define how components should render.

Let's observe a component that takes in a title and body, and returns a simple card:

import React from 'react';

function Card({ title, body }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <p>{body}</p>
    </div>
  );
}

export default Card;

JSX may look strange at first, but it's just JavaScript with some HTML-like syntax. JSX gets transpiled (converted) into JavaScript by a tool like Babel.

In the case of React, Babel transpiles your JSX into JavaScript which can run in any modern browser.

Element Rendering

In React, the structure of a typical application involves separating the presentation components from the logic. In other words, the UI is separated from the data that drives it. Such structure makes the code easier to maintain and allows for reusable components.

The top-level component in a React application is often referred to as the "App" component. This component is the root of the component tree, and it often acts as a container for other components.

The App component is usually created in a file called App.js, which exports a React component.

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <p>This is my first React application.</p> 
    </div>
  );
}

export default App;

The App component returns a single HTML element - a div that contains a header element.

The next step is to render the App component in the browser. This is done with a file called index.js, which is typically located at the root of the project. It acts as the entry point for the application and imports the App component from App.js.

Below, we see what the index.js file might look like:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Let's explain it step by step.

The index.js file imports the React and ReactDOM packages, as well as the App component. Then, the ReactDOM.render function is called to render the App component in the browser. The first argument to the render function is the component for rendering, and the second argument is the DOM element to render it into.

In this case, the component is rendered into an element with an id of root.

Bear in mind, we only showcased the basic structure of a React application. provides a solid foundation for building more complex applications. From here, you can start adding more components, props, and states to build out the UI of your application.

Components and Props in React

Components are the foundations of a React app. They can be thought of as self-contained pieces of UI, with their own logic and functionality. In React, components can receive data through a mechanism called "props".

Props are a way to pass data from a parent component to its children. In the example below, the Greeting component receives a "name" prop from its parent component:

import React from 'react';

function Greeting({ name }) {
  return (
    <div>
      <h1>Hello {name}!</h1>
      <p>Welcome to the world of React.</p>
    </div>
  );
}

export default Greeting;

In this example, the Greeting component receives the name prop and displays it in the header. With this approach, it's quite easy to reuse the component and display different greetings with different names.

States and the React Lifecycle

React components can also maintain their state, which is data that changes over time. For instance, a component might have a state that tracks whether a user is currently logged in or not. The component can then render the appropriate UI based on its state.

The React component lifecycle refers to the different stages a component goes through from its creation to its eventual destruction. Understanding this concept will ensure that your components are working as expected.

Event Handling

React components can also handle events, such as a user clicking a button.

import React, { useState } from 'react';

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

  function handleClick() {
    setCount(count + 1);
  }

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

export default Example;

We're using the useState hook to keep track of the number of clicks. Additionally, we have a handleClick function that increases the count by 1 each time the button is clicked. The button has an onClick prop that triggers the handleClick function when it is clicked. Finally, the count is displayed in the p tag.

React's event-handling system is unique because handles events in a declarative manner. In other words, instead of writing element.addEventListener, you simply specify the event as a prop on the element. This makes it easier to understand what the component will do when an event occurs, without having to dive into the implementation details.

Modern-Day Usage

With the increasing demand for high-performance, dynamic, and scalable web applications, React has become an indispensable tool in the front-end developer's toolkit. Its component-based architecture and virtual DOM make it easy to build complex UIs that respond to changes in real time. It's no wonder that companies like Meta, Airbnb, and Netflix use it to build their highly-demanding web applications.

One of the biggest advantages of React is its compatibility with other libraries and technologies. It's possible to integrate React into existing projects or to use it in conjunction with other tools like Redux, Webpack, and GraphQL. Whether you're building a single-page app, a progressive web app, or a mobile app, React can help you deliver a fast, responsive, and engaging user experience.

Final Thoughts

The React community is constantly evolving and growing, and there is always more to learn about this amazing technology.

We only briefly covered its core concepts, but there are many more topics to explore. If you're interested in learning more about React, there are countless resources available online. In the end, the best way to learn is to get your hands dirty and start building something.

Of course, it's implied that it doesn't have to be the next disruptive solution — starting small is the prerequisite to becoming proficient.

Additional Resources

The official React documentation

Glossary of React terminology