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
