ReactMeetup.pdf

var React = “what the flux?”; By Taariq Isaacs

The Big Picture Thinking vs Typing The React Component A
Simple App Simple App - Demo if (React === “Understood” && timeLeft !== 0) { Flux (“Just talking, maybe a small demo”) } Menu

The Big Picture

More Thinking • Component State • Interactivity • Flux (Dispatcher,
Actions, Stores) • Static/Stateless components • New components • Setting up initial environment (Webpack conﬁg) More Typing

React: The Component

3 Strings about React

“React is a library for building user interfaces using Javascript”

“It’s meant for large applications with data that changes over
time”

“Enables you to create reusable components”

Simple stateless component in compiled JS "use strict"; var HelloMessage
= React.createClass({ displayName: "HelloMessage", render: function render() { return React.createElement( "div", null, "Hello ", this.props.name ); } }); ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), mountNode);

Simple stateless component using JSX var HelloMessage = React.createClass({ render:
function() { return <div>Hello {this.props.name}</div>; } }); ReactDOM.render(<HelloMessage name="John" />, mountNode);

React.createClass vs React.Component var HelloMessage = React.createClass({ render: function() {
return <div>Hello {this.props.name}</div>; } }); export default class HelloMessage extends React.Component { constructor(props) { super(props); } render() { return( <div>Hello {this.props.name}</div> ); } }

React.createClass • Function that returns a component class • Uses
mixins • More Javascripty • More to type • Less structured • Existing component that is extended • Mixins not supported • More Englishy • Less to type • More structured React.Component

React: A simple App

Prerequisites

ES6/ES2015 An update to Javascript’s (ECMAScript) ES5 standard We will
be writing code using ES6 syntax

Babel Javascript transpiler that converts ES6 code into JS supported
by browsers We need ‘babel’, ‘babel-loader’ as well as ‘babel-preset-es2015’ and ‘babel-preset-react’

Webpack Module bundler that bundles javascript and other assets for
the browser We need ‘webpack’ to bundle our ﬁles into a single .js ﬁle linked to the html client and ‘webpack-dev-server’ to run the local with support for hot- reloading.

/src /dist index.html bundle.js (generated by webpack) webpack.conﬁg.js component.js /node_modules
/reactMeetup

var webpack = require('webpack'); module.exports = { entry: './src/component.js', output:
{ path: './dist', filename: 'bundle.js', publicPath: '/' }, devServer: { inline: true, contentBase: './dist' }, webpack.conﬁg.js 1 2 3 1. The React app 2. Output path for compiled bundle ﬁle 3. Name of the bundle (to be included as a script in index.html)

webpack.conﬁg.js (continued) module: { loaders: [ { test: /\.jsx?$/, exclude:
/(node_modules)/, loader: 'babel', query: { presets: ['es2015', 'react'] } } ] } } 1 2 3 1. Tells web pack to exclude node_modules folder 2. Name of the loader (required to transpile code) 3. Presets for the loader (Babel) to enable us to transpile es6/es2015 code and React JSX

index.html <!DOCTYPE HTML> <html> <head> <title>Hello React!</title> </head> <body> <div
id='main'></div> <script src="/bundle.js"></script> </body> </html> 1 2 1. Main element where React app will be rendered 2. Link to bundle script (compiled by webpack)

component.js export default class Home extends React.Component { constructor(props) {
super(props); } render() { return( <h2>Hello World</h2> ) } } import React from 'react'; import ReactDOM from 'react-dom'; Linking dependancies. Equivalent to: var React = require(‘react’); React component. Equivalent to: var Home = React.createClass({ render: function() { return <h2>Hello World</h2>; } });

component.js (continued) ReactDOM.render( <Home/>, document.getElementById('main') ) ReactDOM renders the component
to the main div element in index.html

Quick Demo

Questions

Thank You for listening! Find me: Github: https://github.com/TarCode Twitter: https://twitter.com/tarc0de
Email: [email protected]

ReactMeetup.pdf

ReactMeetup.pdf

Taariq Isaacs

Other Decks in Programming

Featured

Transcript

var React = “what the flux?”; By Taariq Isaacs

The Big Picture Thinking vs Typing The React Component A

The Big Picture

More Thinking • Component State • Interactivity • Flux (Dispatcher,

React: The Component

3 Strings about React

“React is a library for building user interfaces using Javascript”

“It’s meant for large applications with data that changes over

“Enables you to create reusable components”

Simple stateless component in compiled JS "use strict"; var HelloMessage

Simple stateless component using JSX var HelloMessage = React.createClass({ render:

React.createClass vs React.Component var HelloMessage = React.createClass({ render: function() {

React.createClass • Function that returns a component class • Uses

React: A simple App

Prerequisites

ES6/ES2015 An update to Javascript’s (ECMAScript) ES5 standard We will

Babel Javascript transpiler that converts ES6 code into JS supported

Webpack Module bundler that bundles javascript and other assets for

/src /dist index.html bundle.js (generated by webpack) webpack.conﬁg.js component.js /node_modules

var webpack = require('webpack'); module.exports = { entry: './src/component.js', output:

webpack.conﬁg.js (continued) module: { loaders: [ { test: /\.jsx?$/, exclude:

index.html <!DOCTYPE HTML> <html> <head> <title>Hello React!</title> </head> <body> <div

component.js export default class Home extends React.Component { constructor(props) {

component.js (continued) ReactDOM.render( <Home/>, document.getElementById('main') ) ReactDOM renders the component

Quick Demo

Questions

Thank You for listening! Find me: Github: https://github.com/TarCode Twitter: https://twitter.com/tarc0de