Start learning React JS

What is React?

React is an open-source JavaScript library developed by Facebook for building user interfaces (UI), particularly for single-page applications (SPA). This library is designed around the concept of components, allowing developers to create modular and reusable UI elements. React optimizes changes using a Virtual DOM, which improves performance and the speed at which pages are rendered. The library is also compatible with frameworks like Next.js and libraries like Redux for state management.

Requirements

To follow along with this series of tutorials, you should have a basic understanding of web development principles, such as how to use HTML, CSS, and JavaScript. It also helps if you are familiar with API concepts, as we will cover them in this learning experience. Additionally, you will need the following tools to code along with me while reading these articles.

Editor and Terminal

To get started with web development, I’ve provided a setup guide. For this learning experience, you will need a text editor (such as Sublime Text) and a command-line tool (such as iTerm). Alternatively, I recommend using an IDE (Integrated Development Environment) like Visual Studio Code (also known as VSCode) for beginners. This is an all-in-one solution that provides both a powerful editor and an integrated command-line tool, making it an excellent choice given its popularity among web developers.

If you don’t want to set up the editor/terminal combination or IDE on your local system, CodeSandbox, an online editor, is also a good alternative. While CodeSandbox is excellent for sharing code online, setting up a local environment is better for learning the various ways to build a web app. Also, if you intend to code professionally, a local setup will be necessary.

During this learning experience, I will use the term “command line,” which refers to command-line tools, terminals, and integrated terminals. Similarly, the terms “editor,” “text editor,” and “IDE” will be used interchangeably, depending on your choice.

Installing Node and NPM

Before we begin, Node and NPM must be installed. Both of these are used to manage libraries (node packages) that you’ll need throughout the process. These packages can be libraries or even entire frameworks. We will install external Node packages through npm (Node package manager).

To check the versions of Node and npm, use the following commands in the command line:

node --version
npm --version

If you don’t get any output showing the installed versions in the terminal, you’ll need to install Node and npm.

Setting up a React Project

In this section, we will use create-react-app to start our React project. This tool, introduced by Facebook in 2016, is a configuration-free starter package recommended for beginners. With create-react-app, tools and configurations are automatically handled in the background, allowing you to focus solely on implementing your app.

After installing Node and NPM, use the command line and enter the following command in the folder you’ve chosen for your project. In this example, the project name is “hacker-stories,” but you can choose any name you like:

create-react-app hacker-stories

Once the installation is complete, navigate to the project folder:

cd hacker-stories

Now, you can open the project in your editor or IDE. For Visual Studio Code, simply enter the following command in the terminal:

code .

The folder structure will look like this (it may vary slightly depending on the version of create-react-app):

Project Folder Structure

The folder structure will be as follows (it might slightly vary based on your version of create-react-app):

hacker-stories/
  node_modules/
  public/
  src/
  App.css
  App.js
  App.test.js
  index.css
  index.js
  logo.svg
  .gitignore
  package-lock.json
  package.json
  README.md

Here’s a summary of the most important folders and files:

README.md: This file contains instructions and useful information about the project.
node_modules/: This folder contains all the installed packages. In React projects, this folder is automatically managed by npm.
package.json: This file contains the list of dependencies and other project configurations.
package-lock.json: This file specifies the exact versions of the installed packages.
.gitignore: This file lists all the files and folders that should not be added to your git repository. These files and folders should only be on your local project. For example, the node_modules/ folder. To share the project, you can simply share the package.json file, allowing others to install dependencies using the npm install command without sharing the entire dependencies folder.
public/: This folder contains development files like public/index.html. The index.html file links to all the JavaScript code in the src/ folder during development, and it will be displayed at localhost:3000 or wherever your app is hosted.

At first, all of your necessary files will be in the src/ folder. The main focus is on the src/App.js file, which is used to implement React components. This file is used to build your app, but you might later want to split your components across several files, where each file contains one or more components. We will reach this point eventually.

Additionally, there is a src/App.test.js file for your tests and a src/index.js file as the entry point into the React world. You will become familiar with these files in later sections. There are also a src/index.css and a src/App.css file for styling your app and components, which will display with default styles when opened. You will modify these files later.

Once you are familiar with the folder structure and files of your React project, let’s use the available commands to set up the project. All project-specific commands are located in the scripts section of the package.json file. These commands may look like the following examples:

package.json
{
...
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
...
}

These scripts are run using the npm run <script> command in your IDE’s integrated terminal or a separate command-line tool. For the start and test scripts, you can omit the run part. The commands are as follows:

# Runs the application at http://localhost:3000
npm start

# Runs the tests
npm test

# Builds the application for production
npm run build

There is another script from the previous ones, eject, which should not be used in this learning experience. It’s a one-way operation, meaning once you use it, you cannot go back. Essentially, this command is designed for accessing all the tools and configurations of create-react-app if you are not satisfied with the default settings or want to make changes. However, we will keep all the default settings here.

Write a comment