Unleashing React.js - Power and Simplicity - Fullstack STL

React.js has disrupted the status quo in front-end development. Learn why it is special and get started today.

These are notes and code to support my talk at the May 2016 meeting of FullstackSTL

Video

Slides

• Slides for the talk - PDF

Meta Information

• Author: Jeff Barczewski
• Published: May 26th, 2016
• Tags: reactjs, javascript

Notes

Goals

• Brief intro of React.js
• Simplicity
• Composability
• Event Handling
• Show Real App

What makes React.js special?

• Simple to learn
• Composable Components
• Declarative
• Easy to use with existing projects

Live demos and code

Click links to run code in the browser

console1 - example of console output

Remember back to the days of just writing text to standard output, it was easy.

function hello(name, datetime) {
  return `Hello ${name}.` +
         `The time is ${ datetime.toLocaleString() }`
}

console.log(hello('world', new Date()));

View live demo

---

console2 - example of console output refactored

Now let’s refactor to keep things more modular and reusable.

function hello(name, datetime) {
  return `Hello ${name}. ${ timeMsg(datetime) }`
}

function timeMsg(datetime) {
  return `The time is ${ datetime.toLocaleString() }`
}

console.log(hello('world', new Date()));

View live demo

---

console3 - example of console output updating

Let’s update the time every second.

function hello(name, datetime) {
  return `Hello ${name}. ${ timeMsg(datetime) }`
}

function timeMsg(datetime) {
  return `The time is ${ datetime.toLocaleString() }`
}

setInterval(function () {
  console.log(hello('world', new Date()));
}, 1000);

View live demo

---

hello1 - console1 converted to React.js

Now let’s convert our first example to React.js

function Hello({ name, datetime }) {
  return (
    <div>
      <span>Hello { name }.</span>
      <span>The time is { datetime.toLocaleString() }</span>
    </div>
  );
}

const name = 'world';
const datetime = new Date();
ReactDOM.render(<Hello name={ name } datetime={ datetime } />,
                document.querySelector('#appContainer'));

View live demo

---

hello2 - console2 (refactored) converted to React.js

Refactoring functionality into another component.

function Hello({ name, datetime }) {
  return (
    <div>
      <span>Hello { name }.</span>
      <TimeMsg datetime={ datetime } />
    </div>
  );
}

function TimeMsg({ datetime }) {
  return (
    <span>The time is { datetime.toLocaleString() }</span>
  );
}

const name = 'world';
const datetime = new Date();
ReactDOM.render(<Hello name={ name } datetime={ datetime } />,
                document.querySelector('#appContainer'));

View live demo

---

hello3 - console3 (updating) converted to React.js

Updating the time every second. The React.js virtual DOM only makes the minimal number of updates, so only the datetime is updated.

function Hello({ name, datetime }) {
  return (
    <div>
      <span>Hello { name }.</span>
      <TimeMsg datetime={ datetime } />
    </div>
  );
}

function TimeMsg({ datetime }) {
  return (
    <span>The time is { datetime.toLocaleString() }</span>
  );
}

setInterval(function () {
  const name = 'world';
  const datetime = new Date();
  ReactDOM.render(<Hello name={ name } datetime={ datetime } />,
                  document.querySelector('#appContainer'));
}, 1000);

View live demo

---

meme1 - React.js meme generator

Simple meme generator.

class App extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {
      memeText: ''
    };
  }

  render() {
    const { memeText } = this.state;
    return (
      <div>
        <h2>Meme Generator</h2>
        <input onChange={ e => this.changeMeme(e.target.value) }
               autoFocus="1" />
        <Meme text={ memeText } />
      </div>
    );
  }

  changeMeme(text) {
    this.setState({
      memeText: text
    });
  }
}

function Meme({ text }) {
  return (
    <div className="meme">
      <div className="line">{ text }</div>
    </div>
  );
}

ReactDOM.render(<App/>, document.querySelector('#appContainer'));

Here’s the CSS that creates the overlay.

.meme {
  width: 400px;
  height: 300px;
  color: yellow;
  font-size: 40px;
  text-align: center;
  border: black 1px solid;
  background: no-repeat center/cover url(./girl.jpg);
}

.line {
  margin-top: 250px;
  background-color: rgba(50,50,50,0.4);
}

View live demo

---

meme2 - React.js meme generator with changeable photos

Adding in select control for selecting other photos.

const photos = [
  'cat.jpg',
  'girl.jpg',
  'meerkats.jpg',
  'prairie-dog.jpg'
];

class App extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {
      memeText: '',
      photo: photos[0]
    };
  }

  render() {
    const { memeText, photo } = this.state;
    return (
      <div>
        <h2>Meme Generator</h2>
        <input onChange={ e => this.changeMeme(e.target.value) }
               autoFocus="1" />
        <select onChange={ e => this.changePhoto(e.target.value) }>
          { photos.map(photo => (
            <option>{ photo }</option> )) }
        </select>
        <Meme text={ memeText } photo={ photo } />
      </div>
    );
  }

  changeMeme(text) {
    this.setState({
      memeText: text
    });
  }

  changePhoto(photo) {
    this.setState({
      photo: photo
    });
  }
}

function Meme({ text, photo }) {
  const style = {
    backgroundImage: `url(${ photo })`
  };
  return (
    <div className="meme" style={ style }>
      <div className="line">{ text }</div>
    </div>
  );
}

ReactDOM.render(<App/>, document.querySelector('#appContainer'));

Here’s the CSS that creates the overlay.

.meme {
  width: 400px;
  height: 300px;
  color: yellow;
  font-size: 40px;
  text-align: center;
  border: black 1px solid;
  background: no-repeat center/cover;
}

.line {
  margin-top: 250px;
  background-color: rgba(50,50,50,0.4);
}

View live demo

---

Related CodeWinds Content

• CodeWinds podcast episode 4 - Pete Hunt discusses React.js
• CodeWinds podcast episode 15 - Michael Jackson and Ryan Florence explain that React.js really changes how we think about and build web and mobile apps
• The React.js Conference experience - ReactJS Conference was one of my all time favorite conferences with the perfect blend of technology, community, and fun
• JSConf 2015 - React.js - Getting started with React.js at JSConf 2015

To learn more / CodeWinds React.js Video Training

CW React.js Fundamentals - The premier online course and community where you learn React.js by pragmatically building a real web app while applying TDD/BDD principles

“Highly recommended!”

- Kevin Old, Senior Software Engineer

“Look no further, the React.js Fundamentals course is the only course you will need to become an expert in React.js”

- Wyatt Preul, Software Architect, nearForm

“Overall I would give this React.js course a 4-star thumbs up!”

- Kevin Bridges - Senior Technical Consultant at Applied Software

Subscribe to the CodeWinds Leading Edge member list to stay up to date on the latest in React.js and get exclusive offers on CodeWinds React.js video training courses.