Jeff Barczewski presenting at 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

Jeff starts his presentation at 1:48. Running time 18:35.

Slides

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


To learn more / CodeWinds React.js Video Training

CodeWinds React.js FundamentalsCW 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.