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
- Used to build quick and interactive user interfaces
- For both Web and Mobile applications
- Uses reusable “components” to speed up development
What is React?
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.
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.
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, 69% 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 2020! It is a skill that is in high demand, both by major corporations and developers.
React Components: Reuse Code at Will!
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?