Complete Reactjs Tutorial for Beginners: Step-by-step Guide (Part 1)

If you're interested in learning Reactjs but don't know where to start, this step-by-step guide is for you. In this blog post, I'll break down Reactjs and provide a comprehensive tutorial that will help you build your first React application.

But before we dive, let's quickly remind ourselves what React is.

Section 1: What is Reactjs?

To simply understand this, I would like to use Wikipedia's definition. It says:

> React (which is also called Reactjs) is a free and open-source front-end JavaScript library for building user interfaces based on components.

Let me break it down further.

Reactjs is created by the team at Meta, previously Facebook, and released for the public free of charge. It is used to build the user-facing part of a web application.

That is, it can be used to build any frontend application.

It's important to note that Reactjs is built on JavaScript. As a beginner, it's necessary to have basic knowledge of JavaScript, although you don't need to be an expert.

It's also worth mentioning that Reactjs is a library, not a framework. If you want to know the differences between a framework and a library, read this blog post by @tacomanick.

Now that we know what we're learning, let's talk about the requirements to start learning it.

Section 2: Requirements to Learn Reactjs

If you're planning to become a web developer, it's essential to learn HTML, CSS, and JavaScript. These three languages are the foundation of web development, and without them, it's impossible to build a web application.

HTML is the skeleton of your web application, while CSS is used to style websites. JavaScript is a multi-purpose programming language that powers the web. According to Wikipedia, 98% of websites worldwide use JavaScript.

It's crucial to have basic knowledge of JavaScript before diving into Reactjs. You don't need to master JavaScript, but you should know the basic concepts, including data types, math operators, array methods, JavaScript functions, conditions, and template literals.

Aside from the web, like I said earlier that JavaScript is a multi-purpose programming language, you can use it to build mobile apps, games, AI tools, etc.

It's so compulsory that you learn these 3 languages before you dive into reactjs.

But to which extent should you know JavaScript before learning Reactjs?

Section 3: Basics of JavaScript You Must Learn Before Reactjs

Here are important stuffs you need to learn:

I. Data types

You should be able to differentiate between a string, float, integer, enum etc. As you grow in your career, you'll learn Typescript which is a cool subset of JavaScript.

II. Maths Operators

This is just the basic mathematics you learned in primary school… How do you use "+", "-", "÷", "%", and other maths operators?

III. Array methods

This is so important because throughout your life as a software engineer, especially a frontend developer, you'll be working on arrays of data.

You're going to use map method a lot, so do take your time to learn Array methods.

IV. JavaScript functions

You should know how to use the arrow function and the primitive function syntax.

e.g

function myprogress() {
 // do something
}

and

const myProgress = () => {
 // do something 
}

These two code blocks are the same, but you have to learn the differences before choosing one syntax.

V. Conditions

Just like we make decisions in our daily life, we need to also make decisions when building websites or something with a programming language and this is where conditional statements shine.

We have different ways of making decisions in JavaScript and they are:

If-else statement

function myLife(me) {
 if(me === "jobless") {
  return "find a job";
} else {
 return "Travel to Dubai";
}
}

Ternary operation

const myLife = (me) => {

{me === "jobless" ? "find a job" : "Travel to Dubai"}

}

Switch statement

 const myLife = (me) => {

  switch(me) {
   case "jobless": 
     return  "find a job";
     break;
   default:
     return "Travel to Dubai"

}
}

These 3 code blocks are different ways to make decisions in JavaScript, you have to know how to use each of them and when to use them.

VI. Template literal: This saves you stress of long and unnecessary concatenation.

For instance, compare the code blocks below:

Block A:

const myProgress = () => {
 const languages = "HTML, CSS and JavaScript"

const status = "Beginner"

 const myProfile = "My name is Stephen. I'm a" + " " + status + " ", + "and I've learned" + " " + languages

console.log(myProfile) // My name is Stephen. I'm a Beginner and I've learned HTML, CSS and JavaScript.
}

As long as this will work perfectly, do you notice that + " " + is repeated? If we don't do it that way, we will not get the expected result.

But the syntax is ugly and time-consuming, that's why we have template literals to fix that. Consider this block of code below:

 myProfile = `My name is Stephen. I'm a ${status} and I've learned ${languages} `

console.log(myProfile) // My name is Stephen. I'm a Beginner and I've learned HTML, CSS and JavaScript.

Do you notice that this second code block is cleaner and faster? That's the benefit of template literal.

The syntax is simple, wrap your string with this symbol (press the key before 1 on your keyboard).

e.g:

  const action = `I am going`

console.log(action) // I am going.

And if you need to use a stored or dynamic string, like the languages we stored in our function above, you'll use a dollar sign followed by curly brackets. Like this:

  const action =  `I am learning ${languages}` // I am learning HTML, CSS and JavaScript

As simple as that.

If you’ve learned these stuff in JavaScript, then you’re good to go.

Now coming to Reactjs ecosystem might seem different compared to writing code with HTML and CSS because React has a syntax called JSX.

What that simply means is that you can write HTML, CSS, and JavaScript in the same file without any errors.

An example is this:

const Profile = () => {
 const name = “Stephen”
 return (
   <div>
<tag style=”color: red; fontWeight: bold”>My name is ${name}</tag>
  </div>
)
}

Note that I use the 3 languages, HTML, CSS, and JavaScript here. This is a simple ReactJs component and you’re going to work with a lot of it.

Conclusion: Reactjs Tutorial for Beginners (PART 1)

In conclusion, Reactjs is an essential library for frontend development. To start learning Reactjs, it's important to have basic knowledge of HTML, CSS, and JavaScript. In this tutorial, we covered the basics of JavaScript that you need to know before diving into Reactjs.

Stay tuned for Part 2 of this tutorial, where we'll dive deeper into Reactjs and build our first React application. To get notified when it drops, kindly follow me, and feel free to share this with others.

UPDATE: Here is the part 2

> You can connect with me on Twitter or Linkedin - I'm also open to Frontend engineering and technical writing role.