What is React?

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.