WTF is React!? (Part 1/5)

Trying to understand what React is

This is Part 1 of my journey towards building React applications. Before you ask “Why React?”, go check out Part 0 — the starting point of this series.

Let’s look at what they say about React on the official site — reactjs.org

React is a JavaScript library for building user interfaces

Nice and succinct. Now, what the hell is…

• a JavaScript Library
• building user interfaces

JavaScript Library

There are actually two components to this:

JavaScript

JavaScript (JS) is freaking awesome, and i’m sure you will agree. It is what makes almost all of the websites, applications and interfaces that you interact with on a daily bases… well, interactive.

Every time you fill out a form, see an annoying pop-up, stare in awe at a cool animation, click a button, etc. etc. ; There is almost always some JavaScript running and defining these interactions. In fact:

Alongside HTML and CSS, JavaScript is one of the three core technologies of the World Wide Web

Without JavaScript the digital age as we know it would be very dull.

Library

As mentioned, React is a JavaScript library. Which means React is essentially a collection of pre-written JavaScript.

Think about JavaScript as the books that make up the rows of bookshelves, that make up the React Library.

I’ll save you the trouble and ask the follow-on question for you.

Now, why would you want to have a library full of pre-written JavaScript “books”?

As the World Wide Web and digital world has evolved, the demands on technologies like JavaScript have expanded dramatically.

JavaScript Libraries were introduced to allow solution developers to concentrate on more distinctive applications of JavaScript. Basically an easier way to develop the interactive interface they set out to build.

Many JavaScript libraries (and variations of libraries) exist. React is just one, and it’s purpose was to make is easier to build user interfaces.

User interfaces

Whenever a user (you) interacts (touches, looks at etc.) with an application you are using a user interface (UI). A UI is essentially what connects the human with the machine — Pretty important, right?

As mentioned above, digital solutions and their demands have changed dramatically over time. Here are two examples of UI over time:

Pong (1970s)

Airbnb (2018)

Given the context from above, let’s try that definition a second time:

React is a modern JavaScript Library that helps developers build user interfaces like the Airbnb mobile app, faster and more effectively.

Learning React

Now that you have a better understanding of what React is, it’s time to start learning how to use it.

Starting point — JavaScript

Given that React is made up of pre-written JavaScript, the best place to start is gain a basic understanding ofhow to use plain old JavaScript (often referred to as Vanilla JavaScript). I recommend the following resources as a starting point:

• JavaScript.com: The official JavaScript page, good to read through and offers you a number of quick tutorials and other resources.
• JavaScript 30: This is a fun and interactive FREE course in which you build 30 things in 30 days (or more/less) using Vanilla JavaScript.

Starting point — React

So you’ve got a basic understanding of JavaScript and it’s time to get stuck into React. I recommend the following starting points:

• Reactjs.org: The official React JS page, offering you basic information, documentation and links to resources to learn React.
• Build front-end web applications from scratch: This is a comprehensive 8-week course by Code Academy. It introduces the concepts of JavaScript and React JS really well and is one of the best online courses I have done. It does come with a price tag of $199 though, but well worth it if you are serious about learning React. NB: This course will create a foundation to really start learning React, you won’t be building the next Uber after the course… sorry!

Ready to progress?

Assuming you have a basic knowledge of how to use React, you’re ready to progress:

• Part 2: WTF?! Creating your first React App
• Part 3: WTF?! Routing in a React App (Coming soon)
• Part 4: WTF!? Styling in a React App (Coming soon)
• Part 5: WTF!? Redux in a React App (Coming soon)