React Barebones Hello World Tutorial - Part 1

Design2Soft — Fri, 27 Mar 2020 20:53:54 +0000

Purpose

The goal of this series is to learn React, by building a minimum tooling React application. The focus is to use minimum external libraries and to build it as barebones as possible.

We are going to take a step by step approach from an initial repository setup to a fairly advanced final application. There will also be information available on the development environment that was used and the corresponding learning links.

What we will not touch upon

We are not going to go deeper into how React works in this page. We will touch more on that in subsequent tutorials.

Initialization Step

A github repository was setup with an initial readme. The repository can be accessed here

Setup `index.html`

An initial index.html file was added with basic Hello World. Currently, there is no React or any other javascript library being used. This only sets up an initial page. The page can be accessed directly from the browser by opening the index.html file.

Setup `React` and `ReactDOM` libraries

We now will add React to our website. This is done by adding 2 libraries: React and ReactDOM. The libraries are added directly to the index.html file via script tags as below:

<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>

Write custom javascript for adding `Hello World`

Up until now, we have only given our page access to the React and ReactDOM libraries. We have not yet used these libraries to render anything on our page.

React uses javascript DOM API for adding content dynamically to your web pages. In our case, we want it to add a Hello World to React text to somewhere in our index.html. For deciding what to render, we use that is known as Components in React. We add the helloWorldComponent to our custom javascript file as below:

const helloWorldComponent = () => "Hello World from React"

We now need to tell React where to render it. For this, we add an id to a container element in our index.html file. We then ask React , more specifically ReactDOM, to insert our component into this place as below:

const domContainer = document.querySelector('#app') ReactDOM.render(React.createElement(helloWorldComponent), domContainer)

Link the custom javascript into `index.html`

We do this by passing a reference to the javascript file we wrote inside a script tag.

<script src="scripts/hello-world.js"></script>

What do we do next

This was just a basic setup. The next tutorial is going to add further CSS to our project. Slowly, we are going to improve our understanding of the React libraries and ecosystems.

Reference Links

Mozilla Developer Network HTML Introduction
React Tutorial - Adding React to a website
Repository

DEV Community: Design2Soft