React basic Concepts you should know

React basic Concepts you should know

Note: This Article was first Published on Icodemag
It’s been a while now I took off from writing on this platform, so I’m back with a cool topic I love to share with everyone here. Most of the time I overhear some folks argue over some things about the React, whether it’s a framework or library or maybe any other thing 💁‍♂️. I’m super excited to be writing something on React this time. I hope you find one or two things to grab at the end of this article. So, actually I decided to write about this very topic because of arguments I have seen people draw up which most times I term “baseless”. You have to have a clear understanding of what React is in order to draw a baseline.

So in this article, I would be sharing with you all: What React is? Some cool things that made React special, and also Why React

LIGHTEN DEFINITION OF REACT

React is a JavaScript library created by Facebook.

React is a User Interface (UI) library. React is a tool for building UI components.

The definition above is a random definition from the popular online web tutoring platform W3Schools.

REACT

React is actually a powerful frontend JavaScript library just like jQuery but more better (my opinion). I would be saying some of the cool things that made React better.

WHY REACT

React introduced a new modern way of writing frontend applications with fewer complications.

This Cool library was created by some developers of Facebook and was announced to the open public at JSConf in 2013.

React came with a more declarative approach other than imperative, and the good thing about React is how it handles the DOM for us. React says: “Hey, you can build web interfaces without touching the DOM”.

THE DOM

DOM (Document Object Model) is the tree representation of a web app. DOM is what the browser uses to display a website or web app.

LET’S CONTINUE REACT-ING

The name React is simply saying “Hey, base on whatever the state or data of the app that describes your app, I am going to ‘React’ to it and you will get the display that you want” 😊, hope you grab that? React is built on the Concept of reusable components architecture.

COMPONENTS

React components are kind of JavaScript functions that receives input or attribute which is called props then return a kind of HTML but inside JavaScript (JSX).

LET’S PROGRESS ON REACT

An important thing to understand is that React is just a JavaScript library (not a framework) which allows us to write more JavaScript code to build more interactivity on our website.

In React we have:

State: you can think of this as a JavaScript object that describes our app Component: as explained in a few lines above

This idea of the State works with the component and the component is built with something called the JSX.

React takes care of our DOM for us using the Virtual DOM.

VIRTUAL DOM

The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. as explained in reactjs.org

STILL ON REACT

React unlike Angular is a UI library that takes care and helps us build a cool interactive UI (user interface) then with the rest of other supportive modules that works with React to give us a good custom web app.

NOTE: Angular is a framework, React is a library. Sorry, I would have explained their core differences but I am talking about React in this article and also I am still learning some pieces of stuff on Angular. I know you might have picked maybe one or two things from this article, maybe it’s not too great but I promise to bring up something more cool.

I hope to be updating this article as time goes on