Skip to main content

Intro to React.js

React logo

Learning Objectives#

  • Explain what a frontend framework is and why they can be helpful in writing more complex applications.
  • Explain what React.js is and where it fits in our applications' stack.
  • Explain the component model of web development.
  • Create and render React components in the browser.

Framing#

The Rise and Fall of jQuery#

I'm sure everyone has either heard or worked with jQuery in their Front End Dev career. It was first introduced in 2006 and now close to 20 million web sites have been built using the library vs the 1 million+ for React.

Jquery vs Reac

jQuery was the tool of choice for front end developers for a quite sometime, but it's starting to run its course and is being replaced by libraries that also fall into the category of framework.

The Birth of the Frontend Frameworks#

As the world of front end development and software engineering grows in complexity so does the need to create new tools that facilitate the development process, increase the efficiency of writing code and the performance our our application.

Several years after the birth of jQuery several front end frameworks were introduced that provided a much more structured and opinionated way of writing code. Here are a few of the most well known frameworks:

FrameworkYear Introduced
Angular2009
Backbone2010
Ember2011
React2013

⏰ Activity - 7min#

The following questions are based on the article you were asked to read for homework: javascript-frameworks-vs-libraries

Students will be placed in breakout rooms to discuss and come us with a single group generated answer.

Think about what a front end framework is and answer the following questions:

  • How is React different than a JavaScript library like jQuery?
  • What benefit comes from using a framework like React?
  • When would you consider using a library and framework together?
  • Write our your answer in a slack thread to yourself

When asked slack your answer in the thread created by the instructor

Front End Frameworks#

A framework is a library that provides generic functionality and structure that serves as a foundation to build and deploy applications.

The following are just a few of the most popular front end frameworks mentioned in https://2019.stateofjs.com

  • React
  • Vue
  • Angular
  • Ember

Frameworks can help standardize code, give you additional functionality and performance, and can help get your code off the ground faster.

Sites Built On React#

First, let's review a few of the most popular web sites built in React:

  • Facebook - They actually built React!
  • Instagram - It's public feed and internal system are entirely built on React.

As you can imagine they are not the only popular sites built in React.

⏰ Activity - 2min#

Let's take a look at this article 32 Web Sites Built In React

  • Look over the sites and determine which ones you have used in the past or perhaps use on a daily/weekly basis
  • When asked slack your answer in the thread created by the instructor

The History of React#

The first thing most people hear about React is Facebook uses it. As mentioned before Facebook actually created React to meet the demands of the most popular social media platform of it's day.

  • First used by Facebook in 2011.
  • Adopted by Instagram in 2012.
  • Made open source in May 2013.
  • Not long after React was embraced by the dev community.

React was born out of Facebook's frustration with the traditional MVC model and:

  • how re-rendering something meant re-rendering everything (or just a lot).
  • how it had negative implications on processing power and ultimately user experience, which at times became glitchy and laggy.

What Is React.js#

React is a JavaScript framework used to craft modern day UI for the front-end in web applications. It essentially takes the UI and breaks it down into reusable Components.

By modeling small reusable Components that focus on just rendering a specific portion of the view, React can improve an app's performance, maintainability, modularity and readability.

React Alone Can't Build A App#

React can co-exist with other Javascript libraries and frameworks. If fact there are many helper libraries that developers use quite often like, Lodash, Underscore or Ramda which are great for performing adv JS functionality.

React is also front end only and would require working with other frameworks to handle the models - (data) and controllers - (business logic) while having React single handedly manage the views.

⏰ Activity - 5min#

Of the 32 sites that we examined before a few of them were clearly only built from the ground up in the last few years, such as Postmates.

From looking at the sites UI we can't really see React. It's there working under the hook but just not so apparent on the surface. So let's peel back a layer and see React in action.

This involves installing React Chrome Developer Tools

👍 Take a moment to install the tool and then open DevTools and confirm the following tabs have been added:

React DevTools

The instructor will provide a quick walk through of the tool.

Becoming A React Developer#

Learning React requires that one have an understanding and working knowledge of basic front end technologies, such as:

  • HTML
  • CSS
  • JavaScript (ES6, ES7, ES8)

It then opens the door to a whole new world of development tools that are used in the React ecosystem. The React Developer Roadmap does a good job of documenting the technologies and concepts that one will be exposed to when working in React.

React Developer Roadmap

React in MVC#

The MVC architecture is a JavaScript design pattern for building an applications. It isn't the only design pattern being used and others exist such as MV*, MVP, MVVM but the MVC architecture is used quite often and represents the following:

  • M stands for Model

  • V stands for Views

  • C stands for Controller.

    The View is the presentation layer, it’s what the user sees and interacts with in the browser. The Controller makes the decisions based on requests and then controls what happens in response, like clicking on links and submitting forms and communicates with the Model, which is the database.

    React is the View in this model.

MVC

The backed represented here by Controller and Model can be implemented using any backend framework such as:

  • Node/Express
  • Ruby on Rails
  • Python/Django
  • PHP

The Virtual DOM For Efficiency#

The Document Object Model or DOM for short is an API that is used to interact with the HTML that is displayed on a page. The following structure represents the DOM and starts with the document object.

DOM

If you have ever used document.getElementById('someid) or $('#someid) then you have worked with DOM.

The Virtual DOM is a representation of the actual DOM and is a staging area for changes that will eventually be implemented. Because of that, React can keep track of changes in the actual DOM by comparing different instances of the Virtual DOM.

Virtual DOM I

React then isolates the changes between old and new instances of the Virtual DOM and then only updates the actual DOM with the necessary changes as opposed to re-rendering an entire view altogether which is significantly more efficient.

Virtual DOM II

Getting Started With React#

So now it's time to get started with React. For this demo we will be using an online platform called CodeSandbox,

Here is the starter code we will be working with: CodeSandbox Starter

https://codesandbox.io/s/rctrr-9-8-20-getting-starter-fxcd2

Note: Be sure to fork button on the top right:

Configuring Our React App#

A few things have been removed from this CodeSandbox in order for use to walk through installing the required libraries and configuring React.

For this demo we will focus on:

  • Installing the required dependencies (libraries): (react & reactDOM)
  • Importing the libraries into index.js
  • Using ReactDOM.render() to render our initial content.

Adding Dependencies#

Let's add the dependencies first. On the left side click on Add dependency

And then search for and add the following:

  • react - used to create Components
  • react-dom - used to manage the Virtual DOM
  • react-scripts - used to transpile the code

Once they have been added it should look like the following. Take note of the react version which in this case is 16.13.1.

As of 16.8 React introduced Hooks which has changed that way we write React Components and we will use Hooks for the entire curriculum.

Setting Up index.js#

In the left pane we should see the following. This is essentially the default folder structure for the React App.

Both the public and src folders are very important in a React app. The public folder is what is sent to the end user and the src folder is used to write all our React code.

The one element inside the public/index.html file that we need to be aware of right now is:

<div id="root"></div>

This will be the element that React mounts to and will use to render the entire app.

Importing The Libraries#

Before you can work with React, or any library for that matter, we must import them into the file in which they will be used. In our case let's import the libraries into index.js.

// IMPORT Reactimport * as React from "react";// IMPORT ReactDOMimport ReactDOM from "react-dom";

ReactDOM.render()#

With our libraries in place we can use ReactDOM.render() to render either, a Component or HTML to the screen, in our basic starter app we will render some basic HTML for now.

ReactDOM.render() accepts the following two arguments:

  • The HTML or Component name to render
  • The DOM element we want to mount react to which in our case is: <div id="root"></div>
// GRAB THE ELEMENT WITH AN ID OF ROOT AND STORE IN A VARIABLE CALLED rootElementconst rootElement = document.getElementById("root");// USE ReactDOM TO RENDER SOME HTMLReactDOM.render(<h1>Hello World</h1>, document.getElementById("root"));

We should see our app update to display the following:

We only have to use ReactDOM.render() once when mounting React to our html. For every React app we build going forward this step will already have been completed for us and so we will never need to do this manually again.

⏰ Activity - 3min#

Let's take a moment to examine public/index.html

  • Look for the element with an id=root
  • Does it have any HTML directly inside of it?
  • Investigate the same element in Chrome Developer Tools and we should see the following:

Now, in the HTML, cut the entire element with className=App and paste it over the <h1> in index.js.

ReactDom.render(  <div className="App">    <h1>Hello CodeSandbox</h1>    <h2>Start editing to see some magic happen!</h2>  </div>,  document.getElementById("root"));

React will re-render and our page should display the content.

Take special note that React also renamed className to class. This is something we will address once again in future lectures.

Final Solution#

Here is the final CodeSandbox Solution

Resources#