Hackerschool by @NUSHackers – NUS Hackers – How does React do it?

View Github Repository Open presentation in a new window

harishv7

See all presentation from harishv7

Hackerschool by @NUSHackers – NUS Hackers – How does React do it?

0 0

reactjs

This repo contains the slides for the Hackerschool 2016 workshop - Introduction to React JS, conducted by NUS Hackers on 27th Feb 2016.

On Github harishv7 / reactjs

Hackerschool by @NUSHackers

Saturday, 27th February

Slides: http://harishv7.github.io/reactjs Materials: http://bit.ly/reactjsmaterials Harish V / @harishv207

This workshop

  • Intermediate level
  • Assumes knowledge of HTML/CSS/JavaScript
  • Thinking in React
  • React APIs
  • Writing a simple React TODO application
  • Extensions: Flux & React Native

Software Required

  • Google Chrome - Download
  • Sublime Text - Download
  • Course materials / Application skeleton - Download
  • Mongoose, if you're on Windows (included in materials)

JSX Syntax Highlighting

  • Download and install Sublime Text 3
  • Install: https://packagecontrol.io/installation
  • Press Cmd + Shift + P (on Mac OS) or Ctrl + Shift + P (on Windows)
  • Type "install" in the input field and press enter
  • Wait for it to load Package Control
  • Type "jsx" and press enter

NUS Hackers

http://nushackers.org

http://facebook.com/nushackers

Friday Hacks

Hack & Roll

Hackerspace

Located at AS6-02-09/10/11

Help?

Let's get started

React is different.

What is React?

“A declarative, efficient, and flexible JavaScript library for building user interfaces.”

It's a UI library.

i.e. It's only the view layer in Model-View-Controller

What makes React special?

Simple to learn

Reusable components

Easy to use with existing projects

What apps are built with React?

instagram.com

facebook.com (parts of it)

Why was React built?

Traditional JavaScript

State changes -> Define and make UI changes yourself (manual)

Listen for changes Add a new todo item Append new item to item list Keep track of which new item was added Use jQuery to update multiple parts of the UI You need to keep track of state

React.js

State changes -> UI re-renders based on new state (auto)

Add a new todo item Append new item to item list Update state with new item list with this.setState

Building blocks: Components

UI components are composable and reusable, and can present data that changes over time.

How does React do it?

Virtual DOM

Helps identify which parts have changed by comparing the new version with the previously stored one

Determines how to upload the browser's DOM more efficiently

Props

Properties which can be passed around (even among components)

States

Models the current app. Used to update the UI.

Thinking in React
Thinking in React
Break it down into components

App, Header, InputField, TodoItemList, TodoItem..

Some Important Details

Reference Link
Component Methods

render (compulsory)

getInitialState

getDefaultProps

Lifecycle Methods

componentWillMount

componentDidMount

shouldComponentUpdate

componentWillUpdate

componentDidUpdate

How do you describe a component?

e.g. a div containing "Hello world."

React component (JSX)

var MyApp = React.createClass({
          render: function() {
            return (
              // className, not class
              <div className="main">
                Hello world.
              <div>
            );
          }
        });
ReactDOM.render(<MyApp>, document.getElementById("todoapp"));

JSX: HTML-like markup

Write UI code in JavaScript!

Let's start writing React.

Child components

var MyApp = React.createClass({
          render: function() {
            return (
              <div>
                <ChildComponent>
              <div>
            )
          }
        });
        var ChildComponent = React.createClass({
          render: function() {
            return (
              <div>Hello world.</div>
            )
          }
        });

Props: managing immutable state

var MyApp = React.createClass({
          // React method to set default props
          getDefaultProps: function() {
            return { name: "Tom" }; 
          },

          render: function() {
            return (
              <div>
                Good morning, {this.props.name}

                // Create a prop named "text" 
                <ChildComponent text="Hello world" />
              </div>
            );
          }
        });

        var ChildComponent = React.createClass({
          render: function() {
            return (
              // Get the text prop 
              <div>{this.props.text}</div>
            );
          }
        });

States

States

Build new Virtual DOM tree Diff with old one Compute minimal set of changes Put them in a queue Batch render all changes to browser

Concepts summary

  • Just the V in MVC
  • Write JSX to represent HTML in components
  • Uses a virtual DOM as view representation
  • One-way data-binding: Changes to state will be rendered automatically
  • Smart diffing algorithm computes the changes between old and new virtual DOM

Extensions: Flux & React Native

Flux: An Application Architecture Framework

React Native: Creating rich mobile applications the React way

THE END

Post-Workshop Feedback: http://bit.ly/reactjs2016

Resources: Flux GraphQL Relay React Native