Learn React: Start of a Frontend Dev Journey
Hello! Welcome to the first article in a series of tutorials that will focus on learning React.js. This is a weekly series, and after this brief introduction, will center around building a to-do list application from scratch. I chose a to-do list as it includes all the foundational application building blocks needed in a basic CRUD application.
Before getting into what React is, here are some recommended prerequisites, as defined by Google:
- Programming concepts include functions, objects, arrays, and classes.
- Working knowledge of JavaScript.
- Familiarity with HTML and CSS.
- An understanding of the DOM.
When I learned React, I was a master of exactly none of these topics. I don’t want to mislead anyone though, I was at Codesmith and learned React in the structured school environment. By this time, I studied algorithms and basic data structures for about five months and had a fledgling knowledge of the DOM and HTTP requests. My HTML was meh at best and my CSS was a disaster. Absolutely no divs were centered before this time period.
One last word from the wise(ish): The more working knowledge you have prior to exploring React, the more ease you may find with this, but no one can define what learning will look like for you. Many articles and video tutorials say “learning React is easy” but that is in comparison to heavier frontend libraries and frameworks. “Easy” was not my experience. Don’t be discouraged if it isn’t yours either. I’m happy you’re here and I hope you stay! Now, shall we?
What Is React?
Facebook developer Jordan Walke created the React.js frontend JavaScript library, as a way to help developers build user interfaces with components. A library is a collection of prewritten functions and code that reduce development time and provide popular solutions for common problems.
Inspired by XHP (an HTML component library for PHP), React was first deployed on Facebook’s news feed in 2011 followed by Instagram in 2012. The library was open sourced at JSConf US in May of 2013.
React is open source, meaning it is completely free to access. Developers are encouraged to modify and enhance the library.
React adheres to the declarative programming paradigm. Developers design views for each state of an application and React updates and renders components when data changes.
Why Learn React?
Documentation: React has a proper maintenance team via the engineers who actively work on React. As result, React.js is incredibly professional. They have docs on docs on docs. Do you need to find something that isn’t in the React docs or do you want to search for something super specific in Google? Well, that is no problem! Enter Stack Overflow or the numerous blog posts (hello) that are also here to help you. I’ve worked with technologies that have a large footprint and those with a very small one. The larger the footprint, the more ease and independent the coding experience is.
Vast Career Potential: Uber, Bloomberg, Pinterest, Airbnb, and Skype are just a few companies that use React. The popularity is growing as more companies and Google estimates the average earnings for a React developer is $119,990 in the US.
Longevity: Any time a library is used, there’s a risk that maintenance could be discontinued. It happens all the time. So when choosing a library it’s best to select one with such a large community. I hope it’s clear by now that React has one. Updates are still current after 10 years and popularity is only growing. Projects and skills are safe here.
Why Reinvent the Wheel?
One of the things I valued most about learning from my instructors at Codesmith was that they taught me to use the proven engineering tools at my disposal. React works. It’s optimized for performance and effectiveness yet leaves so much room for creativity. Some of the greatest engineering minds put their best effort into building this library. I don’t have to build my applications from scratch and can lean on these tools and libraries when it suits the project.
Leaning on a library, framework, or template isn’t cheating. It’s solid engineering. Engineering isn’t taking the hardest, most laborious path forward in my opinion. It is solving a challenge the best way possible with the most optimized solution that you know of at that time. And now I would like to present to you, a very lean, mean, optimized frontend machine.
Welcome to React!
In the next article, I will cover the following topics: state, components, JSX, how to render JSX to the browser, how to set up the files in an IDE.
Part 2: Build a Working File Tree and Manage State.
