Info Web Tech Course Web Programming Anselm Spoerri
Info + Web Tech Course Web Programming Anselm Spoerri Ph. D (MIT) SC&I @ Rutgers University aspoerri@rutgers. edu Web Programming Course © Anselm Spoerri
Lecture 7 - Overview Ex 2 Revision Due Mar 15 Ex 2 Walkthrough Screencast Make sure all expected inputs provided to Geocoding function Ex 3 Lab Due Mar 8 React. js What to Do BEFORE Next Class ‒ React. js videos in Week 8 (in green) Web Programming Course © Anselm Spoerri
Recap – Ex 3 Lab – Bootstrap 4 Create Responsive Grid Layout col-SIZE-SPAN bootstrap_grid_basic | grid_examples | v 3 templates xl row 1: 1 column row 2: 2 unequal columns (10 + 2) and 1 st large column contains 2 equal columns row 3: 6 equal columns row 4: 4 equal columns lg row 1: 1 column row 2: 2 unequal columns (9 + 3) and 1 st large column contains 2 equal columns row 3: 3 equal columns row 4: 2 equal columns md row 1: 1 column row 2: 2 unequal columns (8 + 4) and 1 st large column contains 1 column row 3: 2 equal columns row 4: 1 column sm all linear = “no columns” Web Programming Course © Anselm Spoerri
Ex 3 Lab – Bootstrap 4 Create Responsive Grid Layout col-SIZE-SPAN Learn from: w 3 Schools Band Page v 3 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-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 nav_with_tabs Add Table bootstrap_tables Link Collapsible Content to Images Collapse bootstrap_collapse Web Programming Course © Anselm Spoerri
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 v 16: complete rewrite • Improved asynchronous rendering • Arrays of elements can be returned • Better error handling • Smaller file size • Large performance improvement Web Programming Course © Anselm Spoerri
React. js – Getting Ready Install React developer tools as Chrome extensions https: //chrome. google. com/webstore/search/react%20 developer%20 tools 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 (v 16) https: //reactjs. org/docs/cdn-links. html React. DOM. render( element, container, [callback] ) React. create. Element( type, [props], [. . . children] ) JSX, or Java. Script as XML – write HTML tags inside Java. Script introducing-jsx If a tag is empty, you may close it immediately with />, like XML React DOM uses camel. Case property naming convention class becomes class. Name in JSX, and tabindex becomes tab. Index. Any Java. Script 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. create. Element(). You will not typically invoke React. create. Element() 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 Web Programming Course © Anselm Spoerri
React. js – Components React = Collection of Components = UI elements with changing data ES 6 Class Component class My. Comp extends React. Component { render () { HTML }} React. DOM. render(<My. Comp />, where in DOM)) Always start component names with a capital letter <div /> represents a DOM tag, but <My. Comp /> represents component and requires My. Comp to be in scope. CSS classes: need use class. Name inside of component creation Stateless Component const My. Comp = () => <h 1>Hello World</h 1> Properties Class component: this. props contains props defined by caller of this component {this. props. text} inside JSX <My. Comp text="Hello World"/> {this. props. children} inside JSX <My. Comp text="Hi">World</my. Comp> Stateless component: const My. Component = (props) => <h 1>{props. text}</h 1> ES 6 destructuring = unpack array values / object properties into distinct variables const My. Component = ({text}) => <h 1>{props. text}</h 1> Web Programming Course © Anselm Spoerri
React. js – Functions and State and Refs Add functions to Components to handle events Note extends React. Component { edit() {alert("Editing Note")}, render() {… <button on. Click={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. handle. Check = this. handle. Check. bind(this) // keep this in scope } handle. Check () { this. set. State({ 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="new. Text"></textarea> var val = this. refs. new. Text. value Web Programming Course © Anselm Spoerri
map function and arrow (=>) function array. map() creates new array with results of calling function for every array element https: //www. w 3 schools. com/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-ecmascript-6/Arrow-functions var materials = [ 'Hydrogen', 'Helium', 'Lithium', 'Beryllium' ]; var materials. Length 1 = materials. map(function(material) { return material. length; }); var materials. Length 2 = materials. map((material) => { return material. length; }); var materials. Length 3 = materials. map(material => material. length); Web Programming Course © Anselm Spoerri
React. js – Create React App using Node. js https: //en. wikipedia. org/wiki/Node. js Create Fast Web Server using JS and modules Node. JS Runtime Chrome Server Java. Script 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/ npm install -g create-react-app Make sure in ex 4 folder inside of terminal create-react-app bulletin-board cd into the bulletin-board folder npm start Ctrl C to stop Web Programming Course © Anselm Spoerri
- Slides: 10