Learn React: Start of a Frontend Dev Journey – thenewstack.io

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:

When I learned React, I was a master of exactly none of these topics. I dont 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. Dont be discouraged if it isnt yours either. Im happy youre here and I hope you stay! Now, shall we?

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 Facebooks 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.

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 isnt 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. Ive 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, theres a risk that maintenance could be discontinued. It happens all the time. So when choosing a library its best to select one with such a large community. I hope its 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.

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. Its 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 dont 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 isnt cheating. Its solid engineering. Engineering isnt 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.

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.

Read more here:
Learn React: Start of a Frontend Dev Journey - thenewstack.io