React Introduction

What is React?

React is a JavaScript library that is widely used for creating user interfaces. There are 3 main tenants of why React became a widely used library.

Declarative

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make 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. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.

Learn Once, Write Anywhere

We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code. React can also render on the server using Node and power mobile apps using React Native.

What Makes React Different?

React is a library. In the past, the React team provided a painless way to bootstrap a Client Side React Application. This was done using a Node.js npm package called Create-React-App. It had PWA support, a dev server with hot reloading, and a Chrome Extension called React Dev Tools so you can easily debug.

The library was barebones; developers had to learn a new way to write HTML markup called JSX. It looks familiar to HTML but it actually just JavaScript with some syntactic sugar. JSX is just powered by JavaScript objects but meant to look familiar to a developer that writes HTML.

Example JSX

import React from "react";
 
function Button({ color, variant, text, onClick }) {
  return (
    <>
      <button
        style={{ color: color, variant: variant ? variant : "" }}
        onClick={(event) => onClick(event)}
      >
        {text}
      </button>
    </>
  );
}
 
export default Button;

There was no native routing baked in, developers had to install a dependency (usually React Router) to handle client side routing.