React — A intro into some of the basics

ReactJS — an Introduction

React or React.JS is a Javascript library created by Facebook used to help developers build user interfaces (UI’s) with the goal of simplifying the development process by breaking down the webpages into simple components of bite-size code.

The components split the user interface into independent, reusable parts that can be processed separately. These components each have their own logic and controls, and they can be reused through the application. Using these building blocks can dramatically reduce the development time of an application.

Components are broken down into two types:

• Functional Components also are known as stateless components. They do not use state and only contain render methods. They may get data from other components (parent components) as props (properties).
• Class Components also are known as stateful components. They can hold and manage their own state and have a separate render method to return JSX on the screen.

Components have a hierarchy where you have parent and child components. This works the same as a DOM tree structure where the broken down components can pass properties and data up and down the hierarchy as needed. Parent elements typically have a function or property(props) that can be passed down to children, grandchildren, etc. which can grab information and bring it back to the parent. Think of this as a basket on a string where the parent lowers it down to the child, it can be filled with information for the child or the child can fill the basket with information, and then the basket is pulled back up to the parent.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

JSX or JavaScript XML is a syntax extension of JavaScript. It is used with React to describe what the user interface should look like. JSX might look like HTML and/or Javascript but it is neither. It allows the developer to write HTML structures in the same file that contains JavaScript code! Basically super syntactical sugar. This simplifies the creation of elements and components. Do note that JSX has its own syntax and rules. Here are three rules that I learned very quickly

• JSX will only accept Javascript expressions between curly braces, that are inside HTML
• HTML and component tags must always be closed < />
• We can’t return more than one HTML element at once, so make sure to wrap them inside a parent tag

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Virtual Dom(Document Object Model) — React keeps a lightweight representation of the real DOM in the memory, and that is known as the virtual DOM. Think of this as a blueprint of a DOM. You can make changes quickly and effortlessly without needing to actually render the entire page again with your changes. React sees the changed objects, and the changed objects only, get updated on the real DOM. This saves a lot of time and processing power. With today's internet, is essential for webpages to load near instantaneously instead of the slow rendering of the internet in days past.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

These are only a few of the basics of React, be sure to check back periodically for more!

Sources — https://reactjs.org/