YogeshChauhan . com

What is React? Learn the basics

in React on April 21, 2021

Very old question since nowadays almost every tutorials website you see has tons of React posts floating (reacting!) around.

Their frontpage defines React as a JavaScript library for building user interfaces. A nice way to sell something. First step done.

React is a library and not a framework that is developed by Facebook

Did Facebook find another way to spy on people? Scary, isn’t it? It’s not ** hopefully.

To learn and develop stuff with React, you need to understand HTML, CSS, JavaScript ES6, HTML DOM and some basic installation knowledge if npm packages, node etc. I am confident that even if you don’t know a whole lot about those topics, you can always learn by doing. Not every one who develops in React know all things about everything. All you need to know is just major concepts.

Here’s the React repo on GitHub if you want to check that out.

React is really helpful in creating User Interfaces (UIs) really easily. I try to compare it with Java and even Swift since I have worked in both for a while and if you’re a MVC kinda person then think of React as view in that structure.

Few Advantages as per their official website

React automatically updates the view or the output of your code. So, even if you make a small change in your code, the whole view gets rewritten in seconds. Unlike programming languages like PHP or even simple HTML requires a refresh to update the view.

React makes the debugging easy — well at least a bit easier since the view gets updated constantly.

One of the biggest advantage is it divides the application in small components. Each component has its own state. Eventually, it compiles everything to make the complex app but for developers it’s easier to manage everything in smaller pieces.

By doing so React separates concerns with loosely coupled units called “components” that contain both.

In computer science, separation of concerns (SoC) is a design principle for separating a computer program into distinct sections such that each section addresses a separate concern.

All of those small code components are easily reusable which reduces the amount of code we write. Then it becomes a case of utilizing different components.

I a done with boring theory. Let’s build something.

First App

Make sure you have node and npm installed on your computer. You’re going to need it to run the following commands.

If you’re in a rush, just run this command. I will go though everything in details later on.


npx create-react-app first-react-app

// or use the following command
npm init react-app first-react-app

// if you're using yarn as a package manager than use this
yarn create react-app first-react-app

If everything goes fine, just go inside the project by using this command:


cd first-react-app

Finally, start the app.


npm start

// or

yarn start

If you’re using Mac, it’ll ask for your permission for terminal app to open the app in Chrome. Approve it and you’ll see your app running in browser window just like this:

dreamhost

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to uninstall Cocoapods from the Mac OS? #4 How to add Read More Read Less Button using JavaScript? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

May 5 Use inline if to make a shorter conditional syntax in React May 4 What is Conditional Rendering in React? May 3 How does @extend rule work in SCSS (Sass)? May 2 How different is Handling Events in React vs HTML DOM? May 2 How to create bouncing balls using HTML canvas and JavaScript? Apr 30 HTML canvas methods

You might also like these

Reverse a String in JavaScriptJavaScriptMicroservices vs Monolithic ArchitectureMiscLIKE and ILIKE Operators in PostgresPostgresSQL ANY OperatorSQL/MySQLA Quick Guide to Object-Oriented Programming in PHPPHPWhat is Prototypal Inheritance in JavaScript?JavaScript