Hello React

If you are new to React, there are a lot of tutorials out there from which you can learn more about React. What I found that most of them lack is simple React skeleton application, in which you can hack, play and learn more in depth stuff about React.

So let us fix this and let us create the simplest possible React application.

IMPORTANT this is not going to be production ready application, or have backed in all the best practices, this code will be intended for playing, learning and casual hacking around only ;)

Prerequisite

I assume that at this point we have installed NPM and Node.js on our machines. If this isn't the case hit the web and find installation procedure for your operating system. Once you are done continue reading.

Place to show it all

In order to be able to display our working code, we need to add HTML page. Let us create directory public, and in it let us add file index.html with this code inside

<!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>
    <div id="root"></div>
  </body>
</html>

Dependencies

Next thing that we need to do is to define all dependencies, libraries and similar that we are going to use in our application. Let us create file package.json and let us put this code inside it

{
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "^5.0.0"
  },
  "main": "/index.js",
  "devDependencies": {},
  "name": "hello-react",
  "description": "simple hello react application",
  "version": "0.0.0",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Dependencies part of this JSON file defines which libraries we are going to use, in our case that is react, react-dom and react-scripts Scripts block is helper part that allow us to run certain things in an easer way. Name, description and version should be self explanatory.

main part defines what is the starting point of our application, code that need to be executed in order to start our React application. By default this file will be looked up in src directory of root directory, so let us create it and start adding rest of the code.

It all started with the Web, or better said style

Since React application is for the web it shouldn't come as a surprise that we need to create one file that is going to be used for styling, css. Let us create file styles.css inside src directory. Next we are going to add this code to styles.css

* {
    box-sizing: border-box;
  }
  
  body {
    font-family: sans-serif;
    margin: 20px;
    padding: 0;
  }
  
  h1 {
    margin-top: 0;
    font-size: 22px;
  }
  
  h2 {
    margin-top: 0;
    font-size: 20px;
  }
  
  h3 {
    margin-top: 0;
    font-size: 18px;
  }
  
  h4 {
    margin-top: 0;
    font-size: 16px;
  }
  
  h5 {
    margin-top: 0;
    font-size: 14px;
  }
  
  h6 {
    margin-top: 0;
    font-size: 12px;
  }
  
  code {
    font-size: 1.2em;
  }
  
  ul {
    padding-inline-start: 20px;
  }

In our case it is just some simple style.

Startup

Let us now create index.js inside src directory, and let us put this code inside it

import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";

import App from "./App";

const root = createRoot(document.getElementById("root"));
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

This is relatively straight forward code, it loads all dependencies and styles, load our React application App, wait for HTML page to get loaded and then execute our React application.

Our first React App

Finally we come to the writing our own React code. Create file App.js inside src directory, and let us add this code inside

export default function MyApp() {
    return (
      <div>
        <h1>Hello React</h1>
      </div>
    );
}

As we can see, our application doesn't do anything special, it just prints Hello React.

Let us run it

Once we finished with writing all this code, we should check if it is working or not.

Open terminal, and go to the root of our code base, where package.json is located, and let us run this command

$ npm install

once all dependencies are downloaded, let us start our code by running

$ npm start

Once all is started, we can check result of our work by hitting URL http://localhost:3000/

Let us ship it

Although our code is working as intended, it is still not ready to be deployed to real world. In order to do so we need to run

$ npm run build

Once this is executed, we can just copy content of build directory to our "production" environment :-)

Full code of this example can be found on here

Resources

https://github.com/vladimir-dejanovic/hello-react

"IT is like a shark, if you stop moving you will die!"

Vladimir Dejanović