Rafael Menezes

First App - Structure

Ok, let’s start! After all, this blog is all about practicing. Writing small, simple apps over and over until you really understand the concepts.

Well, the holiday season is over, the year is just starting, we always end up putting some extra weight and now it means watching out what we eat for a few months. So why not writing a food logger?

So go to the terminal and create a new folder, navigate to it and run npm init -y, this will create the:

mkdir food-logger
cd food-logger
npm init -y

Node will create a package.json file. This is the dependency management file, it holds information about the project like name and author, but more important, It’ll handle the packages installed in the app. So far we don’t have any packages installed, we will need:

  • react : contains the functionality to create components
  • react-dom: the entry point to the browser DOM
  • react-scripts: contains scripts to start a server and build the app

Let’s add the bootstrap-css-only as well, it’s not really necessary, but we’re adding it so we don’t need to deal with css.

npm install react react-dom react-scripts bootstrap-css-only

After the installation, create the folders public and src otherwise, react-scripts won’t be able to locate the necessary files to start the app. So, create them:

mkdir public src

To test it, let’s create a simple hello world. Create an index.html, inside public, with a #main div (line 6). This will be the entry point to our app:

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <div id="main"></div>
  </body>
</html>

Now create index.js inside src, and import react and react-dom:

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(<h1>Hello World!</h1>, document.getElementById('main'))

Awesome! But to be able to run this we need to compile the react files using react-scripts. We can do two things here, we can start an independent server or we can build the production version and deploy somewhere else like apache. Let’s go with the first. react-scripts has a function ‘start’ that bundles the files and starts a server for us but to do that, we need to add the script to the package.json (line 7):

{
  "name": "food-logger",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap-css-only": "^4.2.1",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-scripts": "^2.1.3"
  }
}

Then just start the server:

npm start

If npm asks anything about target browsers, just say yes. It’ll add a “browserslist” tag to the package.json and start the app. Open http://localhost:3000 in the browse and you should see the “Hello World!”

This is the minimum amount of code to run a basic react app. This was a manual way of creating the initial structure. We could achieve the same result using the create-react-app package:

npm install create-react-app -g
npm init react-app food-logger #or npx create-react-app food-logger
cd food-logger
npm start

This would create exactly the same structure but with some extra bells and whistles. I don’t mind this option at all but I think boilerplates should be used only after we understand what they bring to the table.

Well, that’s it for now. In the next post we will create the first component.