React is a declarative JavaScript library for building user interfaces. Built by Facebook, React has taken the world by storm and as of today it is one of the most used libraries on the planet.

Some of React's popularity can be attributed to its easy to use JSX syntax which resembles HTML greatly, Facebook, for actively maintaining it and also its very vibrant and welcoming community.

In this very first chapter, I am going to assume that you have some familiarity with HTML and JavaScript as well as programming concepts like functions, objects, arrays and classes. If you aren't familiar with these basics, then I would highly recommend watching my videos on my youtube channel on these topics or referring to other alternatives like Wes Bos, Traversy Media etc.

To follow along this tutorial please write the code in your browser on codesandbox.org, or you can set up a local development environment on your computer.

In this set of posts, let’s take a super quick tour of React and see what we can learn from it!

Using React in HTML

You don't need much to get started with React. Let's create an empty directory called LEARN REACT and an index.html file inside it. Let's paste the following code below into our index.html file.

<!DOCTYPE html>
 <html lang="en">
    <body>       
   </body>
</html>

This sets up a bare minimum boilerplate for our tutorial. Now, let's create a div with id app. This will be our container for our React code.

<div id="app"></div>

To add React to our website or browser, let's copy the code in the React website and paste it in either the head or body tags. This will fetch React into our HTML and we can check it out in the console using console.log(React).

 <!DOCTYPE html>
     <html lang="en">
     <body>
       <script src="https://unpkg.com/react@16/umd/react.development.js"                crossorigin></script>
       <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"        crossorigin></script>
     <script>
       console.log(React);
     <script>
   </body>
 </html>

Easy. The React object contains a ton of stuff but we will just focus on React.createElement for now.

1. React Elements

Since we now have React loaded into our website, let's create React elements. React elements are virtual elements which eventually become HTML nodes. A React element is an object that virtually describes how the DOM node should be created. Let's create a paragraph React element of to display (Hello World). Let's add a script tag right below the scripts we used to import React. And add the following code like so.

<script>
   const paragraph = React.createElement("p", null, "Hello World");
   console.log(paragraph);
</script>

The createElement function within React takes 3 arguments. The first argument is the type of element we want. Since we want a paragraph node which is rendered as  in HTML, we specify p here. The second argument is a list of arguments (called props in React) that we can pass into our paragraph element (We will discuss props eventually). The last argument is what sits inside the paragraph node. We want to display "Hello World", so we pass that as the third argument to createElement.

2. ReactDOM

React is the package to create elements and ReactDOM is the package that converts React elements into HTML elements. In other words ReactDOM is the bridge between React and the HTML DOM Node api. Let's add ReactDOM as a script as well, so our HTML finally has these 2 script tags like this.

 <script src="https://unpkg.com/react@16/umd/react.development.js"                crossorigin></script>
 <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"                crossorigin></script>

react-dom

ReactDOM contains the some of the following methods,

    findDOMNode()
    unmountComponentAtNode()
    hydrate()
    createPortal()

But for now, let's focus on hydrate. Hydrate is the method that takes a React element and the DOM container node we created, namely #app and puts the React elements into the container.

Let's grab the container using document.querySelector method and do the following:

const paragraph = React.createElement("p", null, "Hello World");
const AppDOMElement = document.querySelector("#app");
ReactDOM.render(paragraph, AppDOMElement)

React contains the logic of creating elements and components while Reactdom is the bindings for React to interact with html. There are different bindings for different platforms. Some types of React Bindings include ReactDOM, ReactCanvas and ReactNative.

react-dom-native

3. A step further

Let's now try to create another element and put it inside our paragraph. To put a span inside the paragraph element, we will create an element of type span and assign it to "Hello World" and put that inside of the paragraph.

const span = React.createElement("span", null, "Hello World");
const paragraph = React.createElement("p", null, span);
const AppDOMElement = document.querySelector("#app");
ReactDOM.hydrate(paragraph, AppDOMElement);

It finally looks like this.

Awesome! So we managed to create a couple of elements and render them one inside another. There is just one problem. This code is very verbose. Imagine create a few hundred React elements like this!

Enter JSX

JSX is an abbreviation for JavaScript XML. Its helps us write elements in React in a HTML like fashion. However this syntax requires a tool called Babel which converts code written in JSX(not valid javascript) into Javascript. So as developers we will write  etc in our javascript but browsers will see React.createElement('p') instead. Let's add babel-standalone to our code now as a script and also tell babel to transform our code.

So we are going to do two things here.

Add babel-standalone as a script tag
Change our script tag to a type of text-babel to inform babel to transform this script tag before it is used by the browser. Babel is going to step in here and convert our JSX to plain Javascript.
Finally we create React elements with  JSX syntax which looks almost entirely like HTML. Here is how it looks like.

The major benefit of using JSX is that the code is super concise and you don't have to write React.createElement each time.

However, it is important to note that;

JSX is not embedded HTML

Great, so we created a few elements (p and span) but let's see what we learned so far.

React elements render their corresponding HTML nodes. For eg, if you want a p HTML Node, you need to use a p React element.
React elements start with lowercase.  is not a valid React element.
React elements can be put one inside another.

While React elements are great, managing our entire app as a group of a few 1000 React elements is not a very manageable experience and we need to group them in some way for us to maintain some modularisation in our projects. For this purpose, React has a feature called Components and is the backbone of React.js.

Components

A component in modern React is simply a function that returns other React elements or components. Let's create our first component by grouping the code we created so far.

function MyFirstComponent(){
    return <p> 
       <span> Hello World </span>
    </p>
}

We can now use our component like so.

<MyComponent/>

Note: Component names must start with a capital letter to tell React that these are not elements. For eg: we can create a component called P and render it like so .... React sees that the rendered value is a Component and evaluates that instead of using a paragraph element.

Hence components

are functions which simply return elements or components
are reusable since they are simply functions, they can be rendered many times over and over and the return value of the components are then rendered and so on..
are customisable
are very useful when we are planning our app. We can envision components to be large or small chunks of logic in our code and reuse them over and over. A Toast component, a Dropdown component, Navbar etc.

While components can be created to modularise common logic together, a component can be made to behave differently at different times by using props. We will talk about props very soon, but for now, think of props as arguments to a function. Just like a function can take arguments, components can take props and perform different behaviours based on them.

Here is a our sandbox updated with components.

Tooling makes React awesome

Using React without Babel is painful. Which is why React frameworks like Next.js and CRA(Create React App) come with Babel built into them. They also come with tools like webpack, eslint and more to make our developer lives easier. In short,

Babel is a tool that helps in writing code in the latest version of JavaScript. Since not all enivorments support modern code natively, Babel will help compile those modern features down to a supported version. It also includes JSX to Javascript compilation module in the standalone package.

webpack, is a module bundler whose main purpose is to bundle JavaScript files for usage in a browser. It is also capable of transforming, bundling, or packaging just about any resource or asset. It also helps in chunk splitting and with webapp performance as a whole.

Going forward, we will use a tool called Next.js built and maintained by an awesome team at Vercel. Next.js is a zero config React framework which helps us build production-ready React apps very quickly. I hope this was useful. Tune in for the next tutorial in the series!

Chapter 1: Introduction to React | Delightful React