WTF is React?

“What should I learn if I want to get started with web development?” You might ask. “I learned HTML and CSS, and am ready to move on to bigger and greater things!” “You should totally learn React!” the internet might respond. “Sounds good,” you say. “So… What is React?"

React in a Flash

• React is an open-source JavaScript library
• Used to build quick and interactive user interfaces
• For both Web and Mobile applications
• Uses reusable “components” to speed up development

What is React?

For the 10th year in a row, JavaScript was cited as the most commonly used programming language according to Stackoverflow’s 2022 Developer Survey. After that came HTML and CSS.

This is very convenient for us, because React is a JavaScript library! And an extremely popular one at that! According to the same survey, 42% of 58,743 respondents said that they use React.js, second only to Node.js (another JavaScript library), which 47% of respondents use.

React is a JavaScript library to create interactive user interfaces.

You can think of JavaScript like ingredients to the best burrito bowl of your dreams… And while you can very much spend a few hours sourcing all the best ingredients from a couple of grocery stores and reading the recipe, you could also order a meal kit with all the ingredients pre-portioned. When it arrives at your door, it’s ready for you to throw together to quickly create the meal. You’ll get a tasty burrito bowl either way, but one way is considerably quicker and easier than the other, and much easier to replicate time after time.

A "library"...?

Now, you might be thinking, “What’s a ‘library’?” As you may have guessed, we aren’t talking about the publicly-funded location to borrow books.

However, we are talking about an open-source location to “borrow” functions to use. Simply put, a library is a collection of “functions” that help speed up the development process.

React is a “library” (or a “bunch of code files”) of pre-written JavaScript that helps to make websites more powerful and efficient for you, the developer.

Like a meat sauce out of your favorite brand’s sauce jar, it’s made and ready for you to mix together with other ingredients to create your favorite pasta dish. Best part is, it’ll come out tasting the same every single time. Yum!

React will allow you to utilize pre-coded “components” so that you can spend more time on parts of the web application that sets you apart from others.

Why React?

You can do everything React does by writing your own code in “vanilla” JavaScript. However, the React team wrote a huge library of functions out for us to borrow and utilize, which makes our lives much easier.

On one hand, we have a desire for a new dining table. We can create a plan for building a dining table, and with our shiny new plan, we can go into the woods, and find a tree to chop down and create all the parts of a dining table. Then, hopefully, you’ll be able to assemble it into a dining table without getting too many splinters… or splintered wood.

On the other hand, we can go to IKEA and collect a kit filled with pre-cut, pre-painted, and pre-measured ingredients to create that picture-perfect dining table. And it even comes with instructions!

There’s no “right” or “wrong” choice when you choose how you will build your dining table. But picking the IKEA kit will definitely make the process much simpler. It’ll also be much easier to replicate when all of your friends want one too!

React is very popular!

If you do decide to learn React and utilize it for your corporate or personal project, you’re in good company! Major companies like Facebook, Dropbox, Reddit, and Postmates utilize React in production. On top of that, companies like Walmart, Tesla, and Wix utilize React Native, a framework for creating mobile applications using React to create their mobile applications.

What’s more, 68% of those who use React say they love it, and 22% of those who currently don’t know React say they want to learn, according to Stack Overflow’s Developer Survey 2022! It is a skill that is in high demand, both by major corporations and developers.

React Components: Reuse Code at Will!

One of the main features of React is that you utilize functions, called “components,” and save them as pre-built blocks of code to reuse over and over again within your application or website. With JavaScript, every time you wanted to reuse a specific function, you would need to rewrite the code from scratch. With React, you can create a “component” and toss it into your code to reuse whenever you want.

If you’ve tried playing around with Cascading Style Sheets (CSS) to stylize your HTML pages, you might recognize that this concept is similar to utilizing “class.” In CSS, you can use “class” to create specific stylistic effects that you can apply in different parts of the web page without having to rewrite the code stored in the stylesheet.

Long story short, you can think of React Components like “building blocks” that create the user interface for your website or application. Adding up the various “blocks” creates the full visitor experience we enjoy as users of the web application or site.

To conceptualize what React Components may look like, let’s take a very basic webpage layout, with a Header, Navigation, Main Content Area, and Footer. Each section on the website can be a React Component.

To drill down further, let’s think about a familiar Social Media frontpage.

Here, we can see a lot of components. The navigation, the “Tweet” button, the search, the published tweets themselves, the input box… Can you identify some more potential “components” in a Twitter feed?

While you can do everything React can do using “vanilla” JavaScript, learning and utilizing React will allow you to create your web and mobile applications more efficiently. As one of the most popular frameworks utilized by large corporations, it is a skill that will likely benefit you in your developer career.

JavaScript before React?

Because React is a JavaScript library, having fundamental knowledge of JavaScript is recommended before diving in. However, we don’t think you need to be a JavaScript Master (™) to begin learning React.

Interested in learning React, but don’t know JavaScript? We’ll go over essential JavaScript concepts to learn before diving into React!