React Router Notes

In this talk we're go over what React.js is and show off a simple project made with it.

To get started please download the zip or clone https://github.com/IAPark/react-router-notes.

Install

• Unzip the file and cd into it
• Run npm install
  • This will install all the libraries we'll be using

My first react app

• Open src/app.jsx
• You should see

import*asReactfrom"react";import*asReactDomfrom"react-dom";ReactDom.render(<div>Hello World</div>,document.getElementById("app"))

• This will tell react to mount itself to an element with the id app and render a div with hello world inside.
• To add some actual programming let's make our own component
• Let's say we really want an HTML tag to render our very special subtitled image

functionBetterImage(props){return<div><imgsrc={props.src}alt={props.title}/><div>{props.title}</div></div>}

• We can use it it in the render function now like

ReactDom.render(<BetterImagesrc="http://via.placeholder.com/350x150"title="placeholder"/>,document.getElementById("app"))

• For some people this might be enough to see how React could be useful all on it's own, acting as "just" a templating library
• We can do a lot more, actually store changes and react to them
• Let's make a custom input which will auto format as a phone number

classPhoneInputextendsReact.Component{constructor(props){super(props);// our initial state for this componentthis.state={value: ""};}onValueChange(v){//330-474-9653letnumbers=v.split('').filter(c=>!isNaN(c))if(v.length>3){numbers.splice(3,0,'-');}if(v.length>7){numbers.splice(7,0,'-');}// the state can only be changed by calling this function, it won't re-render otherwisethis.setState({value: numbers.join('')});}render(){return<inputvalue={this.state.value}onChange={e=>this.onValueChange(e.target.value)}/>}}

More than one page

• This works if you just need to show stuff on one page, but what if you want to have multiple "pages" of content without the user ever needing to reload
• React Router
• The idea here is to conditionally show only part of the page depending on what URL you're actually at
• To get this to work with a normal URL you need your web server to send all the requests to the same page