loading...
Cover image for Want To Learn React in 2020? Here's The Blueprint to Follow.

Want To Learn React in 2020? Here's The Blueprint to Follow.

codeartistryio profile image Reed Barger Updated on ・7 min read

At this point, there’s nothing stopping React.

According to Hacker News trends for 2019, React has maintained the #1 spot for most in-demand tech skill a developer can have, beating out Python for the third year in a row.

https://res.cloudinary.com/codeartistryio/image/upload/v1578309901/Screen_Shot_2020-01-06_at_6.24.16_AM_phjrph.png

But React's popularity isn't limited to just employers—developers themselves are downloading and building projects with React nearly 3 million times per week.

https://res.cloudinary.com/codeartistryio/image/upload/v1577820252/react-weekly-dl_cpabet.png

What do these numbers tell us?

Learn React. There's never been a better time.

If you're new to React, welcome! You're in the right place and you're getting started at the perfect moment.

And if you're already a developer, adding React to your set of skills will further your career and broaden your prospects in the future.

I can say without reservation that nothing has advanced my career more than making a commitment to learning React, deeply.

How did I do that, exactly?

More on that in a moment...

The Way To Learn React

If you've tried to learn React in the past you may have felt at times, “I can't do it. React is too difficult!”

And you wouldn't be alone in this feeling.

https://res.cloudinary.com/codeartistryio/image/upload/v1578322842/Screen_Shot_2020-01-06_at_10.00.33_AM_o3cmwg.png

I was in the very same position.

A few years ago, I hardly knew what React was, but I saw the growing interest around it and figured maybe it was something worth learning.

And then I made something you likely already have—a resolution, a commitment to learn it for good.

At that time, I was in a completely different career path. But I worked hard, learning and writing React code whenever I could.

I read articles, watched tutorials, I copied the code I saw others write, I coded on my own whatever I could, and took notes all along the way.

And after about 6 months of hard work... things finally started to click.

  • I moved on to being able to build apps on my own, without needing to rely on guided tutorials, only resorting to Google to resolve the problems I couldn't fix myself.
  • I got involved in building compelling projects and started working with React everyday. (I still do, to run my business, Code Artistry).
  • Once I felt confident in what I knew, I started teaching other developers how to learn and build apps in React themselves (today I'll be passing 20,000 students who have taken my courses, which focus largely on React and JavaScript).
  • I was even offered a job to lead the redesign of the home page of a Fortune 100 company(!)

But despite the progress that I had made, things had clicked not for the reasons I expected...

It wasn't the hard work that I put in that made the results for me—it was knowing the most important thing is not what you learn in React, but how you learn it.

Learning React then was largely the same as it is now. There are tons of articles, tons of training courses that developers release every day, meaning more information to help you learn all the time.

And this is excellent. Plus there are more React developers today than ever before, many of whom are making their knowledge publicly available.

So What's The Problem With Learning React Today?

You'll find so much technical content, but almost no guidance from those same professionals about how important each tool or concept is for you to learn.

Without a blueprint for how to learn these technologies, meaning how much time you should dedicate to learning each concept, and how they fit into the big picture of becoming and working as a developer, you are set up for a great deal of difficulty and wasted time.

This is something that often led me astray in learning React—

I would read an article, go off and dedicate time simply trying to learn the tool the article featured (say, TypeScript). As I did, I got frustrated along the way, because I would often spend a day or more learning a tool that was too difficult and secondary to other skills I should have been working on instead.

I'm here to ensure you don't run into the same difficulties that I did.

I want to put you on the fast track to doing what you want with React, in your quest to get a developer job, code amazing apps, and open up totally new avenues in your career.

But before we go forward, let’s take a quick step back to answer some essential questions:

  • Why is React so popular in the first place?
  • And how did React come to be such a necessary library for businesses and programmers alike in the current tech landscape?

Why React In The First Place?

React’s popularity has to do with a significant change in making web sites in recent years.

Traditionally, web sites worked—and a lot still work today—by your browser getting HTML from a server, and then displaying each page with that HTML. And whenever you go to a different part of the site, the browser will do a full refresh, it will get more HTML from the server, and that new page will be displayed (rendered) with the new HTML.

In a word, websites are traditionally server-side rendered.

https://res.cloudinary.com/codeartistryio/image/upload/v1577819700/ssr-diagram_s6mebb.png

But as time progressed, developers converged on a different pattern for building web sites, called web apps.

What’s the difference?

There’s really no strict difference, but the term "web app" came about to describe these web sites which were made to be more interactive and perceptibly faster.

In a web app, otherwise known as a single-page app (or “SPA” for short), the browser will still load the first page you see by getting HTML, but it will also receive the CSS and JavaScript required for every page of the app, not just a single page.

What was the innovation?

It was for SPAs to use JavaScript, a language which runs in every browser, to fetch data from the server to display new pages.

Instead of fetching HTML from the server, however, it fetched a different type of data known as JSON. So when a user changes the page, JavaScript fetches the necessary JSON data for the new page from the server and then JavaScript would update the existing HTML with that new data to show the appropriate content.

This, as compared to server-side rendering, is known as client-side rendering.

https://res.cloudinary.com/codeartistryio/image/upload/v1578319714/Client-Side_Rendering_Diagram_mcswwe.png

In client-side rendering, JavaScript is responsible for controlling the entire app. This is what paved the way for React.

How React Came To Be

The advent of client-side rendering and the desire to build these snappier SPAs resulted in a push among many companies to figure out how to best create this new type of app, including the company Facebook.

Facebook's most popular approach to building SPAs emerged over time as a JavaScript library called—you guessed it—React. It was created in 2013 by Facebook engineer Jordan Walke.

React was a JavaScript library, meaning it was written in JavaScript and uses the JavaScript syntax, but comes with additional features, namely those that help us with this goal of building web apps more easily.

React was not an overnight success, however.

In fact, it came as a shock to developers upon its release.

It was startling in that it challenged what was established as "best practices" for a long period of time in web development.

Prior to React, developers were taught the benefit of creating websites with separate HTML, CSS, and JavaScript, all living in separate files. Between these three languages, there was a built-in "separation of concerns", where each part of the website was in isolation from one another.

The logic behind this concept was that programmers could more clearly reason and develop each part of their project with such divisions in place.

React threw that right out the window.

And unsurprisingly, React was not well received at first by the developer community.

But with time and by using React in real-world projects, what started as an unwelcome change came to be gradually embraced as a powerful new way of uniting all of the necessary parts of any web application.

React In A Nutshell

And this is React in a nutshell—a library born out of the need to make a new kind of app, which in the end, totally changed the way that developers use the core technologies of the web.

Additionally, it's helped move JavaScript out of the browser entirely, through the ability to build apps on mobile devices as well as in totally new environments, such as VR headsets.

And starting now, we're going to cover how to learn React in a transformative way.

I'm excited to announce that over the next two weeks, I'm putting together a series on how to learn React from the ground up in record time. And you're reading the first article in that series.

Along the way, we'll cover immensely practical tips you can start using to supercharge your React learning process.

Here's some of what's in the pipeline:

  • How you can start thinking like a React developer right away
  • What coding concepts will put you on the path to success and which ones you need to set aside
  • Plus one piece of advice that will make you irresistible to future employers

In the end of this series, I want to put you on the right path to learning React, so you can do what you want with it.

Keep at it and I’ll catch you in the next article!

Want To Become a JS Master? Join the 2020 JS Bootcamp

Join the 2020 JS Bootcamp Course

Follow + Say Hi! 👋 TwitterInstagramMediumcodeartistry.io

Posted on by:

codeartistryio profile

Reed Barger

@codeartistryio

Sharing artful coding skills that fuel the life you want to live @ CodeArtistry.io 🎨

Discussion

pic
Editor guide
 

Very informative for those who want to start with React or even for those who want to know how SPAs work.
Thanks.

 

Thank you, Adnan. My pleasure!

More articles like this to come.

 

I'm awaiting impatiently

 

Just subscribed , waiting for the great content to start rolling in

 

Just hours away, in that case!

 

Just curious to know , by when the course begins

Stay tuned. More about that soon!

 

Is it free or paid courses