What is React?
Published: 2023-07-02 14:01:24

Today, I want to talk about React, what it is and what it can do. React is a front-end framework that will allow developers to build large applications quickly and seamlessly. React is built entirely from JavaScript, with a structured and organized syntax called JSX. JSX looks similar to HTML, but instead looks more simplified and is separated into components, and used to build applications in sections. The ability to split code in sections allows for applications to be more organized, easy to read, and reusable.

An example of App in React would be:

```
function App() {
  return (
    <div>
      <NavBar />
      <SongMenu>
        <SongResult result={result1} />
        <SongResult result={result2} />
      </SongMenu>
      <SongRecommendation />
    </div>
  );
}
```

In this example, NavBar, SongMenu, SongResult, and SongRecommendation are all separate components. These components would each have their own sections, which would allow for better organization. In this example, the SongResult component is able to be used twice for a different result, because the component was created in a way that it could be reused. This is what makes React so good, the ability to keep things short, simple, and reusable while also allowing other parts of the code to be incredibly intricate. 

Another way that React is so powerful it's ability to share and download code to use alongside it's own. To help organize code, React uses JavaScript packages. This package manager is called **npm**. Huge reusable libraries of code are available as npm packages, which allows web applications to be based off the same structure or data. This is very neat because you could use the same packages of code to create completely different things. The ability to build a package using others allows the coding process to become ever growing and innovative.

The way React organizes the packages is through a file called `package.json`, this file contains a list of _dependencies_. These dependencies are what is used to run your application, and would be required to download if someone else was to access your application. In order to do this, you would run this command, `npm install`. This would prompt the package manager, npm, to grab all the dependencies from the package file, and install them into your directory. Thinking about the amount of time that the world has saved from the accessibility and efficiency of this is mind-numbing.

Some very useful code that is built-in React's internal code is called `useState`. It is a special function called a **React Hook** which lets us hook into React's internal state of a component.

To import `useState`'s functionality, you would type this at the start of a component:

```
import React, { useState } from "react";
```

then it would be implemented like this:

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

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

  return <button onClick={increment}>{count}</button>;
}
```

I'll go in depth with what exactly is happening in this code now. The first line of the `Counter` function is setting an original value of count (which is 0), and setting a function, `setCount` to be the "setter" function, which pretty much just means when it is called, it will re-render the component. Then, the second function being run inside the `Counter` function is `increment`. In the increment function, `setCount` is called, so the page will re-render, but it will re-render when count is added by 1. Finally, the button on the bottom is set to run the `increment` function on every click, while displaying the count on the button text. Clicking this button ultimately increases the count by 1, which in turn re-renders the page with the new count on the button. The `useState` function allows React to work with dynamic data. This is one of the most powerful tools to use to make code both reusable and interactive. There are many more tools involved in React but I will leave it at this for now.

Another useful tool in React is the ability to use `props`. Props are used to turn components into dynamic templates. `props` are so powerful because they allow the data to be passed down from a _parent_ component to a _child_ component. This is pretty much the way puzzle pieces, or "components" are connected to make a fully functional application. Data is passed through component to component to make dynamic interactions within the application, ultimately allowing the developer to create smarter and bigger applications.

In conclusion, React as a framework is very modular and reusable. It helps us focus on organization and presentation instead of solely on functionality. Components and **React Hooks** allow us to separate our code an structure complex applications, while making them interactive.