React: A Better Way to Code

For a very long time, the only way I’ve known how to code a web application, is by creating all of the DOM elements by hand. I’ve just recently learned of a more declarative way of programming, using a framework(or is it a library?) called React. And, not only does React make it easier to debug your code, it also makes your code shorter, easier to read, and less of a pain to code!

React has a couple of amazing features, but before I start covering those, it should be said that coding with React will be very different from coding with your vanilla JavaScript. This is because React uses JSX, which is an extension of JavaScript.

The Features

There are two major features to React I have already worked with:

• Declarative
• Component-Based

Declarative

If you have ever heard of the expressions imperative and declarative programming, then you already know which one React is. If not:

Imperative:

• It explicitly describes every action and step a program should take
• It describes how the program should perform these actions

Declarative:

• It describes what the program should accomplish (the end result)
• It leaves it up to the program on how to get to the end result

If you haven’t already determined from this, React is indeed a form of declarative programming!

Here is how creating a DOM element without React (an imperative operation) would look like:

const header = document.createElement("h1");
header.textContent = "Hi!";
header.className = "main";

const container = document.querySelector("#container");
container.append(header);

But with React:

// JSX syntax
const header = <h1 className="main">Hello from React!</h1>;

ReactDOM.render(header, document.querySelector("#container"));

With React, we never needed to be explicit on how to make the header, or what to change! And, it only took two lines of code to do this!

Credit to Flatiron School for these code blocks, by the way!

Component-Based

React doesn’t require us to put all of the code into one JS file. Instead, it encourages us to split it up into “components”. Each of these components can be placed in their very own JS files. This makes each component easier to debug, fewer lines in the file, and way more organized.

Here I will give an example of the top component to a web application made with React. Some of the terms in here I haven’t covered, but you can visit the React website for tutorials on React and its terms and structure.

//App.js
import NavBar from "./NavBar";
import Map from "./Map";
import ResultList from "./ResultList";
function App(){
   return(
      <div>
         <NavBar />
         <ResultList>
            <ResultItem result={result1} />
         </ResultList>
         <Map />
      </div>
   );
}

Conclusion

In my opinion, React is a better way to code web applications. When compared to coding with just JavaScript, React is more organized, easier to code (and debug) with, and easier to read.