React 3030 — Episode 1

divine dela
6 min readJan 17, 2020

I decided to spend 30 minutes every day for 30 days to learn React. I nicknamed this project React 3030. These are things I accomplished on day 1.

React is a JavaScript library used for building user interfaces. React was developed by Facebook.

In another medium article, I explain how most modern web apps have 2 parts: frontend and backend. The backend, also known as the “server side” is like the “engine” of the app. It handles the application logic, database connections, authentication and authorization, among other things.This backend is hidden from the users of the app.

The front end (also known as the User Interface or UI) is the part of a web app that the user sees and interacts with. Login forms, menus, tables, chat boxes, etc are all found on the front end. The three most popular technologies for building front ends in 2020 are React, Angular and Vue.Js.

USES OF REACT

As I have already mentioned, React can be used for building Web App front ends. The type of web app front ends we build with React (same with Angular and Vue.Js) are called Single Page Applications (SPAs). With SPAs, when data needs to be updated on a page, the contents of the page are updated without a page refresh. SPAs are fast and responsive leading to a great User Experience.

Your React knowledge can also be used in building native mobile applications for both Android and IOS platforms using React Native, a “sister technology” to React.

WHO USES REACT

Many companies from startups to very large tech businesses use React. Facebook, Netflix, Airbnb and Uber are some of the big names using React.

PREREQUISITES FOR LEARNING REACT

Because React is a JavaScript library, JavaScript is required to understand and build apps with React. You do not need to be an expert but the better understanding of JavaScript you have, the easier React would make sense to you.

You should also have some experience with HTML and CSS since these are the foundations of web technology.

WHO AM I and WHAT IS REACT 3030

I am a full stack Web and Mobile Apps Developer currently based in Accra, Ghana. I decided to spend 30 minutes every day for 30 days. I nicknamed this project React 3030.

I have zero experience writing code with React Js, although I have seen React code online and on my friends’ computers. I however have experience using Angular to build front end apps. Some of my other favorite technologies are Flutter, Express Js and ASP.NET Core.

INSTALLATION AND SET UP

In order to use React you’ll need to make sure you have nodejs installed.

Open your terminal and type the command node — version and press Enter. Do the same for the command npm — version.

checking the versions of node and npm on a computer using the terminal

You should have Node version 8.10 or greater and npm version 5.6 or greater installed on your computer, as shown in the image above. If not, go to Node Js website to download and install node on your computer. You should then have the latest versions of node and npm.

You can read more about nodejs by visiting their website.

CREATE REACT APP

There are different ways to start a react project, the simplest being to use Create React App.

After the node stuff is taken care of, you’ll need a text editor. I recommend VS Code .

Go to the terminal (or command prompt on windows) and type the command npx create-react-app react-30-30. Replace react-30-30 with the name of your app. This takes a while to create a react project. Watch the terminal. As soon as the installation is complete, you’ll see a message in your terminal which says “Success!”…..”Happy Hacking”.

Still in the terminal, type cd react-30–30 (replace react-30–30 with the name of your project) to navigate into the project . Then type command code . .Make sure to add the period at the end of the command. This will open your project in VS Code.

Or you could also simply open VS Code and Choose File then Open Folder and open the newly created project.

FOLDER STRUCTURE

A react project has a well defined project structure.

React Project Folder structure

Like every node project, there is a package.json file. There’s a src folder where we’ll add the code we write. There’s also a public folder which contains the html file that is displayed in our browser. We will take a further look at the files and folders in the upcoming days.

STARTING THE APP

To start the app and have it appear in our browser, open the terminal in VS Code or use the terminal on your computer.

Opening the terminal in VS Code

Run npm start command on your terminal. This will start the react app.

Running the command to start a react project

The npm start command is found in scripts section of the package.json file.

package.json

The scripts section of this file allows us to define “shortcuts” to different commands that react understands. As an example, when you run the npm start command, behind the scenes, the reacts-scripts start command is run for you. We’ll run the other scripts for different purposes later.

After running the npm start command, you should see this in your browser.

React project served in the browser

Congratulations! Our first react app has been started.

WRITING OUR FIRST LINES OF REACT CODE

In the src folder, there’s a file called App.js. Open this file.

App.js file

This is currently, the file whose contents is displayed in the browser. We’ll make some changes and look at how it affects our app. I made changes on lines 9 and 11.

Updated App.js file (lines 9 and 11 have been changed)

The changes were immediately reflected in the browser because of react’s “hot reload” feature. This feature makes sure I do not need to stop and rerun the start command anytime I make changes to my code.

Result of updating App.js file

I then went ahead to commit my changes with Git, created a github repository and pushed my code to the remote repository. The React 3030 github repository can be found here

If you don’t understand Git and Github, you could find out more here and here.

And that’s it for day 1.

--

--

divine dela

Web and Mobile Apps Developer at Xola Digital, Accra. I love breaking down complex concepts in a beginner-friendly way.