A Sneak peek at React

5 min readNov 30, 2020

About a week ago, our cohort started learning JavaScript, previously we were working with Ruby. Switching from Ruby to JavaScript was a bit challenging because just like anything new, you’ll have to learn the syntax and the different set of rules different languages have. Personally I’ve enjoyed working with JavaScript over Ruby (yes I know they’re two different languages used for different things). I was not a fan of the magic Ruby and Rails provided, because I personally like to know what’s going on(yes I know I could’ve done my research and learn why the magic happens).

Currently, my goals coming out of Flatiron is to become a front-end web developer, So I plan on using and learning JavaScript for a long time. Next week, I’ll be entering phase 4 in Flatiron, and in phase 4 we’ll be working with React and I couldn’t be more excited! I’ve heard of React before and I know it’s one if not, the most popular library for JavaScript. I started wondering, what is React and why is it so popular?

What is react?

React was originally created by Jordan Walke, a software engineer from Facebook and is currently maintained by Facebook. It is the view (V) in the MVC pattern. It is also an open-source library. React is used for building fast and interactive user interfaces. Simply put, React allows developers to create dynamic websites and best of all, it’s small and fast!

Components

React is used to create user interfaces in Javas. React is a Component-Based library. What is a component? In React, components are the building blocks of React, they split the user interface into independent and reusable code. There are two types of components in React-Function Components and Class Components. Components returns JSX with the render function. Here’s an example of how a Component looks like:

The first method is the simplest way to define a component in JavaScript written as a function. It takes in a single “props” object argument and returns JSX.

The second method is another way of defining a component by using ES6 class.

Taking a closer look at <Dog name="Bob /> . This is a user-defined component, it passes JSX attributes to the component as a single object and is called “props” One strict rule with components is you must never modify it’s own props (properties). When we call any components, they must always return the same results for the same inputs.

The example below is an example of an impure function because we are attempting to change the inputs.

JSX

JSX or JavaScript XML is an extension to the JavaScript syntax and is also very similar to HTML. With JSX you can apply Javascript expressions into it. JSX provides a way to structure component rendering. While it is not necessary to use JSX to use React, most people find it helpful visually.

Rendering Elements

ReactDOM.render is used to render a React element into the DOM. The ReactDOM.render() function takes in three possible arguments. Two must be provided. The element and container must be included. The third option-a call back function however, is optional.

ReactDOM.render(element,container[,callback])

In the example above, we’re passing two arguments. A React element and the container. But, <Dog name="Bob /> doesn’t look like an element but, if we take another look at the two components examples above, they both return some sort of HTML element. In our case, it’s the <h1> element.

Below is the official documentation taken from Reactjs.org

VirtualDOM

React also works with Virtual DOM. Manipulating DOM is much slower than manipulating virtual DOM since you don’t have to load all the DOM at once. When the state of an object changes in React, it only changes the updated object instead of have to update and reload all the objects again. React creates an in-memory data-structure cache, and computes the resulting differences and updates the browsers DOM. This allows React to be fast and effective.

A little more information on props

Props is shorthand for properties. It is a React object which stores the value of a HTML element attribute. Props provide a way to pass data from one component to another.

Industry trends

React can be used for developing both web and mobile apps, it has a small learning curve and it’s easy to debug. React is also high in demand. Take a look below for the average salary for React developers.

React has been consistently growing and gaining popularity since it’s birth. It is currently the popular JavaScript framework/library and I do not see it stopping anytime soon. Popular websites such as Facebook, Instagram, Netflix and many more are made using React, it’s no question why it’s the most popular library and why Flatiron teaches it. Below is a graph of the most popular frameworks for JavaScript.