Comments

What is React and why you should learn it!

If you’ve been following my blog, you’ve noticed that I have a number of tutorials and courses about Angular. I never liked Angular 1 or AngularJS but thought Angular 2 is a framework in the right direction. So I adopted it since its beta release. Recently, however, I started using React and fell in love with it! So, over the next few weeks, I’ll be writing a series of posts about this awesome library. Let’s get started!

What is React?

React is a JavaScript library for building fast and interactive user interfaces.

It was developed at Facebook in 2011 and currently, it’s the most popular JS library for building user interfaces. Here’s a comparison of the top 3 libraries/frameworks for building user-interfaces: React, Angular and Vue:

React vs Angular vs Vue

As you can see, it is dominating the space. So, if you want to expand your job opportunities as a front-end developer, you should have it on your resume.

Architecture

At the heart of all React applications are components.

A component is essentially a piece of the user interface. So, when building applications with React, we build a bunch of independent, isolated and reusable components and then compose them to build complex user interfaces.

Every React app has at least one component, which we refer to as the root component. This component represents the entire application and contains other child components. So, every React application is essentially a tree of components. If you’ve worked with Angular 2 or higher, this should sound familiar!

A Real Example

Here’s an example. Let’s imagine we want to build an application like Twitter. We can split this page into components like NavBar, Profile, Trends, and Feed. Here’s a representation of these components in a tree.

React Component Tree

So, on the top, we have App. This component has 4 children: NavBar, Profile, Trends, and Feed, which includes several Tweet components. Each Tweet component can include a Like component, which we can re-use on other pages or even in different applications!

So, as you see, each component is a piece of UI. We can build these components in isolation and then put them together to build complex user interfaces.

Show Me the Code!

OK, I know you’ve been curious what the code looks like. A component is typically (but not always) implemented as a JavaScript class that has some state, and a render method.

class Tweet { 
   state = {};
   render() { 
      // Here we return a React element 
   } 
}

The state here is the data that we want to display when that component is rendered. And the render method, as you can tell, is responsible for describing what the UI should look like. If a component doesn’t have a state, we can implement it using a pure function instead of a class. More on this later.

Virtual DOM

The output of this render method is a React element which is a simple, plain JavaScript object that maps to a DOM element. It’s not a real DOM element, it’s just a plain JS object that represents that DOM element in memory.

So, React keeps a light-weight representation of the DOM in memory. We refer to this as the virtual DOM. Unlike the browser or the real DOM, this virtual DOM is cheap to create. When we change the state of a component, we get a new React element. React will then compare this element and its children with the previous one, it figures out what is changed, and then, it’ll update a part of the real DOM to keep it in sync with the virtual DOM.

React vs Vanilla JavaScript/ jQuery

So, that means when building applications with React, unlike vanilla JavaScript or jQuery, we no longer have to work with the DOM API in browsers. In other words, we no longer have to write code to query and manipulate the DOM or attach event handlers to DOM elements.

const element = document.querySelector('#course');
element.classList.add('active');
element.addEventListener('click', ...);

We simply change the state of our components, and React will automatically update the DOM to match that state.

React vs Angular 2+

React and Angular are similar in terms of their component-based architecture. But Angular is a framework or a complete solution, while React is a library. It only takes care of rendering the view and making sure that the view is in sync with the state. That’s all React does, nothing less, nothing more! For this very reason, it has a small API to learn.

So, when building applications with React, we need to use other libraries for things like routing or calling HTTP services and so on. But this is not necessarily a bad thing, because you get to choose the libraries that you prefer as opposed to being fixed with what Angular gives you, which often breaks from one version to another!

That’s it for today. Stay tuned for the next post!

Hi! My name is Mosh Hamedani. I’m a software engineer with two decades of experience and I’ve taught over three million people how to code or how to become professional software engineers through my YouTube channel and online courses. It’s my mission to make software engineering accessible to everyone.
Tags:

42 responses to “What is React and why you should learn it!”

  1. Joel Morgan says:

    Hi, Mosh! I’m currently working through all of your Udemy courses one-by-one. Please, take all my money! 😀 Seriously, I really appreciate your instruction style and am learning so much from your courses.

    So, I’m very interested in your new React course. I’m actually in the process of building a web app and am trying to decide between React and Angular. One thing that concerns me about React is that it seems to be sort of the “wild west” currently, with a very new user community and, therefore, little support and few places to find answers for those of us who have a tendency to get stuck. 🙂

    Could you (or someone here) address the future of support for React? Obviously, React is experiencing a very high adoption rate. Is it reasonable to expect that the support community for React will become a bit more stable in the near future?

    Thanks!

    Joel Morgan

  2. Sasank JOnna says:

    do u have a course on REACT?

  3. Dave Kittle says:

    Thanks for this! I’ve been curious about React…these posts could be just what pushes me over the edge!

  4. Hubert says:

    Thanks a lot Mosh from central Europe! I love your content which is very valuable and keeping things simple! Keep on doing that!

  5. lvlessi says:

    HEY MOSH ! the way you teach i’d like you to make a course on iOS & Swift. but unfortunately that is not you line because i’ve not seen any android or ios course 🙁

  6. Efron says:

    Will you be releasing any updates to your ASP Net Core + Angular course? Specially with the Material design out there, the update would be much needed.

    • Mosh says:

      Not really! It’s a waste of my time to create videos on things like Material Design that constantly break from one version to another! I’d rather spend my time simplifying complex things for you guys than things that you can learn on your own from the documentation.

  7. oliviel valdez says:

    I am waiting for your new course of react I am learning react right now but I wanna learn in the way you teach is simple and clear so I will keep the track of the development of the course.

  8. This whole framework thing is getting out of hand. There are now three major ones and one is expected to be proficient in all three, plus the gimmicks of testing to be considered a front end expert. Good luck being a full stack. Plus everybody is changing everything almost daily, breaking your code. Must the JavaScript world be such ridiculously unpredictable?

  9. Suresh says:

    I want to learn a jquery can u start a new course on that.

  10. Dan says:

    Thanks for the lesson. I will look forward the course in July. I really got a lot about your Angular tutorial on Udemy as well. You might also want to check out Vue, if you haven’t already. From what I can tell, it’s like Angular-lite with a few concepts from React thrown in. Would love to hear your thoughts on it. Also that graph in the article labels React but it doesn’t say which of the lines in Angular and which is Vue. Would you happen to know? Thanks!

    • Peter says:

      I second the VueJS. I am trying to learn it and following other Udemy courses but I do like how Mosh teaches. Hoping for one in the future…but I won’t hold my breath. 🙂

  11. @Mosh I was expecting comparision of Angular Vs Reach in this article 🙂 ?

  12. Senthil says:

    Thanks a lot Mosh. I developed interests in front end developing after watching your Angular Video. Waiting for your react course. !!

  13. Thanks a ton Mosh from India. Your Udemy course is awesome. Do u have a course on Polymer?

  14. Matt says:

    Hello Mosh, what are yours plans in Design Patterns C# Course ?

  15. milan says:

    This post looks great. Can’t wait to sign up for it. I would love to learn React and build something out of it.

  16. ASIF says:

    Mosh is my Love. i don’t have any words to say….Just LOVE

  17. Thanks a lot Mosh fromm India. I’m so excited for your React Tutorial. Currently I’m studying your Angular Tutorial. 🙂

  18. Amber SIngh says:

    What will be the time duration of this course?

  19. Aidin says:

    Hello Mosh 🙂
    Do you have Any course about ASP.NET Core + MVC6 or can we expect something like this ,maybe later this year !
    Thanks in advance:)

  20. tinhcao says:

    Hi Mosh,
    I’m very happy to hear that. I’m an backend developer for 7 years and now I want to learn about frontend. First I start with your Angular course on Udemy, then I found that I should learn something like NodeJS before I learn Angular. So I take your NodeJS course. And after that I see I also need knowledge about JS core, then I found you have two JS core course, so I decided to subscribe your site with 1 year. Hope I can become a frontend developer after one year.

    Thank,
    Tinh

  21. Soumya Dey says:

    Hi Mosh, what all things will be there in your upcoming React.js course? Will it be only React or React+Redux or React+React Native? I am curious to know this.

  22. Pankaj Kumar Sharma says:

    Mosh can you please tell the exact date ?

  23. Cody King says:

    Looking forward to your React course. Do you have any recommendations for what libraries you’d use to fill out the needs other frameworks usually cover? Also, do you have any courses that concentrate on writing better code instead of specific languages? (Design Patterns, SOLID, Architecture?)

    Thanks!

  24. Yitzchok says:

    Mosh, Mosh keep it up, I’d never seen someone explaining things so clear and to the point, like you….!!!

  25. Dharm says:

    Just wanted to understand license of commercial usage. If you can help to know how to identify which we can use then it will be lot helpful while deciding the library and frameworks.

  26. Ali Ghaffari says:

    Please make a complete real world project to teach better in the world.Because until and unless if student not make a our own project then he is not able to learn any language.
    So please make a complete whole project in your tutorials like School Management System, Hospital Management System, Library Management System or Restaurant Management System etc.
    Thanks!

  27. Ivan koretskyy says:

    Hi, Is it possible for you, to publish this course on pluralsight ?

  28. Mwa Joe says:

    What’s the difference between the benefits React is bringing and BackboneJs?

  29. Shiv Om Pal says:

    Hi Mosh,

    When will you publish react advance course?

Leave a Reply

Connect with Me
  • Categories
  • Popular Posts