Skip to content

Latest commit

 

History

History
161 lines (107 loc) · 3.31 KB

lecture2.mdx

File metadata and controls

161 lines (107 loc) · 3.31 KB
Raw

import { Head, Appear } from "mdx-deck"; import Logo from "./assets/images/logos/rdc-icon.svg"; export { default as theme } from "./theme";

Happy Valentine's Day

Remember to sit with your lab group!

What is React, anyway?

Talk to your neighbors and tell them a little bit about why you decided to take this course.
What is React, to the best of your knowledge?

What is React, anyway?

React is a JavaScript library for creating user interfaces.

— https://reactjs.org

Facebook's official website tells us that React is a library for building user interfaces.
What that means is that we can use React to build a website's "view."

What is React, anyway?

React is also a mental model for writing components. That means React is not just for websites!

React Native

React Blessed

The structure of this class

  • JavaScript Mechanics
  • Functional React
  • Stateful React
  • React Ecosystem

What's in a website?

  • HTML and CSS (you've done this!)
  • JavaScript
Every website you've ever visited has sent your browser (Google Chrome/Firefox/etc.)
a bundle of HTML, CSS, and JavaScript.

HTML and CSS are not considered "programming languages" proper.

HTML is a _markup language_, or a way of describing a hierarchical structure
of information. You can use HTML to tell the browser what the actual content of
your page is.

CSS is a standard way of specifying declarations to change the appearance of
those HTML elements. You can use CSS to tell the browser how something should
appear on a page.

JavaScript is the programming language of the Web. All modern browsers are expected
to understand and interpret JavaScript in much the same way, and we can use
JavaScript to perform programming tasks. This is also how we can define dynamic
behavior on your website.

JavaScript

Most of this course will focus on the use of JavaScript.

function sayHello(name) {
  return "Hello, " + name + "!";
}

Interacting with HTML in JavaScript: Demo

Interacting with HTML in JavaScript: Recap

// First, let's find some element
let paragraph = document.querySelector("p");

Interacting with HTML in JavaScript: Recap

// Next, we can read and modify the element's properties
console.log(paragraph.innerText);
paragraph.innerText = "Hello, world!";

Interacting with HTML in JavaScript: Recap

// Any property we can set on HTML: we can set with JS
paragraph.style.color = "red";

Interacting with HTML in JavaScript: Recap

// We can also create elements with JS!
let newParagraph = document.createElement("p");
newParagraph.innerText = "Hello world, part 2";
document.body.appendChild(newParagraph);

Debugging Demo

Now what?

  • You get to practice JS and debugging (_HW 1 to be released soon_)
  • We'll continue diving into more properties of the DOM
  • ...and then we'll talk about React