Accessible React Tutorial Series for All Devs (Part 1): Intro!

Mathspy Terabithian — Tue, 26 Feb 2019 22:44:39 +0000

Hi there!

A brief introduction for this tutorial series: React is an awesome JavaScript library for creating all kinds of interactive websites. It's sadly feared by a lot of developers, because it's often introduced with a lot of other new concepts that aren't actually related or needed for using React!

So this series aims at being accessible to anyone with basic HTML/CSS/JS knowledge. It assumes 0 previous knowledge about all of other concepts often associated with React (yes if you know only HTML/CSS/JS you're good to go!)

This series was heavily inspired by another accessible series about Vue (Vue is another awesome framework that is very similar to React)
If you'd like to learn it please check that series out!

What are we waiting for? Let's go!

To follow along you can either open any local text editor (yes including Notepad!). A pretty good free, open source editor is VS Code.
OR if you don't want to, or can't download an editor you can follow along on this online code editor which I prepared in advance! (Simply start editing index.html) (Side note: Codesandbox.io is actually made with React 🤭)

So all we need to get started (and for the foreseeable future) is a blank slate HTML file with a script reference to React and ReactDOM, and our own script tag to write code. (If you're using a local text editor save this anywhere and open it with your favourite browser)

<html>
  <head>
    <meta charset="UTF-8" />
    <title>My First React App</title>
  </head>

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

    <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>
      // Our code will be here!
    </script>
  </body>
</html>

Along the series I will be including these "extra" sections that aren't necessary (you can totally ignore them!) but will give interesting insights.

EXTRA: so if you ever used other libraries like jQuery or p5.js you might be wondering why does React need TWO scripts instead of one?
Well think of React as our fancy super battery that we can put inside a lot of different toys to make them run! Those toys are completely useless without their battery, but the battery is compatible with a wide array of toys. In this case the toy we are gonna be playing with is DOM (short for Document Object Model, which honestly in this context is just a fancy way to say HTML)

So let's start as simple as it can be!

<script>
  // Our code will be here!
  var app = document.getElementById("app");

  ReactDOM.render("Hello World!", app);
</script>

(Don't forget to save changes and refresh the page)
You should see this:

Okay so what's going on here? Well, firstly we ask the browser to give us a reference to our <div id="app"></div> and we save it in a variable called app. Then we simply ask React, “Hey can you render "Hello World" into this div?”
React happily replies:

Your words are my command! You ain't never had a friend like me!

Well that's cool and all but not very exciting, let's try something a little more exciting!

<script>
  // Our code will be here!
  var app = document.getElementById("app");

  var hello = React.createElement("h1", null, "Hello World!");

  ReactDOM.render(hello, app);
</script>

Now we are asking React to create for us an element (which is a generic word for anything we can ask React to render. Elements can be any HTML tag (or other things we will look into later!)). In this case our element is going to be an "h1" (Header1).
Well what about that null and the "Hello World!"? We will dive deeper into what we can replace the null with in the next part! But "Hello World!" is what React calls children

<h1> <!-- parent -->
  <!-- everything here is a child of h1 -->
  <!-- children can be simple text/strings like "Hello World!" -->
</h1> <!-- end of parent -->

So we basically asked React to render for us a simple <h1>Hello World!</h1>

Okay, one more example! This time let's render a list! I need to go buy potato and tomato from the supermarket tomorrow and I wanted to make a list of that, let's go!

In pure HTML it might look something like this, right?

<ul>
  <li>Tomato</li>
  <li>Potato</li>
</ul>

Hmmm... I wonder how can we ask React to nest tags like that? Well, elements' children don't have to be pure text! They can also be other elements!

<script>
  // Our code will be here!
  var app = document.getElementById("app");

  var tomato = React.createElement("li", null, "Tomato");

  var list = React.createElement("ul", null, tomato);

  ReactDOM.render(list, app);
</script>

But how can we include TWO children for a single element? Well React doesn't mind if you pass it any number of children for an element!

<script>
  // Our code will be here!
  var app = document.getElementById("app");

  var tomato = React.createElement("li", null, "Tomato");
  var potato = React.createElement("li", null, "Potato");
  var regret = React.createElement("li", null, "Something I will buy and regret later 😭");

  var list = React.createElement("ul", null, tomato, potato, regret);

  ReactDOM.render(list, app);
</script>

That's all for today! I know you're probably asking yourself now "but what even is the point?" and you're right, so far we did nothing exciting or interesting that you can't do with pure HTML in less time but that will change in next part when we learn about props and components! Stay tuned!

Please feel free to ask me anything in the comments!

DEV Community: Mathspy Terabithian

Accessible React Tutorial Series for All Devs (Part 1): Intro!