1 of 17

React Native

Training Program

Lesson 6: Web Development

2 of 17

The Web

1

3 of 17

A Brief History

  • The Internet began with DARPANET, a research project. The idea was to have “node-to-node” communication between computers.
  • In the early 80s, TCP/IP was used to create a network of networks built around the idea of sending and assembling packets of information.
  • In 1990, the World Wide Web was developed, and eventually JavaScript (along with CSS) is developed for use in Netscape, an early Microsoft browser.
  • Over the years, new technologies have arisen, namely JQuery (2006) and React (2013) built on these same core technologies.

3

4 of 17

HTML

  • HTML is Hypertext Markup Language; text is surrounded by tags denoted by < and /> that inform the browser how to “mark up” the text contained within the tags. These can have identifiers (class and id).

4

5 of 17

CSS

  • CSS is Cascading Style Sheets; these dictate styles of the tags (and identifiers of those tags, such as class and id).

5

6 of 17

JavaScript

  • JavaScript determines functionality using the Document Object Model; this is treating the HTML tags as objects with mutable properties to adjust their appearance. This is the same DOM as React DOM!

6

7 of 17

Transitioning to the Web

2

8 of 17

A Reminder

  • Remember that you know React fundamentals!
  • The same concepts (useState, useEffect, components, Typescript, async/await, etc.) all still apply.
  • There are a couple important differences to keep in mind over the next few slides.

8

9 of 17

Components

  • Your browser renders HTML elements styled with CSS and uses JavaScript to provide functionality.
  • There are many parallels with React Native elements; for example, a View is a div and Text can be h1, h2, …, h6, p, a tags.
  • Note that React Native uses native APIs to translate code to run on devices, which requires use of specific components. React, on the other hand, gets to use the browser, which has built-in support for many different kinds of HTML tags.

9

10 of 17

Styling and Pages

  • CSS is used on the Web to style elements and is the analog of stylesheets (which were imported from React Native).
  • The conceptual units of screens become pages that are composed of components.

10

11 of 17

Navigation

  • One very common and popular one is React Router.
  • The screenshot to the right gives an example of a router that serves multiple nested routes.
  • Instead of React Navigation, there exist many packages supporting Navigation!

11

12 of 17

Create React App

  • This is similar to Expo, in that it sets up a lot of stuff, but you still install packages separately.
  • To deal with the large number of dependencies, you can use Create React App!

12

13 of 17

SEO and Next.js

3

14 of 17

Google’s Inner Workings

  • Google maintains an indexing of pages on the web by their contents.
  • Their initial algorithm, PageRank, was revolutionary because it indexed by relevance through analyzing backlinks to see where users were expected to end up.
  • Their current algorithm, Hummingbird, is far more complicated.
  • Google still has a crawler that renders web pages, attempts to “understand” the content, and then indexes it.
  • React isn’t optimized for this!

14

15 of 17

Client-Side Rendering

  • React is by default client-side rendered (like Create React App).

15

16 of 17

Server-Side Rendering

  • Next.js is a framework that allows for server-side rendering and static site generation.

16

17 of 17

Mini-Project Overview

MP4B: Capstone!

4