React Barebones Hello World Tutorial - Part 1
Tags: react, webdev, tutorial
Published: 2020-03-27 20:53:54

### 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](https://github.com/design2soft/react-bare-bones)

### 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](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web)
[React Tutorial - Adding React to a website](https://reactjs.org/docs/add-react-to-a-website.html)
[Repository](https://github.com/design2soft/react-bare-bones)