THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET

ReactJS THE GREATEST V IN MVC

hjnilsson.comHampus Nilsson / Computas

http://hjnilsson.com

REACT

DISPOSITION

▸ What makes React different?

▸ How it works

▸ Some code

▸ Avtaleverktøy

▸ How to use it well.

▸ Future

REACT

WHO ARE YOU?

▸ Aspiring JavaScript programmers?

▸ And excellent students

▸ In any case

▸ Some JavaScript knowledge is good but not necessary

▸ Majority of criticism here addresses issues in JavaScript

REACT

WHAT IS REACT?

▸ React is a Javascript framework based on JS6

▸ It’s main focus is to provide a more sane way to code in the browser

▸ Plain HTML / JS is a challenge

▸ Standards over 25 years has made HTML disparate

▸ Trying to build complex apps in JavaScript (with jQuery) leads to spaghetti-code.

WHAT MAKES IT DIFFERENT

REACT

WHAT IS REACT

▸ First off, React is only a View framework.

▸ It does not do networking, models, layout, protocols, or any of that

▸ This keeps React simple and small in comparison with many other frameworks

▸ Makes it easy to learn, and excellent

"Perfection is Achieved Not When There Is Nothing More to Add, But When There Is

Nothing Left to Take Away"

Antoine de Saint-Exupéry

REACT

WHO USES IT

▸ React is one of the most popular frameworks in recent years

REACT

SO WHAT’S THE DEAL?

▸ React is a huge departure from traditional JS

▸ React has a very strong focus on components

▸ If you have programmed .NET / Java the last 15 years you know about these things called classes. But they’re pretty new for the web.

▸ React makes the web more like the Desktop / Native

REACT

MORE LIKE THE DESKTOP

▸ Turns out, classes are pretty great!

▸ Encapsulated functionality

▸ Define your classes with methods.

▸ Methods are called when lifetime events happen

▸ Other methods are event handlers

HOW TO USE REACTTHE SHORT VERSION

REACT

FIRST YOU NEED THE ENVIRONMENT

▸ Can’t do React directly in the browser

▸ Easiest setup is via npm

▸ $ npm install -g yo bower grunt-cli gulp

▸ $ npm install -g generator-react-webpack

▸ $ yo

▸ $ npm start OR SOMETHING LIKE IT

REACT

THE HTML

<body>

<div id="react">



</div>

<script …>

</body>

REACT

THE HTML

<body>

<div id="react">



</div>

<script …>

</body>

EVERYTHING IS DONE IN JS

(You can mount anywhere)

REACT

THE SIMPLEST COMPONENT

import React from ‘react’;

class MessageBox extends React.Component {

render: function() { return ( <div className="messageBox"> Hello, world! I am a MessageBox. </div> ); }

}

export default MessageBox;

REACT





}


JS6 CLASSES (YOU CAN USE REACT WITHOUT

THEM)

REACT





}


WE WRITE OUR HTML INLINE

REACT





}


RENDER IS THE MAGIC OF REACT

REACT

JSX TRANSFORMATION

<div className="commentBox"> Hello, world! I am a CommentBox. </div>

React.createElement(“div”, { className: “commentBox” }, “Hello world! I am a CommentBox” )

REACT

JSX TRANSFORMATION

▸ Makes it easier to write.

▸ Easier to match <div></div> than {}.

▸ Make it much easier to read larger structures.

▸ And also, it looks like HTML!

▸ But it is not HTML

REACT

THE VIRTUAL DOM

▸ The render method only returns a javascript object, no DOM elements are ever created during render.

▸ React then compares the rendered object to the actual DOM, and only performs the changes necessary to update the DOM as efficiently as possible.

REACT

COMPOSITION




}


REACT

COMPOSITION

import React from ‘react’; import MessageBox from ‘./MessageBox.js’;

class App extends React.Component {

render: function() { return ( <MessageBox /> ); }

}

export default App;

REACT

HOW DOES THE VIRTUAL DOM WORK?

▸ Your code does not interact with the DOM directly

▸ Instead it creates ‘virtual DOM’, and translates back & forth between this and the real one.

REACT

HOW REACT UPDATES THE DOM

REACT

THIS THING CALLED STATEclass MessageBox extends React.Component { constructor () { this.state = { to: "Computas"

}; }

render: function() { return ( <div className="messageBox"> Hello, {this.state.to}>! I am a MessageBox. </div> ); }

}


REACT

CHANGING STATEclass MessageBox extends React.Component { constructor () { … }

handleClick: function() { this.setState({ to: ’World’ });

}

render: function() { return ( <button className=“messageBox" onClick={this.handleClick}> Hello, {this.state.to}! Click to change greeting. </button> ); }

}


REACT

HOW REACT UPDATES THE DOM

REACT

THE VIRTUAL DOM

▸ The render method only returns a hash, no DOM elements are ever created during render.

▸ React then compares the rendered hash to the actual DOM, and only performs the changes necessary to update the DOM as efficiently as possible.

▸ But in practice, you can imagine in recreates everything all the time, because that is the observable effect.

▸ Creating and removing actual DOM nodes is slow

▸ Comparing in-memory hashes is fast

▸ Speed is one of the main motivations for Facebook

REACT

FOCUS ON SPEED

REACT

DONT WORRY ABOUT STATE!

▸ State is a mess

▸ Remember all that Java/Swing/C#/WPF/C++/WX/MFC code to figure out:

▸ If you need to update a text field?

▸ Or what happens when you change the selected item

▸ Or what happens when you move the cursor?

REACT

DONT WORRY ABOUT STATE!

▸ State is a mess

▸ Remember all that Java/Swing/C#/WPF/C++/WX/MFC code to figure out:

▸ If you need to update a text field?

▸ Or what happens when you change the selected item

▸ Or what happens when you move the cursor?

NO WORRIES!

In React, you don’t need to think about that shit (unless you want

animations)

REACT

STATE

▸ All components have state

▸ This is the mutable part of that component.

▸ Examples:

▸ Focus

▸ Drag state

▸ Menu open?

PROPS

▸ Props (properties) are passed down from the parent

▸ The value of a field

▸ Examples:

▸ The value of a field

▸ The style of a button

▸ Event handlers

REACT

render: function() { return ( <button className=“messageBox” onClick={this.handleClick}> Hello, {this.state.to}! Click to change greeting. </button> ); }

THESE ARE PROPS

REACT

render: function() { return ( <button className=“messageBox” onClick={this.handleClick}> Hello, {this.state.to}! Click to change greeting. </button> ); }

THESE ARE PROPS

(THIS IS A CHILD)

REACT

MAKING A CALCULATOR

▸ We’ll make a very simple calculator app in React

▸ Everyone else makes TODO-lists, not as exciting

▸ Shows how components & ES2016 works in practice

LIVE CODING

</DEMO>

REACT

SUMMED UP

▸ Some of the basics of React

▸ How the dev environment is set up

▸ How you structure your code

▸ How you encapsulate logic

AVTALEVERKTØYFOR BUFDIR

REACT

AVTALEVERKTØY

▸ Entirely a React app

▸ Demonstrates some of the benefits of React

▸ Easy reusability

▸ Easy to express relationships between components

▸ ‘Hacks’ are very compartmentalised

REACT

AVTALEVERKTØY

▸ React is excellent to get details right

▸ Hacks to fix one part does not affect the rest of the app

▸ Soooooo much better than doing classic JS (jQuery et. al.)

HOW TO USE IT WELLTIPS AND TRICKS

REACT

REACT IS NOT A REPLACEMENT FOR THE WEB

▸ Websites should continue being done in plain HTML.

▸ Webapps are a great fit for React

REACT

REACT IS NOT A REPLACEMENT FOR THE WEB

▸ Websites should continue being done in plain HTML.

▸ Webapps are a great fit for React

X

REACT

WRITE-ONLY MAKES THINGS MORE CLEAN

▸ Write-only makes things much more clean

▸ You never do this.showThisDialog();

▸ You check in render() for this.state.isDialogShown, and put it right there to render it.

▸ This means you don’t need to worry about HOW your app got in some state. Just render it as if everything was known always.

REACT

ESCAPING THE VIRTUAL DOM

▸ React is a very simple library, and does not try to do your work for you.

▸ You need to escape to the ‘real’ DOM when you want to do custom behaviour

▸ BUT this behaviour will be entirely encapsulated in that component, and if you do it well, will work no matter what!

REACT

DONT CONFUSE PROPS AND STATE

▸ State is internal to the component only.

▸ Props is what the parent communicates down.

▸ Top components have state (dialogs, pages)

▸ Middleware components don’t need it.

▸ In Foreldreavtale, pretty much ONLY the top component has state, everything else is props.

▸ You will learn this if you don’t know it already

REACT

FASTER THAN NATIVE DOM MANIPULATION

0MS

125MS

250MS

375MS

500MS

REACT ANGULAR KNOCKOUT NATIVE DOM

https://www.codementor.io/reactjs/tutorial/reactjs-vs-angular-js-performance-comparison-knockout

REACT

FASTER THAN NATIVE DOM MANIPULATION

0MS

125MS

250MS

375MS

500MS

REACT ANGULAR KNOCKOUT NATIVE DOM

OBVIOUSLY SENSATIONALISTIC! BUT DIFFING HASHES IS FASTER THAN REMOVING NODES

https://www.codementor.io/reactjs/tutorial/reactjs-vs-angular-js-performance-comparison-knockout

REACT

COMPARED TO OTHER LIBRARIES

0

12,5

25

37,5

50

REACT ANGULAR JQUERY

33 KB

50 KB

26 KB

REACT

COMPARED TO OTHER LIBRARIES

0

150

300

450

600

REACT ANGULAR JQUERY KENDO UI / TELERIK

512 KB

33 KB50 KB26 KB

WHATS NEXTFUTURE OF THE WEB

REACT

WHAT’S NEXT

▸ Now we have XAML

▸ Next level is a UI editor

▸ And a good super-framework that includes the application lifetime perspective (Like Qt)

▸ Write-once is an awesome idea

▸ We now have major actors pulling development forward

▸ React Native?

QUESTIONSHJNILSSON.COM/DOWNLOADS/2016-02-03-NTNU.PDF

Documents

THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET