What is React?

React is a popular JavaScript library developed by Facebook for building user interfaces, particularly single-page applications where a dynamic and responsive user experience is essential. It allows developers to create reusable UI components that manage their own state and can be composed to build complex user interfaces.

Benefits of React

• Component-Based Architecture: React encourages the development of modular and reusable components, making code easier to maintain and scale.
• Virtual DOM: React uses a virtual DOM to efficiently update and render changes in the UI, which improves performance by minimizing direct manipulation of the actual DOM.
• Declarative Syntax: React’s declarative approach makes it easier to reason about your application’s state and the UI, resulting in more predictable and manageable code.
• Strong Ecosystem: React boasts a robust ecosystem with tools and libraries like React Router for navigation, Redux for state management, and Next.js for server-side rendering and static site generation.

Overall, React.js provides a powerful and flexible framework for building high-performance, dynamic web applications.

React Components

React components are the fundamental building blocks of a React application, designed to encapsulate and manage a portion of the user interface. Components allow developers to break down the UI into smaller, reusable pieces, each responsible for its own rendering and logic. Developers are able to colocate the structure (html), style (css) and interactivity (javascript). For example:

In its most basic form, a React component is a function that returns html. For example, here is a functional component called Greeting:

tsx
function Greeting() {
  return <h1>Hello, Atlas!</h1>;
}

We can use this component in our application like this:

tsx
function App() {
  return (
    <div id="container">
      <Greeting />
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
    <div>
  );
}

This modular approach enhances maintainability, reusability, and separation of concerns, making it easier to build complex user interfaces and manage application state effectively.

Components can also be nested and composed together, enabling the creation of intricate UIs by combining smaller, well-defined parts.

Some things to keep in mind when creating react comonents:

• Component function names must start with a capital letter.
• Components must return JSX. (We will discuss JSX in more detail below)
• Components must be closed, either with a closing tag (<Greeting>John</Greeting>) or with a self-closing tag (<Greeting name="John" />).

React Props

React props are a mechanism for passing data from a parent component to a child component in a React application. They are used to configure or customize child components and to pass data such as strings, numbers, objects, or functions.

To access the props within a functional component we can use the props argument in the function. For example:

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

By leveraging props, developers can create more dynamic and reusable components, allowing them to render different outputs based on the values they receive:

tsx
function App() {
  return (
    <div id="container">
      <Greeting name="Atlas" />
      <Greeting name="Lumi" />
    <div>
  );
}

You can think of props as similar to attributes in HTML. Utlizing props promotes a clear and predictable flow of data throughout the application, facilitating better component communication and separation of concerns.

JSX

You may have noticed this syntax for creating react components doesnt look like valid javascript. In javascript you cannot just return html from a javascript function. While not required, react applications are generally written in a special syntax called JSX.

JSX, or JavaScript XML, is a syntax extension for JavaScript that allows developers to write HTML-like code within their JavaScript files. It is used in React to describe the structure of the user interface in a more intuitive and readable way. JSX closely resembles HTML, making it easier to visualize the layout and structure of components, but it transcompiles down to regular JavaScript. This syntax allows developers to embed expressions, use variables, and invoke functions directly within the markup.

Consider the following example:

tsx
function CountLength(props) {
  return <h1>{props.word} is {props.word.length} characters long.</h1>;
}
function App() {
  return (
    <div>
      <CountLength word="Hello, world!" />
      <CountLength word="React rocks!" />
    </div>
  );
}

In plain javascript this same code would look like this:

tsx
function CountLength(props) {
  return React.createElement("h1", {
    children: [props.word, " is ", props.word.length, " characters long."]
  });
}
function App() {
  return React.createElement("div", {
    children: [React.createElement(CountLength, {
      word: "Hello, world!"
    }), React.createElement(CountLength, {
      word: "React rocks!"
    })]
  });
}

You will find that writing your react code in JSX makes it much easier to read, but utilimately this javascript version is what the browser will execute. Just know that browsers do not understand JSX so it will always need to be transpiled to plain javascript. To handle this task we will use tools such as Vite.

Vite (“veet”, french for “quick”)

Vite is a modern build tool that significantly enhances the development experience in a React application. It is a build tool that converts developer friendly code into browser friendly code.

As developers we often want to use tools and languages that a browser may not be able to interpret directly. This include things like typescript, jsx, postcss. Vite can take these formats and convert them into plain javascript and css.

Getting started with React and Vite

Vite provides tooling to scaffold a starter applcication with a few commands. To get started with React and Vite run:

bash
$ npm create vite@latest vite-hello-world -- --template react
$ cd vite-hello-world
$ npm install
$ npm run dev

You should now have a local dev server running. Open http://localhost:5173 in your browser to see the results. If you make a change to the text in App.jsx you should see it reflect in the browser.

Rendering React to the DOM

Using Vite, most of the hard work of setting up a react app is done for you but it is important to understand how your react app is rendered to the DOM. Say you have an app component like this:

tsx
// App.jsx
function App() {
  return <div className="app">Hello World</div>;
}
export default App;

And you have a index.html file like this:

html
<html>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

We need a way to attach our react app to the DOM in the HTML page. Here we have an empty div with an ID of root. This is where we want our react app to load. We also load a javascript file called main.jsx.

In the main.jsx file add the following:

tsx
import ReactDOM from "react-dom/client";
import App from "./App";
// Render the App component to the root element
const div = document.getElementById("root");
const root = ReactDOM.createRoot(div);
root.render(<App />);

This code uses the DOM API to find the div element with an ID of root then renders our <App /> component to it. You will find boilerplate code like this in most react apps. This is the minimum amount of code needed to render a react app to the DOM.