I use various web technologies in my day to day work. From WordPress, Ghost to Jekyll. And it gives me the unique perspective how other developers see different web technologies. I noticed that it is quite difficult for some WordPress developers to adapt to JavaScript stack. This comment from the “WP Tavern” discussion illustrates it perfectly:

How can I program a Gutenberg block without all this npm and node and whatever files, on Windows with Notepad++, which I use since 5 years to develop all kind of plugins and themes? source

If you feel the same way but still want to learn React this post is for you. You can start learning it without installing anything, just with a simple index.html file. I will show you how.

Important to note! Use this method just for learning not for production.

The Super Simple Setup

First, let’s create an index.html file with the basic markup and add React.js and ReactDom (which will help us to render our code to the browser) to the head tag like this:

<!DOCTYPE html>
<html>

<head>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <meta charset="utf-8">
    <title>Hello React!</title>
</head>

<body>
    <div id="app">
        <!-- The div there will render React -->
    </div>
    <script type="text/javascript">
        // The place for React code
    </script>
</body>

</html>

You can get these links from reactjs.org. Let’s use the latest React version 16. One more thing we need to do is to create a div with the ID of “app” (the name of the ID can be anything you like). We will need this div to render our React code. And that’s it. Now we are ready to write a simple “Hello React!” app.

Writing “Hello React!” App

We will render a simple h1 tag with the “Hello React!” text inside, like this:

const title = React.createElement(
    'h1',
    null,
    'Hello React!'
)

Let’s explore the code we just have written. First, we are giving our function name “title”. Inside of the createElement function, we are writing three different arguments. The first is whatever we want to create, our h1 tag. Next, on line three we wrote null (or you can write empty object). You can use it to pass various attributes and properties. In the later posts I will show you how, but now we don’t need it. And the last argument is our “Hello React!” text.

Now we need to tell ReactDOM where to render it. To do it, we will need to target our div with the ID of “app” with the document method getElementById() like this:

ReactDOM.render(
    title, 
    document.getElementById('app')
)

The final “Hello React!” app should look like this:

const title = React.createElement(
    'h1',
    null,
    'Hello React!'
)

ReactDOM.render(
    title, 
    document.getElementById('app')
)

Now open your index.html file in the browser and if everything is OK you should see h1 with the “Hello React!” text.

Congratulations, you have made the first step to learn React.