Services
Book a meeting
ServicesPortfolioAbout usCareersBlogBook a meeting
Technology

All the fundamental React.js concepts, jammed into this single article

Article Author Image

David Cuklevski

16 Jun, 2021 • 4 min read

This article is an adaptation of an interactive guide at jsComplete.com/react-intro. The jsComplete version has embedded code examples and links to navigate the content.

Article Main Image
Before you begin, please note that this is a beginner-friendly guide that covers the concepts I classify as fundamentals for working with React. It is not a complete guide to React but rather a complete introduction. At the end of this guide, I list a few next-level resources for you. This guide will pave the way for you to understand them.
React is defined as a JavaScript library for building user interfaces. Let’s start by talking about the two different parts of this definition. React is a JavaScript “library”. It is not exactly a “framework”. It is not a complete solution and you will often need to use more libraries with React to form any solution. React does not assume anything about the other parts in any solution. Frameworks serve a great purpose, especially for young teams and startups. When working with a framework, many smart design decisions are already made for you, which gives you a clear path to focus on writing good application-level logic. However, frameworks come with some disadvantages. For experienced developers working on large codebases, these disadvantages are sometimes a deal breaker. Frameworks are not flexible, although some claim to be. A framework usually wants you to code everything a certain way. If you try to deviate from that way, the framework usually ends up fighting you about it. Frameworks are also usually large and full of features. If you need to use only a small piece of them, you have to include the whole thing anyway. Admittedly, this point is changing today but it is still not ideal. When React was released, there was a lot of buzz about its performance because it introduced the smart idea of a virtual DOM that can be used to reconcile the actual DOM (and we’ll talk about that in the next section).

DOM is “Document Object Model”. It’s the browsers’ programming interface for HTML (and XML) documents that treats them as tree structures. The DOM API can be used to change a document structure, style, and content.

The React language

Say that we have a list of TODOs like this one:
This array is the starting state of your UI. You’ll need to build a UI to display them and manage them. The UI will have a form to add new TODOs, a way for you to mark a TODO as complete, and a way to remove all completed TODOs.
To do List App Screenshot
Each of these actions will require the app to do a DOM operation to create, insert, update, or delete DOM nodes. With React, you don’t worry about all of these DOM operations. You don’t worry about when they need to happen or how to efficiently perform them. You just place the array in the “state” of your app then use the React language to “command” React to display that state a certain way in the UI:
Besides the declarative outcomes-based language and the efficient tree reconciliation, here are a few of the other reasons why I think React gained its massive popularity:
  • Working with the DOM API is hard. React gives developers the ability to work with a “virtual” browser that is friendlier than the real browser. React basically acts like your agent who will do the communication with the DOM on your behalf.
  • React is often given the “Just JavaScript” label. This means it has a very small API to learn and after that your JavaScript skills are what make you a better React developer. This is an advantage over libraries with bigger APIs. Also, the React API is mostly functions (and optionally classes if you need them). When you hear that a UI view is a function of your data, in React that’s literally the case.

The React language

Instead of working with strings to represent DOM elements (as in the native DOM example above) in React we represent DOM elements with objects using calls to the React.createElement method. These objects are known as React elements.The
React.createElement
function has many arguments:
  1. The first argument is the HTML “tag” for the DOM element to represent, which is
    div
    in this example.
  2. The second argument is for any attributes (like
    id
    ,
    href
    ,
    title
    , etc.) we want the DOM element to have. The simple
    null
    we’re using has no attributes, so we used
    div
    in there.
  3. The third argument is the content of the DOM element. We’ve put a “Hello React” string in there. The optional third argument and all the optional arguments after it form the children list for the rendered element. An element can have 0 or more children.
That’s it. Believe it or not, with what you learned above (or parts of it, really), you can start creating some interesting React applications. If you’re hungry for more, check out my Learn React.js by Building Games book!

Share

Article Author Image

David Cuklevski

16 Jun, 2021

Share

More from Ludo

Sugested Article Main Image

18 Apr2 min readCompany

Author Image

David

CEO & Co-Founder

Sugested Article Main Image

05 May3 min readCompany

Author Image

David

CEO & Co-Founder

©2022