Published on Fri Sep 25 2020
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!
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.
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 <p></p>
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
.
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>
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.
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!
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 <p></p>
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.
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.<p></p>
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.
p
HTML Node, you need to use a p
React element. <P>
is not a valid React element. 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.
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 <P>...</P>
. React sees that the rendered value is a Component and evaluates that instead of using a paragraph
element.
Hence components
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.
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!