Blog Post 1: Disconvering ReactJS: Building Your First Application

A Beginner's Guide to ReactJS

Estimated Reading Time: 10-12 minutes.
Author: Tam Nguyen

Welcome to a beginner's guide to ReactJS. This blog post is primarily targeted at 4th-semester students enrolled in the Software Development diploma program at Southern Alberta Institute of Technology (SAIT). However, everyone interested in learning ReactJS is welcome. I've endeavored to provide a comprehensive introduction to ReactJS, but it's important to note that React is a vast subject that cannot be covered exhaustively in a single blog post.

In this post, we'll focus on the following six key topics:

1. A general understanding of ReactJS
2. The popularity of ReactJS
3. Prerequisites for learning ReactJS
4. IDE and Environment Setup
5. Creating Your First React Application
6. Exploring Packages and Classes

1. Understanding ReactJS

ReactJS, also known as React, is an influential open-source JavaScript library developed and maintained by Facebook since 2013. Unlike a framework, React is a library, a distinction that is subtle but crucial to grasp its role in web development.

Library vs. Framework: What's the difference? Click to find out the answers!

Frameworks provide a prescribed application structure, often equipped with tools to build it. In contrast, a library offers specific functions or procedures to address certain tasks. In essence, while a framework determines your application's layout, a library provides tools for tasks within that layout. Interested in learning more? Check out this detailed article on freecodecamp.org.

2. How and why is ReactJS so popular?

a. How popular is React?

Figure 1 - Babel demonstration.

A Noteworthy Resource: stateofjs.com. Click to find out the answers!

stateofjs.com is an indispensable resource for developers in the JavaScript ecosystem. It conducts annual developer surveys that span a wide range of platforms and users, providing comprehensive and up-to-date insights into trends and preferences within the community.
Visit stateofjs.com for more information

According to the latest report from the State of JS in 2023, React remains one of the top 4 front-end frameworks. While some may argue that React has lost popularity over the years, the truth lies in the details. A significant 67.9% of developers who have used React express willingness to use it again. This is impressive compared to other frameworks. Refer to the figures below for more details:

Figure 2 - React Experience.

Figure 3 - Experience over time of popular Front-End tools.

b. Why is it so popular?

Remember what we learned about building a website application in Website Development Fundamentals (CPRG-256)? We primarily used HTML, CSS, and JavaScript. While HTML and CSS are responsible for the structure and styling of the web page, JavaScript plays the critical role of managing the logic.

React simplifies building User Interfaces (UI), making it much more straightforward than traditional methods. React has several appealing features:

• Ease of use: With a simple command, npx create-react-app <project_name>, you can create a project in React, assuming you have Node.js, and the terminal of an IDE like Visual Studio Code (VSCode) set up.
• Note: You can use any IDE of your choice, but I'll be using VSCode in my demonstrations. The good news is we already set up VSCode in our CPRG-256 class.
• Declarative and Component-Based: As developers, you just need to tell React what you want, and React will build the UI for you. Although it's a simplified view, think of components as similar to methods in Java, but at the application level. React's library probably has pre-built components for what you need, reducing your effort. Plus, these components are reusable.
• Transferrable skills: Once you've mastered React, transitioning to React Native is quite easy, and that opens up the world of mobile application development on Android and iOS.

There are many more reasons why React is popular, but these are the key ones that have propelled it to its current standing in the web development world.

3. Prerequisite knowledge to learn ReactJS?

To start learning ReactJS effectively, certain foundational knowledge is recommended. According to this article on freecodecamp.org, you should be familiar with the basics of HTML, CSS, and JavaScript, as well as have an understanding of how to use npm (Node Package Manager). Luckily, these are skills we've already covered in previous classes, so you should be ready to dive into React!

In addition, it's important to have a basic understanding of ES6, the 6th edition of ECMAScript, which is a scripting language specification standardized by ECMAScript International. It's used by JavaScript and other web-based scripting languages.

Specific ES6 features you should be familiar with include:

1. let and const
2. Arrow functions
3. Imports and Exports
4. Classes

You can refresh your knowledge or learn these ES6 features on W3Schools' JavaScript ES6 tutorial .

Don't worry if you're not fully confident with these features yet, though. You should be able to follow along with the first React project I'll be showing you. But trust me, it's worth spending time mastering ES6 as its syntax is used in most modern front-end frameworks!

4. What about the IDE and environment do you need to have?

a. IDE set up:

As previously mentioned, I'll be using Visual Studio Code (VSCode) for demonstration purposes. However, feel free to use any IDE of your choice. If you decide to follow along with VSCode, you can install it from their official website.

b. Node.js installation:

To run ReactJS, you must have Node.js installed on your machine. Here's how you can verify and install it:

1. Check if you have Node.js installed:
   Open a terminal in VSCode (or your chosen IDE) and type

              node -v
            

If a version number appears, Node.js is already installed, and you're good to go.

Install Node.js:
If there is no version number appears after typing node -v, you'll need to install Node.js. Head to Google and search for "Node.js 16.14.0 download". You can use a newer version if you prefer, but I've found this version to be stable and it's an LTS (Long Term Support) version.

Here is how to find a link to download Node.js:

Figure 4 - Link to download Node.js

Remember to keep all the default settings during the installation process!

Verify installation: Once you've successfully installed Node.js, go back to the terminal and type again

              node -v
            

to confirm that it's installed correctly.

Congratulations 🙌, you're all set to create your first React project! As you can see, it's quicker and easier than you might think.

5. Let’s create your first React application.

1. Demo code to create the first React project

Let's dive right in and create your first React project!

Step 1: Create a Project Folder

First, create a new folder for your project. You can name it anything you like - I'll call mine "react". You can create this folder directly in C:\ or use VSCode to do it. Note: Make sure there are no spaces in your folder name.

Your terminal should look something like this:

Figure 5 - New terminal screen.

Step 2: Create a New React App

Next, we need to use the create-react-app command to set up a new React project. Here's the command you need to enter to create react application

npx create-react-app <project_name>
      

I'll name my project "helloworld". After typing the command, press enter to run it.

npx create-react-app helloworld;
      

Figure 6 - Command to create react application.

It might take a few minutes to create the project. When you see the phrase "Happy Hacking" in your terminal, it means the project setup is complete.

Figure 7 - Successful React project setup.

Congratulations 👏👏👏, you just created your first React application with a single command!

Step 3: Run the Application

Now, let's run the application. As you might have noticed, the terminal suggests the following commands to start your app:

 			cd helloworld
            

			npm start      
			

So, let's follow these instructions:

1. Enter cd helloworld to change the directory to your new React application.
2. Enter npm start in the terminal to start the app. Your browser should automatically open to display your app.

Figure 8 - Terminal view after entering npm start

React is incredibly powerful because it automatically updates the display as you change your code. As the screen suggests, let's try editing src/App.js.

Figure 9 - Browsers automatically deploy when you run npm start.

I'll remove line 10, which is currently controlling the output for this React application, and replace it with "Hello, World!".

Figure 10 - App.js content

Your browser should now display "Hello, World!".

Step 4: Diving into App.js

Now, let's take a moment to understand the App.js file.

This file is a key part of your React application and forms the main component of your project. You might have noticed that it looks similar to an HTML file – which is a great observation! However, it's actually a JSX (JavaScript XML) file. JSX is a syntax extension for JavaScript that allows you to write HTML elements and components in JavaScript.

Here's the interesting part: the return statement you see on line 5. In a React component, the return statement can only return a single parent element, not multiple elements. This is why we usually wrap everything in a <div> tag. You can do it though by adding an extra node the Document Object Model (DOM), but let’s keep it simple for now.

In the example below, I've augmented the code to include a new line: <p>Welcome to my first React app.</p>. Also, I've wrapped the "Hello World!" message in a <h1> tag for better display. This is a simple way to include multiple elements in a single React component's return statement.

Figure 11 - Return method in App.js

To sum it up, App.js is a JSX file that unites the capabilities of JavaScript and HTML. While your existing knowledge of HTML syntax will indeed be beneficial here, JSX pushes the envelope by allowing direct embedding of JavaScript logic within the markup.

As you delve further into React, you'll discover that JSX greatly improves the readability of your code and simplifies its creation, thereby contributing to the allure of React. Stay tuned for a more detailed examination of JSX in the sections to follow.

6. Exploring Packages and Classes

Let's dig into some foundational elements of a React Application: packages and classes.

Figure 12 - Screenshot of packages in React application.

The 'src' folder is critical to our React application. We've already examined App.js, which forms the core of our app. App.css and App.test.js are closely related files that manage styling and testing respectively.

However, we haven't yet explored the 'public' folder and its 'index.html' file.

Figure 13 - Screenshot of index.html.

Index.html is the only HTML file in our React application that contains the 'root' id. This id is rendered and manipulated by App.js. The 'index.css' and 'index.js' files in turn, style and control the logic of index.html. Note that we won't be adding any code directly to this index.html file.

The file logo.svg simply contains the logo for our React application. This is automatically included when creating a React application using the 'npx create-react-app <project_name>' command.

'package.json' is a crucial file that lists all the dependencies required for our project. It's also where you can check the version of React you're using.

Figure 14 - Screenshot of package.json file.

The 'package-lock.json' file is automatically generated and provides a detailed view of the dependency tree.

'node_modules' contains all the installed Node.js modules.

Finally, 'robots.txt' is a file we covered in the 'Security for Developers class'. When correctly configured, this file can prevent web crawlers, like Google Docker, from accessing our React application.

Thank you very much for taking the time to read my first blog post. Your feedback is invaluable to me, and I genuinely appreciate it. I will consider each piece of feedback seriously and use it to improve my future posts, starting with blog post 2. Looking forward to continuing this learning journey with you!