Would you REACT? 👨‍💻

Hi and, if you have followed along, welcome back! to my journey of babyStepsIntoCoding! If you're new here... Hi there! My name is Paul and I am currently a student with Flatiron School on my way to become a software engineer.

In this blog post, we will cover some information regarding React. I know what you may be thinking: "but Paul, there are so many informational blogs and YouTube tutorials out there.. what can you bring new to the table??". You would be correct. The internet has plenty of useful information for a new web developer to grasp on. But, I hope by taking the time to explain this to you, I will feel more confident in my knowledge and you will learn something new by the end of it. A win-win situation!

Source

What is React?

React has become of one the most popular frameworks in the front end community these past years, but other popular frameworks worth mentioning are: Next.js, Angular, Vue.js, Gatsby.

Some sources mention that React is not a framework, technically, but more of a library. While the debate goes on, one thing is sure: React will allow you to build large applications fast and without too much sweat! How fun is that!

Here are some fun facts about React

1. React was first released in 2013 and it was created by Jordan Walke.
2. Is maintained by Facebook
3. You can find updates and new information about React here
4. React has over 100k stars on GitHub.
5. It is used for thousands of enterprise apps and mobile apps

Source

Why is React popular? Where is it used?

A few examples of websites that use React:

• Facebook
• Instagram
• Airbnb
• Dropbox
• Netflix
• Postmates

How to think in React

You will be amazed to realize that React is in fact a happy combination of HTML and JavaScript called JSX. So, all you learned from vanilla JavaScript can be very useful while learning React!

• Arrays
• Objects
• Destructuring
• Iteration methods (.filter(), .map())
• Fetch (C.R.U.D - methods)
• Event listeners
• Callbacks

The main advantage of React is that you will be able to divide your code into separate components, similar to building blocks! Why is this an advantage? Because the components give us the opportunity to read the code easier, each component is independent and we can reuse them along the application how many times we wish for! Now that's a great way to stay D-R-Y! aka Don't-Repeat-Yourself

Another difference of React is the way we use expressions: declarative and imperative (DOM).

An imperative expression will describe every action in a very specific way and how the program should go step by step. When a declarative expression will describe how the process should look like or what the end result should be, but how to get there? It's up the program.

Let's create a DOM element to observe the difference between these 2 expressions.

const greeting = document.createElement('h1')
greeting.textContent="Hello World!"
greeting.className="main"
const header = document.querySelector('header')
header.append(greeting)

That code takes a lot of lines to write for a simple result. Let's see how React can help us by using JSX syntax.

const greeting = <h1 className="main">Hello World!</h1>
ReactDOM.render(greeting, document.querySelector("header"))

Less code for the same result?? Pretty awesome!

How can I use React?

React is basically a JavaScript library for creating front end applications, UI's (user interfaces).
To be able to use React, go on your terminal and create your directory mkdir my-project and change directory cd my-project. Now to run React you need to type npx create-react-app my-react-app and wait for the package to install. This will offer the preconfigured, default project. To run, type in npm start and you should see the react application page in your browser.

npm is a package manager for JavaScript.
What does that mean?
It means it allows you to install preexisting blocks of code to help in your projects. Thanks to the hard work of web developers before us, we can make sure to skip duplicate code and make our lives easier!

If you want to learn more about npm I suggest reading more here.

You mentioned components, how do they look like?

React let's you define components as classes or functions.

Note: In order to differentiate between a vanilla JavaScript function and a React function, you need to use capital letters.

The React functions always return JSX and tells our program how everything should look like.

Let's see an example for a simple blog application with a title and a content.

First you need to create the title component.

function Title() {
 return (
  <div>
    <h1>A Cooking Blog</h1>
  </div>
 );
}

Now you go ahead and create the content component.

function Content(){
 return (
 <div>
  <p> Welcome to my cooking blog! Here you may find some of my
      favorite recipes that I hope will inspire you to start cooking today! </p>
 </div>
);
}

After this, you can go ahead and put everything together:

function Blog() {
  return (
    <div>
      <Title />
      <Content />
    </div>
  );
}

In this example the Blog component is at the top level and wraps both Title and Content which makes it the parent component of those two.

This is important because we need to know which component is the parent when we want to pass information or data to the inner components ~ also known as children.

If you are interested in learning more about components, I recommend reading about them here.

Final thoughts

In this post I barely scratched the surface of React. There are more to add for sure (props, hooks, state etc.), but I will try to keep it nice and simple for now.

I hope this opens your eyes and horizons and makes you realize that you too can develop website like Reddit, WhatsApp or OkCupid by starting to learn a bit more about React.

Until next time, happy coding!