Getting started in React

Before I started with React I did a research on how to code in React. This can be read on this page: Wiki - How to code in React.

After this research I decided to use the functional components with Hooks in React. One of the reasons for this was that I once worked with classes (and therefore OOP) in a backend language and that it seemed interesting to learn something new by getting started with Hooks. My teacher Laurens also indicated that it is good to work with Hooks as this would be more in line with the earlier Functional Programming course that I followed.

Jump to:

Getting started

But now the big question was of course: How do I start starting a React application. First, I started watching movies online to see what React Hooks are and how to start starting my own React project (Source). After this I looked at the React documentation. The React documentation lists several ways how React can be used:

Not using a set of programming tools by implementing React in a <script></script> tag.
Using recommended sets of programming tools like the 'Create React App'
Set up a set of programming tools (like a bundler, compiler) yourself.

Since I don't know much about the differences between the different bundlers and compilers yet and I didn't want to make use of loading React in a script tag, I thought it would be wise to choose the recommended set of programming tools. I chose the 'Create React App' because I wanted to make a single page anyway.

Since I followed the Tech block in the 2nd grade of CMD, I already had npm installed on my laptop. For this reason I just had to install React in a new project. I did this by throwing the code below into the terminal in the appropriate directory:

$ npx create-react-app "name folder"

Then I typed npm start into the terminal and a new link automatically opened in my browser at localhost//:3000 containing an intro to React. Fortunately, this immediately went according to plan and I did not run into any problems.

Structuring folders

Before I started coding, I wanted to have a structure within my repository so that my code would be easy to find and understand later on. Coincidentally I once saw the Atomic Web Design structure by Brad Frost and I thought it would be useful to get started. Later in a lecture that Laurens gave, he also mentioned this, which also convinced me to work with it.

The Atomic Web Design literally means that you create a structure based on biology: from atoms to molecules to organisms etc. In my src folder I created a Components folder containing the different folders:

Atoms
Molecules
Organisms

My folder structure is shown below as a screenshot:

In retrospect, I already made a mistake here by writing everything in capital letters. This meant that deploying later in my process did not work. This can read on the page: Wiki - Deploying the Application.

Delete unnecessary files

After structuring my folders I started deleting all unnecessary files and code. This was mainly the code in the HTML and CSS files. This code was about a title, the rotating React SVG, a paragraph and its styling. Then I got the below error in my code:

Manifest: Line: 1, column: 1, Syntax error.

At first I had no idea what this meant or how to fix it. By searching online, I found out through StackOverflow - Manifest line 1 column 1 syntax error on chrome browser that this had to do with the manifest.json file that I also deleted because I thought it could be deleted in my code. With the help of StackOverflow I then retrieved the manifest.json file and I did not get this error anymore. Below my files after I deleted all unnecessary files:

Creating test components

To test if I understood how React worked, I decided to write a component for the page title and a component for a simple button. First I wrote the title component in another file that I had stored in my 'atoms' folder within the src folder:

import React from "react";

export const Title = ({ title }) => {
  return <h1>{title}</h1>;
};

After this I wrote the button component, again as a separate file within my 'atoms' folder in the 'src' folder:

import React from "react";
import "./CreateButton.css";

export const CreateButton = ({ text }) => {
  return (
    <>
      <button className="button">{text}</button>
    </>
  );
};

Finally I changed my App component and loaded the other components:

import "./App.css";
import { CreateButton } from "./Components/Atoms/CreateButton";
import { Title } from "./Components/Atoms/Title";

function App() {
  return (
    <div className="App">
      <Title title="Charging points per parking area" />
      <CreateButton text="Click me!" />
    </div>
  );
}