kelvinsekx
RETURN TO ARTICLES

Digging MERN I: hello world

^(* ! *)^ 7 minutes read
Last modified on Sat, October 24,2020

This is an introductory mern stack tutorial that will happen in phases. By the end of this long tutorial, we would have created a mern stack project, a complex and powerful blogging platform with the mern stacks.

Although long, I will do my best to keep every part small and consized. It will be painless trust me.

This tutorial is the first part of many parts. If you follow to the end, It will for sure look good on your resume and help you and I understand mern even more.

As it is customary, this part 1 will start with the simple and amazing Hello World application. We would be using react to render the Hello Page and use express to serve the web server.

HelloWorld

To start off, we would build a simple HelloWorld application with no installation, no downloads and no servers either.

All that you will need is a modern browser and a weak internet.

First Step

Start by creating an HTML file with a simple bootstrap html code and name it index.html

You can use any favourite editor of your choice and save the file anywhere. In fact, you can use vim editor on the terminal. See mine here.

<!-- index.html -->

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <h2>Hello World</h2>
    </body>
    </html>

Serverlessly Hello World

In the section above, Hello World was statically written and that's below our aim.

Instead of been static, we can leverage on React and ReactDom to make it even more awesome and dynamic instead of being statically dumped.

To achieve this, we would use the development version of the React and ReactDOM libraries from http://www.unpkg.com/browse/react@16.13.1 and put them into the head element of our index file.

<!-- index.html -->
    ...
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

        <title>mern and sekx</title>
    </head>
    ...

Next, within the body, let's create a div that will hold the react component.

<!-- index.html --> 
<!-- I named mine ___root, but you can name your's any unique name -->

    ...
    <body>
        <div id="___root"></div>
    </body>
    ...

Note: It is advisable for now that the div be empty and pass an id to make the element unique to react.

React.createELement

To write react, it is important to understand some of its syntax.

React creates element with a function similar to the dom method, document.createElement.

That of react is React.createElement.

Note: You should notice the only difference is the change of document to react between the two functions.

React.createElement takes three arguments.

  1. type. this can be any standard html element tag, custom element tag, or react.fragment.

    BEWARE###: Do not forget to always write standard html tags in lowercase letters all through. e.g 'div', 'p', 'small' etc. And custom tags in Camel case letter e.g 'BanWrapper', 'ContainerPlace' etc. This is how react best distinguishes standard html elements from custom elements.

  2. props. props is a javascript object that can be an html attribute or a customized variable passed to a component.

  3. children. these are other nested or inherited components.The children are elements creatable with createElement.
React.createElement(type, [..props], [...children])

Learn more about props

BACK TO CODE

We can now replace our previous hard-coded hello world with react.

<!--  index.html --> 
    ...
    <body>
        <div id="___root"></div>

        <script>
          React.createElement(
              'div'
              null,
              React.createElement(
                  'h1',
                  {title:"Hello"},
                  null
              )
          )
        </script>
    </body>
    ...

However, this still doesnot do the work. If you reload your browser everything should be blank. To make react render the elements we just created, there is a need to make use of the ReactDOM. This helps us to convert the elements from the virtual DOM to the browser DOM.

// index.html
    ...
    <body>
        <div id="___root"></div>

        <script>
        // pass the created element into a variable
          const Elem = React.createElement(
              'div' // type,
              null,
              React.createElement(
                  'h1',
                  {title:"Hello"},
                  null
              )
          )

        <!-- new changes-->
          ReactDOM.render(Elem, document.getElementById('___root'))
        <!-- -->
        </script>
    </body>
    ...

After you done that, everything should work right. Try and reload the browser. Your complete code should look like this:

<!-- index.html --> 

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script crossorgin src="https://unpkg.com/react@16/umd/react.development.js"></scipt>
        <script crossorgin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></scipt>
        <title>mern and sekx</title>
    </head>
    <body>
    <!-- replace hello wold with the div -->
        <div id="___root"></div>

        <script>
        // pass the created element into a variable
          const Elem = React.createElement(
              'div',
              null,
              React.createElement(
                  'h1',
                  {title:"Hello"},
                  null
              )
          )

          ReactDOM.render(Elem, document.getElementById('___root'))
        </script>
    </body>
    </html>

Bigger possibilities with JSX

With our previous code, things look fine but soon it will become difficult to keep adding components with the react.createElement(). I only opted for it because it would help us understand React better in my opinion.

If we decide to add more components this way, things can get really clumpsy. This is where JSX shines.

JSX helps to abstract the complicated syntax with writing React.createElement and makes our code look similar to HTML.

Besides, JSX is not a replacement for html. In fact it is not html in any way.

Learn more about JSX

Let's re-write our previous code to take advantage of the wonders that come with JSX.

<script>
    // pass the created element into a variable
    const Elem = (
        <div>
            <h1 title="hello">Hello World</h1>
        </div>
    )

    ReactDOM.render(Elem, document.getElementById('___root'))
</script>

If you reload the browser, you should see a screaming error and the page would not load.

To compile things, we need a compiler. In our case, let's fast forward and just use Bael transcomplier for javascript.

Babel is cool to compile JSX and let's do the compilation with Babel then.

Since we are doing this serverlessly, let's import another link into the head.

<head>
...
    <script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
...
</head>

You can reload the browser now.

Note: If your page took few more minutes while loading?? DONOT PANIC. This is because JSX needs to be compiled to javascript.

But OOPS things still donot work.

You know why?? This is because babel needs to be told what script it should compile.

To inform Babel what scripts it should compile specifically, an attribute, type="text/babel", needs to be added to our script.

...
    <script type="text/babel">
    ...
    </script>
...

Everything should look good now. Our final code is below.

<!-- index.html --> 

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>mern and sekx</title>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
    </head>
    <body>
        <div id="___root"></div>

        <script type="text/babel">
        const Elem = (
            <div>
             <h1 title="hello">Hello World</h1>
            </div>
         )

          ReactDOM.render(Elem, document.getElementById('___root'))
        </script>
    </body>
    </html>

What is Next??

This part is sure too long for our first step. I will cut it short with time. But at that, it is just long enough to keep us ready for fun ahead.

Next, YOU and I will make a quick setup for our big mern app.


**Joke Time : dedicated to my friend Boluwatife**

If life were to be human, it would have been a black woman

How do I know??: ): Urrgh, it simple

  • A blackwoman is not fair
  • A blackwoman is tough
  • A blackwoman is beautiful

**What if I interview you : little quick questions I try and answer myself**

Mention three (3) means by which we can pass styles to a react element. What way seem to be the most efficient??

Closing Note:

On a bye note for now, hope you had fun learning and learnt something new.

Digging MERN is important today than nerver before. When the MERN stack started it was very minimal and was easy to learn the basics. Today the MERN is larger than they thought it to be and it is easy not to learn the basics.

Edit this page


    Kelvinsekx.codes is built, maintained and written by Ukuejubola Kelvin Oritsetimeyin.

    Icons from www.flaticon.com