React — The Introduction

A Painless method to avoid code spaghettification and create beautiful UI’s.

Hey everyone, This is my introductory tutorial for React.

Pre-Requisites:-

1. Basic HTML and CSS
2. Basic JavaScript

If you don’t know the above or don’t have at least intermediate proficiency in them, then it may not be the best time to jump on this and it’s a good time you start learning those before moving on to some framework or library. Grasp the basics and come back and I would be happy if this tutorial helps you in any way:)

But, if you satisfy the above criteria then let’s get started immediately.

So, what is React?

React is an open-source front-end JavaScript library made by Facebook to build beautiful User-Interfaces(UI). React is a component-based library thus you can work on small parts of the website at a time of development. Managing those states is also easier with the state management library of React and if things get complex there is always Redux(which would be discussed later when things get complex).

React uses JSX as its scripting language which stands for JavaScript XML. JSX is not very different from JavaScript and HTML. We will get through it as we go along.

In this series, we are going to learn to build this superb weather application with React.

https://simple-react-weather.netlify.app/

How to get started with React?

To get started with React, you will need to have Node.js and npm installed which usually comes bundled together. To learn more about Node.js a great article is written by my friend Amitesh Kumar. After installing Node.js and npm do the following:-

1. Open up your terminal where you want to create your project.
2. To create the project, type the following code

npx create-react-app simpleweather

A folder would be created with the name “simpleweather” which is the same as the above. Open the folder with your favorite editor.

Project Structure And The Generated Files

Project Structure in VS Code

1. The public folder contains the static files that are used to generate the compiled file for output in the browser. A browser doesn’t know React. Thus, the JSX code that you write is transcompiled to JS code with the help of Babel.
2. “node_modules” contains all the Modules that are required to run your React app.
3. The src folder contains all the important files and we will be using this extensively. This src folder contains all the JavaScript files that are required to code in React.

The “src” folder

By default, you will find that React has generated some files inside this folder. This is just a dummy template to get users going. We will be starting our project from scratch so we will delete everything inside this folder.

Now, we will start by creating a file inside this folder named “index.js”. This is the starting point of the app that we write. So, now let’s get into the coding part.

Importing Libraries

We will start by importing the required libraries. React is imported to read/write the JSX syntax and ReactDOM is used to render the data into the browser. We may need to render on the DOM only once.

We will now use ReactDOM to render something on the browser. And we will use the function render() which takes two parameters, render(‘What to show’, ‘Where to show’). For starters, we will display “hello world” on our browser.

So we want to display “<h1>Hello World!</h1>” and we want to display it in a div element on the static page whose ID is “root”. Ok, wait! Where did all these come from? If you open the public folder and go to the index.html file, you will find this div element.

index.html file

For now, you don’t need to change anything on the index.html file. We will continue making the Hello World on our index.js file

Continuing,

index.js

document.querySelector is a basic DOM selector used in JavaScript. We can also use document.getElementById(“root”) which would result in the same output.

Running a React Project

To run our project so that we can view it on the browser, we need to compile the files first. To do that

1. Open the terminal inside the “simpleweather” folder, then
2. Type in ‘npm start’, then
3. Press Enter

You will find that the terminal will now host the project as a server in your local machine.

A browser window will also pop up with the text

Hello World project

And that’s it. You have completed the Hello World tutorial.

Wait a minute. This is not the weather app!

Yes. We will move on to the weather app from the next post. Till then we will do one thing that we need for the project. We will add the CDN for Semantic-UI. For that open up the index.html file and paste the CSS CDN as you would link any CSS file with HTML.

Here is the CDN Link.

Adding CDN link for Semantic UI

If your server was running you will find that the browser window will now refresh automatically. And you will also find that the font of the hello world is now changed to that of Semantic UI.

Hello World after using Semantic UI

I will end this article here. Do follow us for the upcoming parts of this tutorial. In the next part, we will make the UI of the app.

Thank You and Happy Coding!