Skip to content

Latest commit

 

History

History
376 lines (212 loc) · 15.1 KB

intro-to-react.md

File metadata and controls

376 lines (212 loc) · 15.1 KB
Raw

Title: Intro to React
Duration: 1hr+
Creator: Joe Keohan

Intro to React.js

Learning Objectives

  • Explain what a frontend framework is and why it is needed for 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

Any Front End developer, with several years of experience in the industry, will have either heard of jQuery or worked with it directly.

jQuery was first introduced in 2006 and just shy of 20 million web sites have been built using the library vs. the 1 million+ for React.


The jQuery library was the front end developers tool of choice for quite sometime but it's starting to run it's course.

More and more developers are opting to use front end libraries that might also be considered frameworks such as React, Vue and Svelt to name a few.

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 do the following:

  • facilitate the development process across teams and industries
  • develop a reusable code base comprised of components
  • maintain the performance of the application across a diverse set of devices and browsers.

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 and when they were introduced.

Framework Year Introduced
Angular 2009
Backbone 2010
Ember 2011
React 2013

Front End Frameworks

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

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

  • React
  • Angular
  • Vue
  • Svelte

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 The Best Websites Examples Built With React JS.

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 you're answer in the thread created by the instructor.

What Is React.js

React is a JavaScript library 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.

Components are such an integral part of React that many companies create Component Libraries, such as Shopify which created Polaris

⏰ Activity - React Developer Tools - 5min

Let's take a look at a simple app built in React: StreetBall Mecca

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 to confirm the Components and Profile tabs have been added:

👍 Click on the thumbs up when you're done.

React in MVC

React is only used for the front end when buidling an app and would require working with other frameworks to handle the models - (data) and controllers - (business logic) while having React single handedly manage the view.

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 and returns data.

React is the View in this model.

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

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

Here is a good reference on the types of MV* patterns.

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.

If you have ever used document.getElementById('someid') or jQuery's $('#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.

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 makes React significantly more efficient.

Here is a good example that conveys the benefits of using React and it's Virtual DOM.

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: React CodeSandbox Starter

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

Configuring Our React App

A few things have been removed from this CodeSandbox so that we can 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 as React has gone through several iterations`.

As of 16.8 React introduced Hooks which allowed Functional Components to hook into functionality previously available in Class Components.

Hooks are the way to write modern day React and will use them throughout this class.

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 uses 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 { createRoot } from "react-dom/client";

ReactDOM.render()

With our library in place we can use createRoot() to render either, a Component or plain HTML to the screen.

Before we can render anything we need to tell React what element to use as it's mounting point which, in most cases is an element with and id of root.

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

And now we can render some HTML.

root.render(
  'Hello world'
);

We should see our app update to display the following:

⏰ 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 <div className=App> and paste it over the <h1> in index.js.

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

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

Take special note that once the element is rendered that React renamed className to class. This happened as the keyword class is a reserved word in JS ES6for creating ES6 Classes and so React requires that we define css classes as className.

Solution Code

Here is the final CodeSandbox Solution.

Bonus - 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.

Resources