Introduction to React, Summaries of Computer science

Download Introduction to React and more Summaries Computer science in PDF only on Docsity!

Introduction to React

A workshop for COMP 523 Aaron Smith Monday, Feb. 10, 2020

What is React?

• React is a JavaScript framework
• Used for front end web development
• Think of jQuery, but more structured
• Created and used by Facebook
• Famous for implementing a virtual dom

Common tasks in front-end development

App state^ Data definition, organization, and storage User actions^ Event handlers respond to user actions Templates^ Design and render HTML templates Routing^ Resolve URLs Data fetching^ Interact with server(s) through APIs and AJAX

Fundamentals of React

1. JavaScript and HTML in the same file (JSX)
2. Embrace functional programming
3. Components everywhere

JSX: the React programming language

const first = "Aaron"; const last = "Smith"; const name = {first} {last}; const listWithTitle = ( <> COMP 523

Dr. David Stotts {name}

</> ); const list = (

Dr. David Stotts {name}

);

“React is just JavaScript”

Functional programming

Functions are “first class citizens” let add = function() { console.log('Now adding numbers'); const five = 3 + 2; }; function performTask(task) { task(); console.log('Task performed!'); } performTask(add); function foo() { return function() { console.log('What gets printed?'); }; } foo foo(); foo()();

Functional programming

Variables are immutable let a = 4; a = 2; // Mutates a let b = [1, 2, 3]; b.push(4); // Mutates b let c = [...b, 4]; // Does not mutate b

Components

Components are functions for user interfaces let y = f(x); Input x Output^ number let y = ; Input x Output^ HTML Math function: Component function:

Anatomy of a React component

export default function MyComponent(props) { return Hello, world! My name is {props.name}; } const html = ; Inputs are passed through a single argument called “props” The function is executed as if it was an HTML tag The function outputs HTML The component is just a function Parameters are passed in as HTML attributes

“In React, everything is a component”

Todo application

Title TodoForm TodoList Todo Big idea:  A digital to-do list First step:  mockup / wireframe

Anatomy of a new React app

App is a boilerplate starter component public holds the initial html document and other static assets package.json configures npm dependencies index.js binds React to the DOM

Component Hierarchy

Title TodoForm TodoList Todo Title TodoList TodoForm Todo Todo^ Todo App