Why React?

• Build own ap from scratch
• Need JavaScript
• Framework/Library for commercial applications.
• Client-side web development
• Need organizational principles
• Methods don't scale.
• Need jQuery.

• Zsolt Nagy

Learning Goals

• A new language
• Event handling
• Facilitate developing markup
• Builds on JavaScript
• Build on top commerial applications
• API's for outside data.
• Store values in component state

Who's this for?

• Follow everything start/finish
• Advanced/ Intermediate
• Beginners
• Showcase on GitHub
• Use Forums.

What to do with this?

• Get hired
• Some projects will gain traction.
• As a freelancer
• Entry is the same: build great things
• As an employee
• By yourself
• Invest in projects that get traction

Environment

• JavaScript running on server.
• Can npm packages
• With terminal
• General editor

Documentation

• Documentation
• Hint: update div id from 'root'.
• Renders "Hello World" to element "root"
• Run it locally as an .html
• Run the sample.
• Have no expectations of understanding yet.
• Contribute to documenation

Components

• The React. object
• React include
• Transforms syntax. Interpreter.
• Rendering components
• <div>s work

HTML notes

• "Well formed" <b><p></p></b>
• <self-closing/>

JSX

• Can change file to .jsx from .js
• React .createElement()
• Syntax sugar
• of attributes

JSX Exercise 2

• <div id='hello'> <p>Lorum, ipsum.</p> </div>
• Transform:
• Trailing comma,
• React .createElement(...)
• into equivalent React .createElement() call
• "div", { ... },
• id: 'hello'
• React .createElement(...)
• 'p',
• null,
• 'Lorem, ipsum.'

Anti-HTML JSX

• class
• className
• htmlFor
• for
• Reserved key words:
• React will down-translate when rendering

Rendering 2 Elements Exercise

• <HelloMessage name='Bob' />
• Render 2 serial elements
• <React.Fragment>
• Use "fragments" to avoid injecting <div>'s
• </React.Fragment>,
• <HelloMessage name = 'Alkazar' />
• Must be enclosed.

JavaScript Classes

• Extensible through inheritance
• Constructor must pass to 'super' first.
• Use new operator to run constructor/ instantiate
• Syntax sugar for functions.

• Be careful w/ floating point numbers in JS

varargin

• Creates a JS array of remaining arguments
• ...varargin)

Components

• super(props) constructor auto-generated.
• <tr> <td> {this.props.name} </td> </tr>
• Renders html to target element
• constructor(props)
• Extend #React.Component
• Need a render() to return some JSX
• return ( ... multiline .. )

#Function Components

• Easier to construct
• More popular
• Less clutter. No this.

Arrow Functions

• (a,b) => a + b;
• var sum =

Destructuring

• var name, ticker = 'Bitcoin', 'BTC'
• var { name, ticker} = coin;
• Pulls key:value pairs out of objects by key names.

• HTML Validator

Why

• trusting unpkg.com to deliver packages.
• Created by FB. All-inclusive
• vs. Google's Angular.
• Full force of FB dev to make a great/easy environment
• Have to be downloaded
• Current links are "CDN" Content Delivery Network
• Going to use create-react-app

How

• npm start
• cd my-app

• git for Windows

Convienience features

• Imports react from npm package.
• imrd - import react dom
• Available snippets
• MS Code Extension: ES7 React Redux GraphQL React-Native snippets
• imrc import react component
• JavaScript Snippets

Resources

• Flexbox Zombies
• CSS Diner
• Cheat sheet
• html
• css
• JavaScrit
• jQuery
• Material-UI
• Be a developer, hire a designer
• Or Re-Use public stuff

Property Types

• Need some type checking
• imprt PropTypes from 'prop-types';
• className.proptypes = { key:type pairs}
• HTML only deals with strings
• React components take string or floating points.
• Use TypeScript (another JS language)

Component State

• State
• Class-based components?
• reset w/ this.setState()
• Returned from .useState( )
• React "hooks"
• Function-based Components?
• How is it stored in
• Set with this.state
• Is a namespace.
• const [name, ... ] = useState ('oldValue')
• Specify initial value
• React states are immutable. Use const.
• value getter()
• 2 functions
• value setter()
• Use seperate .useState() per property

Elements

• Input for ReactDOM .render( ... )
• Must create a new element and pass it to DOM to update.
• Immutable
• What components are built out of
• Encapsulated into "stateful components"
• Multiple id='root' React roots allowed
• Rendering Elements

Git

• Github.
• gitk
• What is..
• ... the diff ..
• Cloud server
• Version control software
• Owned by Microsoft
• "staging area"
• pre-commit scratchpad.
• -m switch do?
• forking
• git clone do?
• Merging
• Rebasing
• Redefines which branch is main
• Grafts newer changes to tip.
• Merge
• Copy a repository to a local drive
• Making a copy yours.
• Host a webpage
• username.github.io
• Create a new repository

• Total Commander

Styled Components

• Documents
• const Section = styled.section` blabitty css blah`;
• use `
• Apply styles w/i Render statements
• Converting all states to component states
• npm install --save styled-components
• Define named class constants in .jsx file

• uuid

Prop Drilling and State Elevation

• On an as-needed basis.
• Pass state as parameters to lower classes in heiarchy.
• Store states in highest-level class.

State Imutability

• 'new'
• newState[0] = 'new';
• const newState = state;
• const state = [1,2,5];
• use ... operator to copy-assign
• const newState = [... state];
• console.log(state[0])
• 1
• Creates a second pointer to same array
• Creates a second pointer to a new copy of the array.
• PythonTutor
• const newSTate = state.map (x => x);
• Use map operator to create new copy on bind.

Component states

• Use arrow functions to avoid bindings.
• Use shallow copy
• Can now define states raw in component w/o constructor
• arrow function

API's

Exchange Requirements

• Need "play money".
• Must have "sandbox mode"
• Has JavaScript API
• Use Gemini.
• SandBase Market must be real prices
• US Citizen access
• Demands
• Nope.
• Nope.
• Nope.

Using JavaScript

• Exercise
• Converts to JS Array (of objects)
• .then(reponse => response.json())
• Contains a "readable stream"
• Returns a promise.
• fetch( 'https:// api.coinpaprika.com/ v1/coins')
• .then( coins =>{ ... }

• Axios
• .get()
• AwaitAll

Component #LifeCycle

• Lifecycle
• Methods
• Diagram

• JSON formatter