React Fundamentals

INTRODUCING REACT

Liam McLennan
CTO

@liammclennan withouttheloop.com
Overview What is React?
What is React good at?
Architecture
Comparison to similar libraries
What is React?
Rendering and event handling
Maintained by Facebook
Novel ideas:
- Influence from functional programming
- One-way data flow
- Virtual DOM
- Vanilla JS for templating

Declarative
Composable components
Demo
Setting up a React development
environment
Building a simple React application
 Advantages and Disadvantages

Advantages Disadvantages
Conceptual simplicity Limited in scope
Speed Productivity
Simple model for server-side rendering Complex tooling
 Architecture

Props State

Render Events

DOM

Model + Component = DOM

 React versus Angular

React Angular
Renders UI and handles events A complete UI framework
Uses JavaScript for view logic Custom “template expression” syntax
JavaScript TypeScript
Summary React defined
Getting started
Pros and cons
Architecture
Comparison with Angular
 Using the Image Chunking Slides

These layouts can be used as an

alternative to a bulleted list.

They’re built specifically for photos or

graphics and look especially awesome
when you incorporate icons from the
Pluralsight Icon Library.

Two Image Chunking Three Image Chunking See them in action in the next 4 slides.

Four Image Chunking Six Image Chunking

 Example of Image Chunking Two Items

Jill Anderson John Doe

Some information about this Some information about this graphic
graphic goes here and four lines or goes here and four lines or fewer is
fewer is best best
 Example of Image Chunking Three Items

Clipboard Book Film

Some information Some information Some information
goes here; three lines goes here; three lines goes here; three lines
or fewer is best or fewer is best or fewer is best
Example of Image Chunking Four Items

Write Create Record Learn

 Example of Image Chunking Six Items

Address book Binoculars Camera

Eyeglasses Megaphone World

 Icons with Bullets

An image chunking option for when you have longer text

Be concise and keep the text to 3 lines or shorter

Add relative icons on the left for each text item on the right
 Icons with Bullets

An image chunking option for when you have longer text

Two whole lines of text per image also fits nicely however,
you should avoid using three lines

Add relative icons on the left for each text item on the right

An alternative to bullets
 Using the Text Chunking Slides

These layouts are intended to group chunks of text. Among

other uses, they can be a great alternative to a bullet list.

Use animations to bring focus to the point you’re speaking

on one at a time, and/or use color to group points together.

If you have more than six points to discuss, you may want to
Two Text Chunking Three Text Chunking use a standard bullet list.

We have provided some

example uses of these
layouts in the next few slides.

Four Text Chunking Five Text Chunking Six Text Chunking

 Text Chunking Two Items

Talking point one Talking point two

Be concise and keep the text Be concise and keep the text
to four lines or fewer to four lines or fewer
 Text Chunking Three Items

Talking point one Talking point two Talking point three

Be concise and keep Be concise and keep Be concise and keep
the text to four lines the text to four lines the text to four lines
or fewer or fewer or fewer
 Text Chunking Four Items

This is the first talking point This is the second talking

that should be kept to three point that should be kept to
lines or fewer three lines or fewer

This is the third talking point This is the fourth talking point
that should be kept to three that should be kept to three
lines or fewer lines or fewer
 Text Chunking Five Items

Talking point one Talking point two Talking point three

Keep the text to three Keep the text to Keep the text to
lines or fewer three lines or fewer three lines or fewer

Talking point four Talking point five

Keep the text to Keep the text to
three lines or fewer three lines or fewer
 Today’s Mobile World

iPhone Nexus 5 Lumia 950 XL

iPad Nexus 7 Surface

Using the Title Only Slide

This is the slide you’ll want to use when you just need a big
space for a diagram, chart, or graphic.

Make sure you check out the training videos available on the
Author Kit for design best practices.

If you need help bringing your ideas for this space to life,
contact your Editor about getting help from one of our
Content Graphic Designers. In most cases, you just need to
submit a rough outline and let our designers work their
magic. However, in some special cases, your Editor can get
you in touch with a designer directly.

Title Only We included some possible starting points for you in the
next few slides.

Remember, we are here to help!

 Customer Acquisition and Loyalty

Observed higher sales

42%
Observed more loyal customers

70%
 Timeline of Events

1940s 1968 1986

McCulloch and Pitts Ken Thompson Henry Spencer
Neural network theory First in computing regex library

1956 1973 1987

Stephen Cole Kleene Ken Thompson Larry Wall
Regular events/sets First release of grep Integration into Perl
 Title Only Layout Example
System 1 Sight
Information

Database
System 2 Mobile

System 3 Process
 Using the Code Slides

Code Top Layouts

Use when you need
Make use of the color palette
a slide title and info
to highlight code.
about your code

Code Top (Dark) Code Top (Light) We recommend using the

Roboto Mono typeface for
your code slides. However, if
you use a different font for
Code Layouts
code in your demos, feel free
Best for larger to use that instead to reinforce
code snippets a consistent look.

Code (Dark) Code (Light)

Code Left Layouts

Great for annotating
code structure

Code Notes (Dark) Code Notes (Light)

<div class="row carousel-indicators">
<div style="background-color:red;" class="col-
md-4" data-target="#homeCarousel" data-slide-to="0"
class="active”>
<div class="row carousel-indicators”>

Slide Title in Titlecase

Information about the code above
<div class="row carousel-indicators">
<div style="background-color:red;" class="col-
md-4" data-target="#homeCarousel" data-slide-to="0"
class="active”>
<div class="row carousel-indicators”>

Slide Title in Titlecase

Information about the code above
 Code Snippet on Dark

<div class="row carousel-indicators">

<div style="background-color:red;" class="col-
md-4" data-target="#homeCarousel" data-slide-to="0"
class="active">
</div>
<div style="background-color:green;"
class="col-md-4" data-target="#homeCarousel" data-slide-
to="1">
</div>
 Code Snippet on Light

<div class="row carousel-indicators">

<div style="background-color:red;" class="col-
md-4" data-target="#homeCarousel" data-slide-to="0"
class="active">
</div>
<div style="background-color:green;"
class="col-md-4" data-target="#homeCarousel" data-slide-
to="1">
</div>
Put code on this side t Line up with these notes
var proto = { t Set up prototype object
foo:’Hello World’
};

function Bar(){} t Constructor function

Bar.prototype = proto; and set prototype property

var baz = new Bar(); t Create instance

console/log(baz.foo); t Call inherited member

Put code on this side t Line up with these notes
var proto = { t Set up prototype object
foo:’Hello World’
};

function Bar(){} t Constructor function

Bar.prototype = proto; and set prototype property

var baz = new Bar(); t Create instance

console/log(baz.foo); t Call inherited member

 Using Bullet List Slides

We’ve provided some bullet list layouts to accommodate various quantities of information.

Content left | Title/Image right Title/Image left | Content right

Intended for bullet text that is shorter and Intended for bullet text that is longer and
titles/images that are larger titles/images that are smaller

Remember, you
can use text or
images in these
placeholders.

Content | Image/Title Image/Title | Content

 Animation built in
Bullet alternative
Sentence fragments
Title or Relevant Graphic
List of things
Procedure list
Talking points
 Animation built in
Bullet alternative
Sentence fragments
List of things
Procedure list
Talking points
 Animation built in
Bullet alternative

Title or Room for a bit more text

Relevant Use this layout for

- Longer sentence fragments
Graphic
- List of things
- Procedure list
- Talking points
Animation built in
Bullet alternative
Room for a bit more text
Use this layout for
- Longer sentence fragments
- List of things
- Procedure list
- Talking points
Title Space with Image

Animation built in
Bullet alternative
Room for a bit more text
Use this layout for
- Longer sentence fragments
- List of things
- Procedure list
- Talking points
Graphic on left should fill the
entire space
- Graphic must be high quality and
royalty free
Graphic and text animation is built in
 Icons with Bullets

Keeping it to one line is best

However, if it is absolutely necessary you can utilize

the second line if it does not cause a widow

It would look better if you pulled in the box to even it out though

This is a fourth bullet

 Comparison Slide
Use this slide if you need to compare single items or groups of items.
 Comparison Example

Functional group Objectives

Configure and administer security Manage vSphere storage virtualization
Configure advanced networking Configure software-defined storage
Configure advanced storage Configure vSphere storage multipathing
and failover
Administer and manage resources
Perform advanced VMFS and NFS
Configure availability solution configurations and upgrades
Deploy and consolidate vSphere
 Other Slides

The following self-explanatory slides are a good way of adding diversity into the flow of your course.

Use them purposefully.

Section Header Definition Important Statement Quotation

Section Heading
Word Definition
Here is where you put the definition. This is one of the
few places where complete sentences are appropriate.
Be sure to cite your source.
This is a short, important
statement to bring
attention to something.
“Using quotes in your slides can be
powerful if used sparingly.”
Heather Ackmann