hey

1. © Anselm Spoerri
Web Programming Course
Web Programming
Info + Web Tech Course
Anselm Spoerri PhD (MIT)
SC&I @ Rutgers University
aspoerri@rutgers.edu

2. © Anselm Spoerri
Web Programming Course
Lecture 7 - Overview
Ex2 Revision Due Mar 12
Ex2 Walkthrough Screencast
Make sure all expected inputs provided to Geocoding function
Ex3 Lab Due Mar 5
React.js
What to Do BEFORE Next Class
‒ React.js videos in Week 8 (in green)

3. © Anselm Spoerri
Web Programming Course
Recap – Ex3 Lab – Bootstrap 4
Create Responsive Grid Layout col-SIZE-SPAN
bootstrap_grid_basic | grid_examples | v3 templates
xl row1: 1 column
row2: 2 unequal columns (10 + 2)
and 1st large column contains 2 equal columns
row3: 6 equal columns
row4: 4 equal columns
lg row1: 1 column
row2: 2 unequal columns (9 + 3)
and 1st large column contains 2 equal columns
row3: 3 equal columns
row4: 2 equal columns
md row1: 1 column
row2: 2 unequal columns (8 + 4)
and 1st large column contains 1 column
row3: 2 equal columns
row4: 1 column
sm all linear = “no columns”

4. © Anselm Spoerri
Web Programming Course
Ex3 Lab – Bootstrap 4
Create Responsive Grid Layout col-SIZE-SPAN
Learn from: w3Schools Band Page v3
bootstrap_theme_band | bootstrap/tryit
Create Collapsible Navigation with Dropdown
Navigation bootstrap_navbar |
Dropdowns bootstrap_dropdowns
Collapse bootstrap_collapse
Create Slideshow images to use
Carousel bootstrap_carousel
.carousel-inner img { width: 100%; height: 100%;}
Add Cards and Circle Images images to use
Cards bootstrap_cards
Images bootstrap_images | class="img-fluid"
Add Toggleable / Dynamic Tabs Tabs nav_with_tabs
Add Table Table bootstrap_tables
Link Collapsible Content to Images
Collapse bootstrap_collapse

5. © Anselm Spoerri
Web Programming Course
React.js
Create large-scale single page application and interactive UIs
Design simple views for each state in application  React efficiently updates and
renders just the right components when data changes.
Virtual DOM: efficiently update & render just right components when data changes
v16: complete rewrite
• Improved asynchronous rendering
• Arrays of elements can be returned
• Better error handling
• Smaller file size
• Large performance improvement

6. © Anselm Spoerri
Web Programming Course
React.js – Getting Ready
Install React developer tools as Chrome extensions
https://chrome.google.com/webstore/search/react%20developer%20tools
https://github.com/facebook/react-devtools/blob/master/README.md#the-react-tab-doesnt-show-up
Install ATOM packages
https://atom.io/packages/react
Add React.js CDN files to web page (v17) https://reactjs.org/docs/cdn-links.html
ReactDOM.render( element, container, [callback] )
React.createElement( type, [props], [...children] )
JSX, or JavaScript as XML – write HTML tags inside JavaScript introducing-jsx
If a tag is empty, you may close it immediately with />, like XML
React DOM uses camelCase property naming convention
class becomes className in JSX, and tabindex becomes tabIndex.
Any JavaScript expression within curly braces { … } inside JSX
Babel.js – transpile or preprocess JSX using Babel try it : https://babeljs.io/repl/
Code written with JSX will be converted to use React.createElement().
You will not typically invoke React.createElement() directly if you are using JSX.
Add Babel.js CDN file to web page and <script type="text/babel">
https://atom.io/packages/language-babel

7. © Anselm Spoerri
Web Programming Course
React.js – Components
React = Collection of Components = UI elements with changing data
ES6 Class Component
class MyComp extends React.Component { render () { HTML }}
ReactDOM.render(<MyComp />, where in DOM))
Always start component names with a capital letter
<div /> represents a DOM tag, but <MyComp /> represents component
and requires MyComp to be in scope.
CSS classes: need use className inside of component creation
Stateless Component
const MyComp = () => <h1>Hello World</h1>
Properties
Class component: this.props contains props defined by caller of this component
{this.props.text} inside JSX <MyComp text="Hello World"/>
{this.props.children} inside JSX <MyComp text="Hi">World</myComp>
Stateless component: const MyComponent = (props) => <h1>{props.text}</h1>
ES6 destructuring = unpack array values / object properties into distinct variables
const MyComponent = ({text}) => <h1>{props.text}</h1>

8. © Anselm Spoerri
Web Programming Course
React.js – Functions and State and Refs
Add functions to Components to handle events
Note extends React.Component { edit() {alert("Editing Note")},
render() {… <button onClick={this.edit}>EDIT</button> … }
Define state that can be queried and changed
constructor(props) {
super(props) // access this.props in constructor
this.state = { checked: false } // define state checked
this.handleCheck = this.handleCheck.bind(this) // keep this in scope
}
handleCheck () { this.setState({ checked: !this.state.checked })}
Note: if we want to use this.props inside of return () then need to work using vars
Inside render define var msg and then use if / then / else to reflect this.state.checked
Refs and ref="value"
<textarea ref="newText"></textarea>
var val = this.refs.newText.value

9. © Anselm Spoerri
Web Programming Course
map function and arrow (=>) function
array.map()
creates new array with results of calling function for every array element
https://www.w3schools.com/jsref/jsref_map.asp
arrow function
shorter syntax than a function expression and does not bind its own this,
arguments, super, or new.target.
https://www.linkedin.com/learning/learning-ecmascript-6/Arrow-functions
var materials = [ 'Hydrogen', 'Helium', 'Lithium', 'Beryllium' ];
var materialsLength1 = materials.map(function(material) {
return material.length; });
var materialsLength2 = materials.map((material) => {
return material.length; });
var materialsLength3 = materials.map(material => material.length);

10. © Anselm Spoerri
Web Programming Course
React.js – Create React App using Node.js
Node.js https://en.wikipedia.org/wiki/Node.js
Create Fast Web Server using JS and modules
NodeJS Runtime Chrome
Server JavaScript
Event-driven programming using callbacks
Asynchronous events
Non-blocking I/O
Create React app with no build configurations
Open Command Prompt
npm –v
Install npm from https://nodejs.org/en/
Previously in 2021 and will not use in 2022: npm install -g create-react-app
Make sure in ex4 folder inside of terminal
npx create-react-app bulletin-board
cd into the bulletin-board folder
npm start
Ctrl C to stop