| |

How to Learn React.js — Part 1

react.js logo
React.js is the hot new JavaScript library right now. Ever since it was announced that it was invented at Facebook, many web developers have started using it in their own web applications. There is some confusion over what exactly React.js is and how it’s used to create web experiences, so I’ll begin with some introductory information before I get into the nitty gritty of how you can learn it.

In the second part of this Learn React series, I will show you how to set up a local web development environment that will allow you to build React web apps on your computer. This requires installing a server and running it from your command line. Since these are not trivial topics, I recommend that you get some experience through courses that set up the web development environment for you.

What is React.js?

React.js is a JavaScript library that is used to create user interfaces. It is a package of code that adds functionality to the websites. It is designed to do one thing well: build user interfaces (UIs).

Why do Developers (and End Users) Love React?

woman happily working at computerReact provides an effective and efficient means of updating the DOM. Rather than rebuilding the DOM every time the app changes, React builds a “virtual DOM” and updates only the parts that change. Because it holds the different versions of our user interface in memory, it compares the two versions and renders only our changes to the real DOM tree. And this is what makes React so fast: it only updates the changes. Updating changes is much faster than rebuilding an entire DOM tree. From an end user standpoint, React web apps provide a seamless experience, thanks to its speed and efficiency.

How are React Web Apps Built?

You may have read that React is component based. This means that we can break a user-interface down into small parts or components. As web developers, we can design, build and test one component, and when we’re certain it works, we can use it in multiple web applications and share it with other web developers. Rather than continually re-build the different parts of our web applications from scratch, we can reuse these components when we design our user interfaces. Component-based web development makes creating a large web app more manageable, allows teams to work efficiently, and makes it easier for developers to share their code.

How to Learn React.js

When learning a new programming language, library or framework, it is perfectly acceptable to start out with free courses and tutorials. Doing so gives you a feel for the new skill set you’re learning and can provide immediate feedback as to whether or not you want to invest the time in learning the skill. Before you dive into React, however, there are a few key JavaScript concepts that you will need to have some experience with in order to use this powerful library well.

React Prerequisites

This brings up an important consideration: many aspiring web developers want to jump right into the cool JavaScript libraries and frameworks, a trend pointed out by both Anthony Alicea and Colt Steele, two of my favorite JavaScript instructors. And they are right: unless you have an advanced-beginner to intermediate experience with JavaScript, you will struggle with understanding the functionality of the React library. Some React.js pre-requisites include:

If you don’t have experience yet with these JavaScript concepts but are just dying to learn React, I have a solution for you. You can start with Maximilian Schwarzmüller’s course React 16 – The Complete Guide as long as you consider yourself an advanced beginner with the JavaScript language. Before diving into React, Schwarzmuller includes a 45-minute tutorial on ES6 that will help bring you up to speed.

Free Sources to Learn React

If you’d like to try React out before purchasing a course, one learning platform where you can dabble with React for free is the Codecademy. They have two tutorials on React: Learn ReactJS: Part I and Learn ReactJS: Part II. If you find these courses too challenging and you need to brush up on your JavaScript skills, you can switch paths and complete the 35-hour JavaScript tutorial first.

The self-guided tutorial through Reactjs.org is another option, during which you’ll build an interactive tic-tac-toe game. In the documentation, you can learn how to use the Babel REPL to compile your ES6 code so that it will run in the browser. This negates the need to run React from a server or a local web development environment. These are more advanced topics that we will revisit in a future article that will be Part 2 of this series.

Continue Forward with a Premium Curriculum

The free resources at Codecademy and Reactjs.org are a great places to start. When you complete these tutorials, however, it is unlikely that you’ll be able to build anything comprehensive on your own. The next step is to invest in a long course or a decent series of courses. Once you are feeling comfortable with JavaScript and you have completed either to Codecademy React curriculum or the tutorial at Reactjs.org (or you have gone though both sets of training), you are ready to learn how to work with React at a deeper level. My favorite series of courses for getting into React more deeply is Maximilian Schwarzmuller’s React 16 – The Complete Guide.

Even though you’ll be familiar with introductory React at this point, Schwarzmueller discusses in which capacities React is a good choice for web developers, as well as alternatives you can consider depending on what you want to accomplish. I think this is a great approach. There are many times when we, as web developers, get enamored with the next hot thing. We want to learn the new technology, but sometimes we forget to do our research to figure out if it’s the best tool for our goal.

From engaging in the thought process of why you should choose React (or something else) through testing and deploying a React.js app, by the time you reach the end of Schwarzmueller’s 30+ hour course, you’ll have quite a bit of practice with this exciting, challenging library.

I will also add that while I am a huge fan of Treehouse, I do not recommend that you try to learn React through their React path. Treehouse is absolutely wonderful for brushing up on JavaScript, but students have reported some issues with their React courses. I tried them myself and noticed that because some of the videos are quite long, the code-alongs are problematic because it is very difficult to debug the code if there is an error. It is important to test your application in the browser continuously while keeping your JavaScript console open so that you can debug the errors as they arise. I cannot stress that enough. You will save yourself a lot of time and frustration if you are selective with the courses that you pursue!

Next Steps

If you are attempting to learn React and have not used it before, begin with the JavaScript prerequisites, and either taking the free courses on Codecademy or participating in the self-guided tutorial from reactjs.org. You will then be ready to gain an additional thirty hours of experience through the well-curated Pluralsight React curriculum.

Once you’ve taken a comprehensive course in React.js such as Schwarzmuller’s course, you’re ready to start developing React web applications on your own computer. This requires server-side rendering, which is not a trivial topic. As I mentioned, I will explore this in an upcoming article, so be sure to check back. In the meantime, if you have questions about any of the courses or resources, feel free to contact me or leave a comment below.

Similar Posts

18 Comments

    1. Hi Kay,
      Great question. React is a JavaScript library, which means the syntax we use for it is an extension of the JavaScript language. Thus, it cannot be used with other programming languages. Another thing to keep in mind is that React focuses on user interfaces and it runs in the browser, as does JavaScript. If you have any other questions about React, feel free to let me know.
      Laura

    1. You’re welcome — best of luck to your son as he starts learning. Please feel free to contact me if you have any questions.

  1. Laura,
    This sounds very complexing to people who are unfamiliar with JavaScript. I feel that you are trying to make people aware about the software but to someone who doesn’t really understand this technology at all, it is very new. I understand that it builds user interface but I really don’t know what that means. I would definitely like to learn more about what you study and ways that React.js will improve my life in the future. I guess this is best for people who understand tech language but I really liked some of the things that you mentioned about this new application.

  2. That’s really great post. Have not really heard about React before. But this post gave some introduction on what is it about. Good to know about some of JavaScript library. I would definitely get some time to go through the tutorials, probably the free ones before I move further. Will like to see some of the web developers using React, just want to check out the design.
    Thank you, nice post.

    1. You’re welcome. Starting with free resources is a good way to begin. If you find that you like it, you can try one of the paid courses.

  3. It’s been a long time since I have programmed javascript and I think it is about time I get back into it.

    There is no greater feeling that understanding a programming language, writing a few lines of code and watching your creation come to life!

    I have used Codecademy before and I found it to be a great free learning resource for coding. I think my only question would be: Why should someone looking to learn how to code choose pluralsight over say Linda . com?

    1. Lynda.com is a fine resource, and I’ve used it myself. I have, however, had a number of problems using their website. There are numerous browser issues, particularly with Chrome. I started noticing this after they merged with LinkedIn. The course pages would freeze, the scroll bar would disappear, etc. Every time I contacted support, however, they wrote back and said they couldn’t duplicate the issue and couldn’t work to resolve the problems. I think the quality of their courses is quite good, but based on my experience, I recommend them with reservations.

  4. Hi Laura,

    Which one is more complex based on your experience, C++ or javascript? i know maybe not many people use C++ now but i think that is one of a good coding language that i learnt when i was in uni

    Do you think react.js is easy to learn?

    1. Hi Elbert,

      To be perfectly honest, I am not a C++ expert, so it would be difficult for me to answer how it compares to JavaScript in terms of its difficulty. I am a big fan of C, however, and encourage those who are new to programming to give C a try. It is significantly less complicated than both C++ and JavaScript. 

      As I mentioned in my article, you have to be very comfortable with JavaScript to take on React. You need to be familiar with the new ES6 syntax, which can take some time to learn. If you’re familiar with ES6, then you’re very likely ready to learn React. I mentioned a list of concepts in my article, so if you look into those items and feel confident, then go for it! Good luck, and thanks for visiting.

  5. Amazing! the React.js seems helpful and efficient. I like how there’s tutorials for people so they don’t have to learn it themselves too. Thank you for sharing this post, I’m glad I learned something new!

    1. You’re welcome! The courses are actually designed so that you can learn React. A good course will walk you through the basics and then provide challenges for you to complete on your own.

  6. Thanks for the information Laura! I worked with javascript in the past and in my previous job, I did some Angular JS. It was pre-Angular 2. I heard about React JS there, but never got the chance to work much with it. Is there any similarity between Angular and React JS? Maybe after I learn Angular 2 or beyond (I think it’s up to Angular 5), I’ll consider React JS.

    1. Hi Kevin, Like jQuery, React JS is considered a JavaScript library, and it’s used specifically for building user interfaces. Angular, on the other hand, is a framework that you can use to build single-page web applications. In deciding which one to concentrate on, I would advise to begin with your end goal in mind: Do you want to build a single-page web app or are you trying to enhance a user interface? If you are planning to use your skills to either land a job or a freelance gig, it is also worth noting that JS frameworks and libraries go in and out of fashion, depending on where you live and what the hot technology is trending at the moment. A little research on a local job site for web developers will tell you what is in fashion. Do you see Angular JS listed regularly or React? This will tell you which will lead to the most current opportunities currently. Good luck!

  7. Hi! It’s an interesting article, I just started at React 2 weeks ago, and learning javascript on the process, but I have a question, what backend language would you recommend me to use with ReactJs?

    1. Great question! React is a front-end library that works well with just about any backend language. If JavaScript is the first programming language you’re learning, you can use node.js, which is server-side JavaScript. At some point, you’ll probably read about the MERN stack. This refers to the full stack of JavaScript technologies that work together:

      • The M refers to the Mongo database
      • The E refers to Express, a server-side framework that works with node.js
      • The R refers to the React.js front-end library
      • The N refers to node.js, which is server-side JavaScript

      You do not need to use JavaScript, though, to build the back end of an application that uses React.js. You could just as easily use Python, PHP, C# or Java for the back end. JavaScript (node.js) is just an obvious choice if you are already familiar with the language. Good luck with learning React and building your web app! If you have any other questions, please feel free to contact me.

Leave a Reply

Your email address will not be published. Required fields are marked *