100% found this document useful (1 vote)
16 views

React.js Book: Learning React JavaScript Library From Scratch Greg Sidelnikov download

The document promotes various resources for learning React.js and related technologies, including books and tutorials. It emphasizes the challenges of learning React due to its assumptions about prior knowledge in web development and programming principles. The author, Greg Sidelnikov, aims to provide a comprehensive guide that balances explanations with practical code examples to facilitate understanding of React programming.

Uploaded by

bjpijbcv413
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
100% found this document useful (1 vote)
16 views

React.js Book: Learning React JavaScript Library From Scratch Greg Sidelnikov download

The document promotes various resources for learning React.js and related technologies, including books and tutorials. It emphasizes the challenges of learning React due to its assumptions about prior knowledge in web development and programming principles. The author, Greg Sidelnikov, aims to provide a comprehensive guide that balances explanations with practical code examples to facilitate understanding of React programming.

Uploaded by

bjpijbcv413
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 64

React.

js Book: Learning React JavaScript Library


From Scratch Greg Sidelnikov download

https://textbookfull.com/product/react-js-book-learning-react-
javascript-library-from-scratch-greg-sidelnikov/

Download full version ebook from https://textbookfull.com


We believe these products will be a great fit for you. Click
the link to download now, or visit textbookfull.com
to discover even more!

Learning React js Learn React JS From Scratch with


Hands On Projects 2nd Edition Alves

https://textbookfull.com/product/learning-react-js-learn-react-
js-from-scratch-with-hands-on-projects-2nd-edition-alves/

Learning React Native Building Native Mobile Apps with


JavaScript 2nd Edition Bonnie Eisenman

https://textbookfull.com/product/learning-react-native-building-
native-mobile-apps-with-javascript-2nd-edition-bonnie-eisenman/

Deep Learning from Scratch 1 / converted Edition Seth


Weidman

https://textbookfull.com/product/deep-learning-from-
scratch-1-converted-edition-seth-weidman/

Learning Three.js: The JavaScript 3D Library for WebGL


- Second Edition Jos Dirksen

https://textbookfull.com/product/learning-three-js-the-
javascript-3d-library-for-webgl-second-edition-jos-dirksen/
Beginning GraphQL with React NodeJS and Apollo Greg Lim

https://textbookfull.com/product/beginning-graphql-with-react-
nodejs-and-apollo-greg-lim/

Fullstack React Native Create beautiful mobile apps


with JavaScript and React Native 5th Edition Devin
Abbott

https://textbookfull.com/product/fullstack-react-native-create-
beautiful-mobile-apps-with-javascript-and-react-native-5th-
edition-devin-abbott/

Learning React Modern Patterns for Developing React


Apps 2nd Edition Alex Banks

https://textbookfull.com/product/learning-react-modern-patterns-
for-developing-react-apps-2nd-edition-alex-banks/

Innovation in Public Libraries: Learning from


International Library Practice Kirstie Nicholson

https://textbookfull.com/product/innovation-in-public-libraries-
learning-from-international-library-practice-kirstie-nicholson/

Master Machine Learning Algorithms Discover how they


work and Implement Them From Scratch Jason Brownlee

https://textbookfull.com/product/master-machine-learning-
algorithms-discover-how-they-work-and-implement-them-from-
scratch-jason-brownlee/
React.js Tutorial Book
React is definitely one of the hardest things I had to learn from the pool of JavaScript libraries. In part, it is
because it assumes knowledge of so many other things associated with professional web development. Namely,
Node.js, NPM, mastery of babel command line tools, EcmaScript (5 and 6,) JSX and possibly WebPack.

This book also makes an assumption. That you're completely new to React programming. It creates a challenge
for me as the author, because it's my responsibility to speak about React in a way that is still meaningful, without
overwhelming you with large blocks of code that look complicated and hard to follow.

Having said this, my strategy for the presentation format of this book follows a simple pattern of mixing
explanations with simple code examples. Primarily, this book is a narrative designed to gradually delve into
understanding the React library.

I'll just put it out there right now that this book alone will not be enough to become an expert React programmer.
No publication about React can claim this, due to sheer scope of principles you need to understand in order to get
going and start writing real applications with React. Then there is also syntactical differences between EcmaScript 5,
6 and soon 7. For this reason React may turn out to be one of the most unusual learning experiences you have ever
had when it comes to JavaScript.

But breaking through the hard parts is worth the battle. And I hope this book will prove to be practical in
accomplishing this task.

Written and edited by Greg Sidelnikov


[email protected]
Table of Contents

A Note From the Author2

Main Roadblocks to Learning React4

Good Reasons for Learning React6

Reactive Programming8
Main Principles of Reactive Programming9
Gems and Working in the Mine12

The Essentials14

Special Props21

PropTypes22

Class Component Options23

Component Instances25
Properties25
Methods26

Gem 1 - React Components26

Gem 2 - Render Method28

Gem 3 - Virtual DOM and Bandwidth Salvation30

Gem 4 - Two Distinct Ways of Initializing a React Class32

Gem 5 - States & Life Cycles35

Gem 6 - Component Mounting39

Gem 7 - Node.js & NPM43

Gem 8 - JSX Walkthrough45

Lesson 1 - Writing Your First React Component49


JSX53
Props57
Function Purity58
Functional Components60
A Wolf in Sheep's Clothing62
Native Babel vs JavaScript Babel63
NPM63
Transpiling Source Code64
Lesson 2 - Nested Components65
Parent with a Single Child66
Parents with Multiple Children68

Lesson 3 - Handling Component Events69


Method 1 - getInitialState70
Method 2 - componentDidMount71
Method 3 - componentWillUnmount72

Example of a Complete React Application73


Creating Search List74
React Application74

EcmaScript 6
The var and let keywords77
The new const keyword82
Destructuring assignment83
For-of loop83
The Map object84
Arrow Functions84
What are Arrow Functions in JavaScript?90
Immediately Invoked Arrow Functions (IIAF)94
Backtick (``) Template Strings95
`string text`;95
`string text`;95
New Array methods96
A Note From the Author

Welcome to the introduction chapter of my book.


This is React Gems a book by Greg Sidelnikov.
That's me, the author!

First, thank you for showing interest in React Gems. This tutorial book was self
published by myself through my JavaScript web development newsletter. It will
walk you step by step through the process of setting up a development environment
and learning Reactive programming from start to finish.

As of 2017, what I call "reactive" programming has become an alternative way


of thinking about web applications. It provides software patterns that make your
web app extremely responsive to user input and generally feel faster to the end-
user (people who are using your application.)

When I was studying React it took me about 3 weeks for something to occur to
me. React is unlike any other JavaScript library I have ever programmed with. It
assumes a lot of previous knowledge. Because of this I had to write this book a
certain way, that gradually delves into the process of understanding it.

Studying React is not about just memorizing a few methods here and there and
using them as you wish. React itself is built on software principles that usually
become known only to professional software engineers who have worked in the
industry for a long time. This creates a challenge for authors like me who are trying
to explain React to JavaScript newcomers.

I chose to solve this problem by adopting a more fluid style of explanations that
border between discussions and source code and that make an attempt to create
balance between both. I didn't want to show long React programs and write a few
comments explaining what each line does. That would only complicate the learning
process. Instead, I broke down the narrative of the book into components (no pun
intended!) that deal with real problems you will be faced with when studying
React for the first time.

Programming with React library is a lot more than just learning about and using
React objects, components, states, props and methods. The entire book is
dedicated to explanations of what those are. Have you ever heard of props or
states in other libraries? States… probably, you did. But not so much props
(React's way of referring to "properties" of an object, which are in fact
arguments/parameters passed to React objects. It's a mystery of why they
decided to call this props. Because even what they represent comes from HTML
attributes, not properties.)

React makes understanding both (props and states) explicit requirements.


They're almost like sub-features that you absolutely must master in order to become
a versatile React library programmer.

It's the quirky details like these that requires previous experience with
JavaScript, without which (and explanations of which) it would be much more
difficult to learn React programming. Thankfully I am aware of this and the book is
written with all of this in mind. At times React assumes knowledge of software
principles not inherent to React library itself. The passages of this book will
gradually uncover them throughout the book as well.

This book is not a list of object names, methods and functions with side
explanations of what they do. You can look them up on Facebook's official React
documentation page including long lists and explanations of every single method.

Rather, the book will deal with the gradual learning process and understanding
of the said principles involved in React programming.

Before we begin I'd like to show you some of the things I discovered that.
Below you will see a list of the hardest things about learning React followed by
most important reasons why you would want to learn it.
Main Roadblocks to Learning React

Here, I'm going to make an attempt to speak of the commonplace difficulties faced
with learning React library from scratch. These are the ones that make learning React
not as intuitive as other far straightforward libraries you're already used to.

I'll try to do it without making React come off as a bad choice, because… all in all,
this is indeed a book about how to advance as a React programmer. However, if we at
least briefly talk about the hard parts now, it will make it easier to sink in later on as we
move forward.

1. New Design Pattern. New, and in many cases unfamiliar. If you're coming
to React from traditional pre-2015 JavaScript world of programming, it might
take time to adjust to modular a nd declarative design adopted by React
library. Sure, if you've ever worked on a large JavaScript application you
might have already dealt with long lists of .js files and treated them as
separate modules. But for large majority of programmers this isn't true. React
requires that we use modular design for maximum application management
efficiency.

2. J S X language throws a lot of people off. It's like writing HTML inside
JavaScript and at first it looks nothing short of bizarre, if you're encountering
it for the first time ever:

For example:

var divblocks = <div>


<div>Another nested tag</div>
</div>;

Like wait, what? Are you seeing what I'm seeing? We have just relentlessly
typed HTML into a JavaScript statement, without quotes surrounding the HTML,
and even have separated them using line breaks... and still got away with it.

JSX processor, which processes XML as if it's HTML and turns it into a valid
JavaScript statement we can toss around does all the dirty work for us behind the
scenes. In reality, this type of code is "transpiled" from XML (that looks like
HTML) to EcmaScript 5, so browsers can understand it. This means the actual
code the browsers sees will not even look this way. This is just for us, while we're
programming our app. But… we can write the code in this format without a hitch.

How it is used is discussed throughout the book. But basically, this format is
interchangeable with React component structure. What essentially you have just
created is actually a valid React component pattern.

For this reason, JSX is often used with React as a supplementary library. You
can create the same statement we've seen in example above, by writing it using
React methods. Using JSX is not a requirement, and you can get away without it.

However without it React programming becomes sort of like eating a pizza


without cheese. The two work together to provide a tasty experience, even if it
takes trial and error and time to learn how to bake the pie.

3. Babel & Transpiling code from EcmaScript 6 to an earlier version (ES5) is a


bit of an overhead and seems like an unnecessary thing to do as well. Because
eventually browsers like Chrome and Safari will have full support for ES6
and this process will become automatic anyway.

Babel allows us to write this code:

import someClass from "someClass.js"

And this will grab someClass class definition from the file someClass.js,
where it is defined. As of this writing, Chrome, Firefox and none of the other
browsers support ES6 import keyword.

However, babel allows us to start learning and writing ES6 code even now,
before official support is even rolled out in the modern browser. Until then it will
just "transpile" it back to ES5, behind the scenes, so that the code can actually run
in any browser today.

The good news is that installing babel plugins forces you to learn how to use
the command line tools. Something traditional JavaScript developers are usually
unfamiliar with. Which, I think the skill you should be learning anyway.

Using command line is a "must-have" skill in professional software


development environment (outside of personal projects in some arbitrary folder on
your Desktop). And... it's one of those extra steps that might potentially prevent
delving directly into Reactive programming, if not taken. As much of a hassle as it
may be.
Good Reasons for learning React

1. It's fast. This is probably the top reason JavaScript programmers are looking
to start writing their applications using React library. Utilizing a virtual copy
of the DOM, it is designed to perform operations virtually before they are
rendered to the standard JavaScript DOM tree. This isn't just a numbers game.
It's surprising that moving UI operations to virtual DOM actually changes
how your application feels for the end-user. You've probably already started
noticing this phenomenon across the web on websites such as Netflix.

2. Modular design. React supports modular design that is often associated with
building large, scalable applications. The reason for this is the advent of
EcmaScript 6 specification that came out in 2015 which provides new syntax
that favors modular methodology, for example the require (ES5) and include
(ES6) keywords tie together not only files alone but assume class-based
relationship between objects. And even though as of this writing include
keyword is not supported in modern browsers (even Chrome) we can begin
writing modular programs by either using require, or transpiling our ES6 code
to ES5 (that almost all browsers do understand by now) before sending it to
the browser for rendering. When browsers catch up, we will no longer have
to transpile. When this takes place, React will become an even more common
library you'll see everywhere. Eventually, modular JavaScript program
design will become the norm with or without React.

3. Scalability. In React each HTML element is treated like a programmable


component that can be nested within other components. Child components
have parent components associated with them. The relationship between
parent and children components is established through something known as
props. Scalability of React programs is achieved by making each component a
conglomerate of HTML, CSS and JavaScript code.

4. Flexibility. React is more than just a UI view library as opposed to what you
will probably hear at first when you start figuring it out. And that isn't entirely
wrong. React gives us ability to create lightning-fast interactive components
that can be used as elements of our application. However, React's utilizes the
principle of render targets which allows you to send result of your code to
just about anywhere, included but not limited to front-end view.

5. Popularity among Employers. React was developed by programmers at


Facebook after years of studying web applications. More or less, it originated
from a set of proven software engineering philosophies. Although, many of
them most traditional JavaScript programmers will not be familiar with.
When you are learning React, you are learning computer programming
principles, not just a list of functions and methods, which is the case with
other libraries such as jQuery. In 2016 JavaScript has become the leading
language for front-end web development. Having React on your resume gives
you an edge over your competition if you're looking for employment in
software industry. The average Sr. JavaScript programmer in San Francisco
Bay Area makes $120-150K a year.
Reactive Programming

What is this reactive programming anyway? React is a small but powerful


library written in JavaScript. You can use it by including it on your web page by
using SCRIPT tag. Just like you would any other JavaScript library, like jQuery for
example.

If you are looking to be prepared for employment at an actual software


company, simply adding React to your web page isn't enough. It almost demands
that you understand other areas of web development that go beyond simple
JavaScript programming. The design of this book is dedicated to help nurture that
process.

By using React components, which will be shown throughout many examples in


this book, you will build an entire application. During many parts of this book I
will refer to building applications using the React library as "reactive"
programming.

Reactive programming is nothing more than a phrase made up to represent an


alternative way of thinking about building modern web applications. Reactive
programming is not inherent to programming using the React.js library itself. It's
just a methodology and it happens that React.js library certainly adopts it as core
philosophy.

What I mean by this is that it's the type of programming methodology that will
focus a lot on logical functionality of your program. Think about it as a more
advanced form of programming compared to working with DOM in JavaScript,
where each visual element of your app not only has events associated with them,
but can possibly contain custom programs that you will write yourself which will
determine their function.

While React is considered to be mostly dealing with the view areas of your
application, don't believe the myths that React is strictly the "view" in the MVC
(model-view-controller) pattern you're probably already familiar with. If not, just
know that the Model View Controller is a programming pattern that separates code
from the visual elements of an application. You've probably heard the phrase
"separation of concerns" in the past. But the point is that you can either install
React, learn and get used to its programming style and get a few UI elements
designed, or you can make it the reason you learn in-depth subjects of web
application development. The latter, is the approach I have taken while writing this
book.

I hope you enjoy this book, learn the React library and explore the possibilities
offered by modern software development that will train you for making real-world
web applications.
The Main Principles of Reactive Programming

Before we even go any further, it's important to mention what we are even
doing here. We can refer to programming with React as functional templating.
Not to be confused with functional programming languages. Here I simply mean
that your React components have a specific function to perform and that this is a
way to customize your components with unique capabilities. Whereas HTML
provides us with a set of elements (as HTML tags) that handle the layout of our
web application and provide interfacing with JavaScript code via attributes, React
is that… and a lot more.

React gives us ability to create compact blocks of code that tell us at a glance
exactly how your component will render on the screen all in one place, and often in
a single line of code. This gives tremendous opportunities for giving the
programmer an immense amount of control over making applications that create
visual elements and at the same time, give him (or her) the ability to program their
behavior.

React programs usually do not deal with separate CSS stylesheets. Interfacing
with the style is provided via virtual DOM. We'll see how that works later on in
the book.

Compared to traditional HTML, CSS and JavaScript approach, where we


would have to scout around the source code just to find different bits and pieces of
just one single element on the web page, React gives us a way to use
programmable templates.

In standard Ajax-based HTML applications, we're used to seeing code such as


demonstrated in the following example:

// HTML
<div class = "LoginForm">
<div class = "Name">
Enter username here.
</div>
</div>

And here is the counterpart jQuery ajax example:

// Ajax counterpart
$.ajax( { url: "/login.php",
data: { "username": "user1",
"password": "abfgh123" },

// login.php returned some data


success: function( msg ) {

// Adjust DOM data


$(".Name").html( msg );
}
);

This is a purposely simplified example. But you can see how even then, the
code is located in two separate blocks. One is the HTML layout definition. It is
almost like a reusable template for LoginForm with some dynamic functionality.

The second block of code is the actual program that executes an Ajax
statement. This line of code will load data from a PHP script based on the data
passed to it (username and password) and returns some type of a message in msg
variable.

Last, jQuery is used to modify the DOM by replacing the contents of div whose
class is Name with the message received from the script.

For a while this methodology worked just fine. Over the last several years, this
is how we're used to working with dynamic elements on a web page. But the
brilliance of React, is that it takes all that and gives us programmatic control over
the HTML and dynamic data, all packed in a neat render function:

render: function() {
return
<div>
{
This.state.name ? this.state.name :
<span>Enter username here</span>
}
</div>;
}

Notice how HTML and JavaScript code is intertwined without having to open
separate tags. Both exist within the same JavaScript statements and used almost
interchangeably without any problem. We'll get to how this is done in a few
moments.

Of course this isolated example makes almost no sense outside of being used in
a real-world application. But it shows a few important principles.

This react code that borrows its JavaScript-cross-HTML syntax from JSX
language gives us a means to know what the output of a dynamic element will look
like by briefly looking at the code. React here is trying to be everything to
everyone. And in some cases you will notice some patterns that almost feel like
bringing the back end logic into the front end.

The ternary operator ? : is used in this example. And basically, it's saying that
if the property name exists (not null or undefined) then we should output it. If it
doesn't exist, we should output generic "Enter username here" as the default
message.

This brings HTML template methodology to a different wavelength. Here, we


are designing and programming the component at the same time.
Gems and Working in the Mine

It's only the first chapter, and I am already delving into complexities of React
programming. However, let's get back to basics and break down some important
principles into smaller tutorial pieces first. It will help us later down the road.

Just like with my jQuery Gems book, we will start with a collection of "gems"
which is prerequisite knowledge that will provide quick insightful bits of
information required to move forward. Because the software industry is in
transitional times right now between EcmaScript 5 and 6, it will help us get
common quirks out of the way and stay focused on what's important when we get to
the rest of the lessons in the book.

If these gems are skipped, certain parts of the book later on might not make a
lot of sense. Especially if you've embarked on studying React as your first contact
with JavaScript programming.

But the gems is only one part of the book. They are designed to reduce as much
turbulence as possible and help you ease into the world of modern JavaScript
programming with a hint of reactive principles.

You simply must understand these principles before descending deeper into the
mine. The gems will sharpen your pick axe. The second part of the book will show
you the rest of the cave.

React on the Palm of Your Hand


To make your journey easier, I've included this section here representing each
separate aspect of a React program. Fasten your seatbelt and get ready to absorb a
lot of new principles! We're truly taking off into the world of React programming
now:)

This is a bird's eye view explanation going over the most important concepts
involved in building React programs. I already mentioned that learning React is
fragmented. And it assumes previous knowledge of advanced programming
patterns.

In this section, I'll try to break them down into reasonable chunks that can be
analyzed individually. And as we move forward, this will help you put the pieces
of the puzzle together. Think of the principles described here are the ideas fueling
the core engine of React.
Just because they are neatly outlined here, it doesn't mean that learning React
will be easy. But it certainly makes it easier to go through the rest of the book by
taking your time to familiarize yourself with them.
The Essentials

If you're familiar with jQuery, you've used the dollar sign ($) object for
selecting HTML elements and applying various operations on them.

But what is a similar building block of React when it comes to HTML


elements (not components.)? It must be the createElement method.

React.createElement(type, props, children);

And here are a few examples of how you would use createElement in practice:

let link = React.createElement('a', {href: '#'}, "Save");


let nav = React.createElement(MyNav, {flat: true}, link);

Here, we programmatically created HTML elements using React method


createElement. Then we have taken the created link element and placed it within
nav element to be one of its children.

Of course in this case link is the only child, but multiple links can be used as
well, as additional arguments separated by comma:

let link1 = React.createElement('a', {href: '#'}, "Save");


let link2 = React.createElement('a', {href: '#'}, "Delete");
let nav = React.createElement(MyNav, {flat: true}, link1, link2);

You can go like this forever, adding as many children as required by your
application.

Notice nav variable uses MyNav without double quotes. This is perfectly fine.
When we use custom elements (not the standard ones like a, div, table, etc…) that
we make up ourselves, we must use leading upper case letters. Therefore, the
navigation element is called MyNav. As long as we use the leading capital letter
React knows we're referring to a custom element. No need to use surrounding
quotes here.

In JSX it will translate to something like <MyNav />

Eventually with time as you develop your application, you'll arrive at full
structures similar to one depicted in the following example. Note, that here it is a
little different as I am actually using React statements directly as children
arguments:

let nav = React.createElement(MyNav, {flat: true},


// start children of nav
React.createElement('a', {href: '#'}, "Save"),
React.createElement('a', {href: '#'}, "Load"),
React.createElement('a', {href: '#'}, "Delete"),
React.createElement('a', {href: '#'}, // AlertContaner
// start children of AlertCounter link
React.createElement('span', {alerts: 0}, "No Alerts"))
);

Note that some children are simple strings of text. They are used as text nodes
here. The stuff that goes in between the brackets of tags should also have a
representation. And that's what they're for. In this case children can be used as the
text supplied to the link's innerHTML, when they are not used for specifying nested
elements.

Also, here createElement is how you would create a React element in ES5
without JSX. I'll explain this in a moment. This is version ES5, for coding pre-
2015. While I advocate the use of ES6, I wanted to show you how it's done in ES5
first. Moreover, ES6 is backwards-compatible with ES5. So, this means that a lot
of the time how you write react programs will depend on your personal preference.

What's important to understand, for now, is that createElement takes three


arguments: type, props, children.

Here, type is the name of the element. For example A, H1, DIV, etc.

Then we have props, which are properties you pass to this component. Props
are not states, but they can modify states. We'll draw this distinction later in more
detail.

Finally, children are just hierarchical elements to be found within its parent
elements. Create chains of them and type them right into createElement function as
N-number of arguments at the end.

Another key that unlocks deeper understanding of React here is that all of the
code above has its equivalents in JSX. The two can be used interchangeably. This
is the part that actually is exciting, once you truly start understanding how it works.

So, while in ES5, you would use createElement function, in JSX (arguably its
common use is with the rest of ES6 syntax) you could create exactly the same
functionality by simply writing it out as follows:

let link1 = <a href = "#">Save</a>;

Now you see where I am going with this? JSX turns HTML into JavaScript
statements. Here link1 is object-like representation of the element which is exact
equivalent to React code we created earlier with createElement method.

And yes, link1.href will contain "#" by simply declaring it as JSX. Once I
realized that this is how it works JSX started to make a lot more sense and I
actually started to feel comfortable using it.

It's like a two-way road between HTML and JavaScript where attributes
automatically become properties.
And here is the more complex example, this time in JSX once again:

let nav = <MyNav>


<a href = "#">Save</a>
<a href = "#">Load</a>
<a href = "#">Delete</a>
<a href = "#">
<span alerts = "0">No Alerts</span>
</a>
</MyNav>;

We have just recreated virtual DOM using JSX language using a single
JavaScript statement! You can pass the value of nav around as a statement into
functions. It's almost like another way of creating a mini DOM structure.

Now you (hopefully) see that this is the very structure of virtual DOM in React.
It's like a secondary DOM we're going to be working with, changing, modifying,
editing, deleting and adding children from, etc.

We will update the actual primary JavaScript DOM object which is


responsible for visible elements in our application… but only when it actually
needs updating. None of the virtual DOM operations we're performing will be
associated with spending time updating the original DOM. And this is what
improves performance of React applications.

The best thing, React does this for us automatically. As a React programmer,
you are not required to understand how React does this internally. You just focus
on design of your application.

Note, of course if you type JSX code directly into your JavaScript application,
it will not even compile. You must be running JSX processor. To do this you
would usually initialize it from command line, so it constantly runs in the
background.

Babel has a JSX pugin. I also recommend learning how to make babel watch
your files. What this means is, you can set babel up so that it auto-transpiles your
.js files (and places them into "build" or "production" directory) automatically,
soon as the file changes. This babel functionality is called "watch". It first must be
enabled. I explain how to do this on Windows PC in my video tutorial:

React Tutorial on YouTube that helps you set up your development


environment, install Node.js, NPM, babel, JSX and help you start watching your js
files:

https://www.youtube.com/watch?v=tXaNvGcjEi0

You can get away with simply adding babel.js to your SCRIPT tag at the top or
bottom of your web page. JSX will transpile just fine. But this will significantly
slow down processing of your application. It should be used only for testing.

The video, on the other hand is only 58 minutes long, and if you're serious
about setting up a professional web development environment I recommend
breezing through it on 2x speed option in YouTube player which should only take
about 25 minutes. It's like a mini introduction course.

Finally, we're drawing this discussion to an end by showing that you can also
clone existing elements using cloneElement.

React.cloneElement(element, props, children);

It works in the exactly same way as createElement. Just pass an existing


element as element argument. Then, whatever props and children you pass to
corresponding parameters, will be merged into ones already available on the
original element. This is reminiscent of extending object functionality in traditional
Object-Oriented programming. Here, we're somewhat imitating OOP functionality.

Created elements can now be actually rendered to the DOM. You cannot render
to virtual DOM. The render function is the magick that takes care of this process
within React library internals. This is when our element "copy and pasted" from
our virtual DOM into the actual DOM that will be visible on the screen.

React provides render method on the main ReactDOM object as shown


below. In reactive programming ReactDOM is the second most important object
after React.

ReactDOM.render(reactElement, domContainerNode);

Here domContainerNode is the parent element on which reactElement will be


rendered, re-rendered or attached for the first time (mount.)

You can use render multiple times, if you need to update properties of the
component.

Here's what a real-life scenario might look like. In this example we're taking a
ReactElement and rendering it on a DOM node:

ReactDOM.render(
React.createElement("div"),
document.getElementById("container")
);
If you have an element already associated with a variable name, you can look it
up using ReactDOM.findDOMNode:

ReactDOM.findDOMNode( element );

This statement returns the DOM node associated with the given element. Note,
that this will only work only after element has been rendered to the DOM with the
render method. Until then, it is not findable in the DOM, even if it was already
created.
Special Props

Here we will briefly talk about special prop names, of which there are a few.
These should be treated almost like reserved keywords in JavaScript, except in
React. They all have a special meaning.

Children

The prop name c hildre n is automatically added to this.props by


React.createElement

className

This prop corresponds to the HTML's class attribute. You must use className
in your components/elements instead of name to avoid clashing with HTML's
reserved keyword.

htmlFor

Same as className only for the "for" attribute. htmlFor should be used in
your React element anywhere where you need to use "for" attribute.

key

The ke y prop uniquely identifies a ReactElement. It's used with elements in


arrays.

ref

The ref prop accepts a callback function which will be called:

1. With the component instance of DOM node on mount.


2. With null on unmount and when the passed in function changes.

style

The style prop accepts an object of styles, instead of a string. In React, there is
no mechanism for specifying CSS styles as a text string. This is one of the
limitations of using JSX.
But this limitation can also be looked at as an advantage, because CSS styles
can now be represented programmatically, where each property of the CSS-style
object represent CSS property pairs.

It might feel a little awkward at first but this style actually adapts much better
to the overall scheme of React programming.
PropTypes

React has a special property called PropTypes. Typechecking is its primary


purpose. As your app becomes large in size, type checking can help catch various
bugs.

Here is an example. Let's say we already have a React component created, and
named ReactComponent. By default typechecking is enabled in development
mode. It is actually not turned on in production code.

ReactComponent.propTypes = {
name: React.PropTypes.string
};

What React.PropTypes does is it turns on validation for the type of the data
stored in a property. By default React has a number of data validators, and if a
Numeric data type is passed to a prop defined as String (as shown in example
above) then you will see a warning in JavaScript developer's console in Chrome
or other browsers.

The propTypes in React are defined as follows:

any
array
bool
element
func
node
number
object
string
Class Component Options

We'll speak about components a lot more throughout the rest of the book. They
are the building blocks of your react application. But remember that this is "React
on the Palm of Your Hand" section! Let's briefly overview the full scope of a
React component, its options and methods available by default in React library.
Components are defined by createClass method existing on the main React object:

var MyComponent = React.createClass({

displayName: 'MyComponent',

/* This is the core of your React Class


options and lifecycle methods will be written here */

render: function() {
// Once rendered, let's return a newly created element
return React.createElement( /* … */ );
}

});

This is the basic structure of a component class.

Component Options

Components hold the propTypes object and two methods that return an object:

1. propTypesobject mapping prop names to types


2. getDefaultPropsfunction returning object
3. getInitialStatefunction returning object

Lifecycle Methods

1. componentWillMount
2. componentDidMount
3. componentWillReceiveProps
4. shouldComponentUpdate
5. componentWillUpdate
6. componentDidUpdate
7. componentWillUnmount

These 7 methods can be implemented in your React class. Not all components
classes will require using all of the seven functions. This will depend on your
components' purpose.

Each is basically an event that executes at a particular time during the lifecycle
of a React component. Most of this functionality is to do with checking mounting
and update state of the component.

In addition to these methods, of course you can also add your own custom
functions, depending on what your component is supposed to be doing.
Discovering Diverse Content Through
Random Scribd Documents
arms; and their union must have subverted the throne of the house
of Sassan.
Persia had been lost by a king; it was saved by a hero. While the
nation trembled, while Hormuz disguised his terror by the name of
suspicion, and his servants concealed their disloyalty under the mask
of fear, Bahram alone displayed his undaunted courage and apparent
fidelity; and as soon as he found that no more than twelve thousand
soldiers would follow him against the enemy, he prudently declared
that to this fatal number heaven had reserved the honours of the
triumph. The steep and narrow descent of the Pule Rudbar, or
Hyrcanian rock, is the only pass through which an army can
penetrate into the territory of Rei and the plains of Media. From the
commanding heights, a band of resolute men might overwhelm with
stones and darts the myriads of the Turkish host; their emperor and
his son were transpierced with arrows, and the fugitives were left,
without council or provisions, to the revenge of an injured people.
The patriotism of the Persian general was
[589-590 a.d.] stimulated by his affection for the city of his
forefathers; in the hour of victory every peasant
became a soldier, and every soldier a hero; and their ardour was
kindled by the gorgeous spectacles of beds, and thrones, and tables
of massy gold, the spoils of Asia, and the luxury of the hostile camp.
A prince of a less malignant temper could not easily have forgiven
his benefactor, and the secret hatred of Hormuz was envenomed by
a malicious report that Bahram had privately retained the most
precious fruits of his Turkish victory. But the approach of a Roman
army on the side of the Araxes compelled the implacable tyrant to
smile and to applaud; and the toils of Bahram were rewarded with
the permission of encountering a new enemy, by their skill and
discipline more formidable than a Scythian multitude.
Byzantine Coloured Glass Bracelets

Elated by his recent success, he despatched a herald with a bold


defiance to the camp of the Romans, requesting them to fix a day of
battle, and to choose whether they would pass the river themselves
or allow a free passage to the arms of the Great King. The lieutenant
of the emperor Maurice preferred the safer alternative, and this local
circumstance, which would have enhanced the victory of the
Persians, rendered their defeat more bloody and their escape more
difficult. But the loss of his subjects and the danger of his kingdom
were overbalanced in the mind of Hormuz by the disgrace of his
personal enemy; and no sooner had Bahram collected and reviewed
his forces, than he received from a royal messenger the insulting gift
of a distaff, a spinning-wheel, and a complete suit of female apparel.
Obedient to the will of his sovereign, he showed himself to the
soldiers in this unworthy disguise; they resented his ignominy and
their own; a shout of rebellion ran through their ranks, and the
general accepted their oath of fidelity and vows of revenge. A
second messenger, who had been commanded to bring the rebel in
chains, was trampled under the feet of an elephant, and manifestoes
were diligently circulated, exhorting the Persians to assert their
freedom against an odious and contemptible tyrant. The defection
was rapid and universal; his loyal slaves were sacrificed to the public
fury, and the troops deserted to the standard of Bahram.
As the passes were faithfully guarded,
[590-591 a.d.] Hormuz could only compute the number of his
enemies by the testimony of a guilty conscience
and the daily defection of those who, in the hour of his distress,
avenged their wrongs or forgot their obligations. He proudly
displayed the ensigns of royalty; but the city and palace of Modain
had already escaped from the hand of the tyrant. Among the victims
of his cruelty, Bindoes, a Sassanian prince, had been cast into a
dungeon; his fetters were broken by the zeal and courage of a
brother; and he stood before the king at the head of those trusty
guards who had been chosen as the ministers of his confinement,
and perhaps of his death. Alarmed by the hasty intrusion and bold
reproaches of the captive, Hormuz looked round, but in vain, for
advice or assistance; discovered that his strength consisted in the
obedience of others, and patiently yielded to the single arm of
Bindoes, who dragged him from the throne to the same dungeon in
which he himself had been so lately confined.
Chosroes, the eldest of the sons of Hormuz, escaped from the city.
Attended only by his concubines, and a troop of thirty guards, he
secretly departed from the capital, followed the banks of the
Euphrates, traversed the desert, and halted at the distance of ten
miles from Circesium. About the third watch of the night the Roman
prefect was informed of his approach, and he introduced the royal
stranger to the fortress at the dawn of day. From thence the king of
Persia was conducted to the more honourable residence of
Hierapolis; and Maurice dissembled his pride and displayed his
benevolence, at the reception of the letters and ambassadors of the
grandson of Nushirvan. They humbly represented the vicissitudes of
fortune and the common interest of princes, exaggerated the
ingratitude of Bahram, the agent of the evil principle, and urged,
with specious argument, that it was for the advantage of the
Romans themselves to support the two monarchies which balance
the world, the two great luminaries by whose salutary influence it is
vivified and adorned. The anxiety of Chosroes was soon relieved by
the assurance that the emperor had espoused the cause of justice
and royalty; but Maurice prudently declined the expense and delay
of his useless visit to Constantinople.
In the name of his generous benefactor, a rich diadem was
presented to the fugitive prince, with an inestimable gift of jewels
and gold; a powerful army was assembled on the frontiers of Syria
and Armenia, under the command of the valiant and faithful Narses,
and this general, of his own nation and his own choice, was directed
to pass the Tigris and never to sheath his sword till he had restored
Chosroes to the throne of his ancestors. After the junction of the
imperial troops, which Bahram vainly struggled to prevent, the
contest was decided by two battles on the banks of the Zab and the
confines of Media. The Romans, with the faithful subjects of Persia,
amounted to sixty thousand, while the whole force of the usurper
did not exceed forty thousand men; the two generals signalised their
valour and ability, but the victory was finally determined by the
prevalence of numbers and discipline. With the remnant of a broken
army, Bahram fled towards the eastern provinces of the Oxus; the
enmity of Persia reconciled him to the Turks; but his days were
shortened by poison, perhaps the most incurable of poisons—the
stings of remorse and despair and the bitter remembrance of lost
glory. Yet the modern Persians still commemorate the exploits of
Bahram; and some excellent laws have prolonged the duration of his
troubled and transitory reign.
The restoration of Chosroes was celebrated with feasts and
executions; and the music of the royal banquet was often disturbed
by the groans of dying or mutilated criminals. A band of a thousand
Romans, who continued to guard the person of Chosroes,
proclaimed his confidence in the fidelity of the strangers; his growing
strength enabled him to dismiss this unpopular aid, but he steadily
professed the same gratitude and reverence to his adopted father;
and till the death of Maurice the peace and alliance of the two
empires were faithfully maintained. Yet the mercenary friendship of
the Roman prince had been purchased with costly and important
gifts; the strong cities of Martyropolis and Dara were restored, and
the Pers-Armenians became the willing subjects of an empire whose
eastern limit was extended, beyond the example of former times, as
far as the banks of the Araxes and the neighbourhood of the
Caspian. A pious hope was indulged that the church, as well as the
state, might triumph in this revolution; but if Chosroes had sincerely
listened to the Christian bishops, the impression was erased by the
zeal and eloquence of the magi; if he was armed with philosophic
indifference, he accommodated his belief, or rather his professions,
to the various circumstances of an exile and a sovereign.

THE AVARS

While the majesty of the Roman name was


[570-602 a.d.] revived in the East, the prospect of Europe is
less pleasing and less glorious. By the departure
of the Lombards and the ruin of the Gepidæ, the balance of power
was destroyed on the Danube; and the Avars spread their
permanent dominion from the foot of the Alps to the sea coast of
the Euxine. The reign of Baian is the brightest era of their monarchy;
their chagan, who occupied the rustic palace of Attila, appears to
have imitated his character and policy; but as the same scenes were
repeated in a smaller circle, a minute representation of the copy
would be devoid of the greatness and novelty of the original. The
pride of the second Justin, of Tiberius and Maurice, was humbled by
a proud barbarian, more prompt to inflict than exposed to suffer the
injuries of war; and as often as Asia was threatened by the Persian
arms, Europe was oppressed by the dangerous inroads or costly
friendship of the Avars.
When the Roman envoys approached the presence of the chagan,
they were commanded to wait at the door of his tent till, at the end
perhaps of ten or twelve days, he condescended to admit them. If
the substance or the style of their message was offensive to his ear,
he insulted, with real or affected fury, their own dignity and that of
their prince; their baggage was plundered, and their lives were only
saved by the promise of a richer present and a more respectful
address. But his sacred ambassadors enjoyed and abused an
unbounded license in the midst of Constantinople; they urged, with
importunate clamours, the increase of tribute or the restitution of
captives and deserters; and the majesty of the empire was almost
equally degraded by a base compliance, or by the false and fearful
excuses with which they eluded such insolent demands.
In the language of a barbarian without guile, the prince of the
Avars affected to complain of the insincerity of the Greeks; yet he
was not inferior to the most civilised nations in the refinements of
dissimulation and perfidy. As the successor of the Lombards, the
chagan asserted his claim to the important city of Sirmium, the
ancient bulwark of the Illyrian provinces. The plains of lower
Hungary were covered with the Avar horse, and a fleet of large
boats was built in the Hercynian wood, to descend the Danube and
to transport into the Savus the materials of a bridge. But as the
strong garrison of Singidunum, which commanded the conflux of the
two rivers, might have stopped their passage and baffled his
designs, he dispelled their apprehensions by a solemn oath that his
views were not hostile to the empire. He swore by his sword, the
symbol of the god of war, that he did not, as the enemy of Rome,
construct a bridge upon the Savus. “If I violate my oath,” pursued
the intrepid Baian, “may I myself, and the last of my nation, perish
by the sword; may the heavens and fire, the deity of the heavens,
fall upon our heads! may the forests and mountains bury us in their
ruins! and the Savus returning, against the laws of nature, to his
source, overwhelm us in his angry waters!”
After this barbarous imprecation, he calmly inquired what oath
was most sacred and venerable among the Christians, what guilt of
perjury it was most dangerous to incur. The bishop of Singidunum
presented the Gospel, which the chagan received with devout
reverence. “I swear,” said he, “by the God who has spoken in this
holy book, that I have neither falsehood on my tongue nor treachery
in my heart.” As soon as he rose from his knees, he accelerated the
labour of the bridge, and despatched an envoy to proclaim what he
no longer wished to conceal. “Inform the emperor,” said the
perfidious Baian, “that Sirmium is invested on every side. Advise his
prudence to withdraw the citizens and their effects, and to resign a
city which it is now impossible to relieve or defend.”
Without the hope of relief, the defence of Sirmium was prolonged
above three years; the walls were still untouched; but famine was
enclosed within the walls, till a merciful capitulation allowed the
escape of the naked and hungry inhabitants. Singidunum, at the
distance of fifty miles, experienced a more cruel fate; the buildings
were razed, and the vanquished people was condemned to servitude
and exile. Yet the ruins of Sirmium are no longer visible; the
advantageous situation of Singidunum soon attracted a new colony
of Slavonians, and the conflux of the Savus and Danube is still
guarded by the fortifications of Belgrade, or the White City, so often
and so obstinately disputed by the Christian and Turkish arms. From
Belgrade to the walls of Constantinople, a line may be measured of
six hundred miles; that line was marked with flames and with blood;
the horses of the Avars were alternately bathed in the Euxine and
the Adriatic; and the Roman pontiff, alarmed by the approach of a
more savage enemy, was reduced to cherish the Lombards as the
protectors of Italy. The despair of a captive, whom his country
refused to ransom, disclosed to the Avars the invention and practice
of military engines; but in the first attempts, they were rudely
framed and awkwardly managed; and the resistance of
Diocletianopolis and Berœa, of Philippopolis and Hadrianopolis, soon
exhausted the skill and patience of the besiegers.
The warfare of Baian was that of a Tatar; yet his mind was
susceptible of a humane and generous sentiment: he spared
Anchialus, whose salutary waters had restored the health of the best
beloved of his wives; and the Romans confessed that their starving
army was fed and dismissed by the liberality of a foe. His empire
extended over Hungary, Poland, and Prussia, from the mouth of the
Danube to that of the Oder; and his new subjects were divided and
transplanted by the jealous policy of the conqueror. The eastern
regions of Germany, which had been left vacant by the emigration of
the Vandals, were replenished with Slavonian colonists; the same
tribes are discovered in the neighbourhood of the Adriatic and of the
Baltic, and with the name of Baian himself the Illyrian cities of
Neisse and Lissa are again found in the heart of Silesia. In the
disposition both of his troops and provinces the chagan exposed the
vassals, whose lives he disregarded, to the first assault; and the
swords of the enemy were blunted before they encountered the
native valour of the Avars.
The Persian alliance restored the troops of the
[592-594 a.d.] East to the defence of Europe; and Maurice,
who had supported for ten years the insolence
of the chagan, declared his resolution to march in person against the
barbarians. In the space of two centuries, none of the successors of
Theodosius had appeared in the field; their lives were supinely spent
in the palace of Constantinople, and the Greeks could no longer
understand that the name of emperor, in its primitive sense, denoted
the chief of the armies of the republic. The martial ardour of Maurice
was opposed by the grave flattery of the senate, the timid
superstition of the patriarch, and the tears of the empress
Constantina; and they all conjured him to devolve on some meaner
general the fatigues and perils of a Scythian campaign.

A Byzantine Sacred Vessel

Deaf to their advice and entreaty, the emperor boldly advanced


seven miles from the capital; the sacred ensign of the cross was
displayed in the front, and Maurice reviewed, with conscious pride,
the arms and numbers of the veterans who had fought and
conquered beyond the Tigris. Anchialus saw the last term of his
progress by sea and land. He solicited, without success, a miraculous
answer to his nocturnal prayers; his mind was confounded by the
death of a favourite horse, the encounter of a wild boar, a storm of
wind and rain, and the birth of a monstrous child; and he forgot that
the best of omens is to unsheathe our sword in the defence of our
country. Under the pretence of receiving the ambassadors of Persia,
the emperor returned to Constantinople, exchanged the thoughts of
war for those of devotion, and disappointed the public hope by his
absence and the choice of his lieutenants. The blind partiality of
fraternal love might excuse the promotion of his brother Peter, who
fled with equal disgrace from the barbarians, from his own soldiers,
and from the inhabitants of a Roman city. That city, if we may credit
the resemblance of name and character, was the famous
Azimuntium, which had alone repelled the tempest of Attila. The
example of her warlike youth was propagated to succeeding
generations; and they obtained, from the first or second Justin, an
honourable privilege, that their valour should be always reserved for
the defence of their native country. The brother of Maurice
attempted to violate this privilege, and to mingle a patriot band with
the mercenaries of his camp; they retired to the church. He was not
awed by the sanctity of the place; the people rose in their cause, the
ramparts were manned; and Peter proved himself a coward.
The military fame of Comentiolus is the object
[594-600 a.d.] of satire or comedy rather than of serious
history, since he was even deficient in the vile
and vulgar qualification of personal courage. His solemn councils,
strange evolutions, and secret orders always supplied an apology for
flight or delay. If he marched against the enemy, the pleasant valleys
of Mount Hæmus opposed an insuperable barrier; but in his retreat
he explored with fearless curiosity the most difficult and obsolete
paths, which had almost escaped the memory of the oldest native.
The only blood which he lost was drawn, in a real or affected
malady, by the lancet of a surgeon; and his health, which felt with
exquisite sensibility the approach of the barbarians, was uniformly
restored by the repose and safety of the winter season. A prince
who could promote and support this unworthy favourite must derive
no glory from the accidental merit of his colleague Priscus. In five
successive battles, which seem to have been conducted with skill
and resolution, 17,200 barbarians were made prisoners; near sixty
thousand, with four sons of the chagan, were slain. The Roman
general surprised a peaceful district of Gepidæ, who slept under the
protection of the Avars; and his last trophies were erected on the
banks of the Danube and the Theiss. Since the death of Trajan, the
arms of the empire had not penetrated so deeply into the old Dacia;
yet the success of Priscus was transient and barren, and he was
soon recalled, by the apprehension that Baian, with dauntless spirit
and recruited forces, was preparing to avenge his defeat under the
walls of Constantinople.

STATE OF THE ROMAN ARMIES

The theory of war was not more familiar to the camps of Cæsar
and Trajan than to those of Justinian and Maurice. The iron of
Tuscany or Pontus still received the keenest temper from the skill of
the Byzantine workmen. The magazines were plentifully stored with
every species of offensive and defensive arms. In the construction
and use of ships, engines, and fortifications, the barbarians admired
the superior ingenuity of a people whom they so often vanquished in
the field. The science of tactics, the order, evolutions, and
stratagems of antiquity, were transcribed and studied in the books of
the Greeks and Romans. But the solitude or degeneracy of the
provinces could no longer supply a race of men to handle those
weapons, to guard those walls, to navigate those ships, and to
reduce the theory of war into bold and successful practice.
The genius of Belisarius and Narses had been formed without a
master, and expired without a disciple. Neither honour, nor
patriotism, nor generous superstition, could animate the lifeless
bodies of slaves and strangers, who had succeeded to the honours
of the legions. It was in the camp alone that the emperor should
have exercised a despotic command; it was only in the camps that
his authority was disobeyed and insulted; he appeased and inflamed
with gold the licentiousness of the troops; but their vices were
inherent, their victories were accidental, and their costly
maintenance exhausted the substance of a state which they were
unable to defend. After a long and pernicious indulgence, the cure of
this inveterate evil was undertaken by Maurice; but the rash
attempt, which drew destruction on his own head, tended only to
aggravate the disease. A reformer should be exempt from the
suspicion of interest, and he must possess the confidence and
esteem of those whom he proposes to reclaim. The troops of
Maurice might listen to the voice of a victorious leader; they
disdained the admonitions of statesmen and sophists; and when
they received an edict which deducted from their pay the price of
their arms and clothing, they execrated the avarice of a prince
insensible of the dangers and fatigues from which he had escaped.
The camps both of Asia and Europe were agitated with frequent
and furious seditions; the enraged soldiers of Edessa pursued, with
reproaches, with threats, with wounds, their trembling generals;
they overturned the statues of the emperor, cast stones against the
miraculous image of Christ, and either rejected the yoke of all civil
and military laws or instituted a dangerous model of voluntary
subordination. The monarch, always distant and often deceived, was
incapable of yielding or persisting according to the exigence of the
moment. But the fear of a general revolt induced him too readily to
accept any act of valour or any expression of loyalty as an
atonement for the popular offence; the new reform was abolished as
hastily as it had been announced, and the troops, instead of
punishment and restraint, were agreeably surprised by a gracious
proclamation of immunities and rewards. But the soldiers accepted
without gratitude the tardy and reluctant gifts of the emperor; their
insolence was elated by the discovery of his weakness and their own
strength, and their mutual hatred was inflamed beyond the desire of
forgiveness or the hope of reconciliation.
The historians of the times adopt the vulgar suspicion that Maurice
conspired to destroy the troops whom he had laboured to reform;
the misconduct and favour of Comentiolus are imputed to this
malevolent design; and every age must condemn the inhumanity or
avarice of a prince who, by the trifling ransom of six thousand pieces
of gold, might have prevented the massacre of twelve thousand
prisoners in the hands of the chagan.[33] In the just fervour of
indignation, an order was signified to the army of the Danube that
they should spare the magazines of the province, and establish their
winter quarters in the hostile country of the Avars. The measure of
their grievances was full; they pronounced Maurice unworthy to
reign, expelled or slaughtered his faithful adherents, and, under the
command of Phocas, a simple centurion, returned by hasty marches
to the neighbourhood of Constantinople.

REBELLION AGAINST MAURICE

After a long series of legal successions, the


[600-602 a.d.] military disorders of the third century were
again revived; yet such was the novelty of the
enterprise that the insurgents were awed by their own rashness.
They hesitated to invest their favourite with the vacant purple; and
while they rejected all treaty with Maurice himself, they held a
friendly correspondence with his son Theodosius, and with
Germanus, the father-in-law of the royal youth. So obscure had been
the former condition of Phocas that the emperor was ignorant of the
name and character of his rival; but as soon as he learned that the
centurion, though bold in sedition, was timid in the face of danger,
“Alas!” cried the desponding prince, “if he is a coward, he will surely
be a murderer.”
Yet if Constantinople had been firm and faithful, the murderer
might have spent his fury against the walls; and the rebel army
would have been gradually consumed or reconciled by the prudence
of the emperor. In the games of the circus, which he repeated with
unusual pomp, Maurice disguised, with smiles of confidence, the
anxiety of his heart, condescended to solicit the applause of the
factions, and flattered their pride by accepting from their respective
tribunes a list of nine hundred blues and fifteen hundred greens,
whom he affected to esteem as the solid pillars of his throne. Their
treacherous or languid support betrayed his weakness and hastened
his fall; the green faction were the secret accomplices of the rebels,
and the blues recommended lenity and moderation in a contest with
their Roman brethren.
The rigid and parsimonious virtues of Maurice had long since
alienated the hearts of his subjects; as he walked barefoot in a
religious procession, he was rudely assaulted with stones, and his
guards were compelled to present their iron maces in the defence of
his person. A fanatic monk ran through the streets with a drawn
sword, denouncing against him the wrath and the sentence of God;
and a vile plebeian, who represented his countenance and apparel,
was seated on an ass and pursued by the imprecations of the
multitude.
The emperor suspected the popularity of Germanus with the
soldiers and citizens; he feared, he threatened, but he delayed to
strike; the patrician fled to the sanctuary of the church; the people
rose in his defence, the walls were deserted by the guards, and the
lawless city was abandoned to the flames and rapine of a nocturnal
tumult. In a small bark the unfortunate Maurice, with his wife and
nine children, escaped to the Asiatic shore; but the violence of the
wind compelled him to land at the church of St. Autonomus, near
Chalcedon, from whence he despatched Theodosius, his eldest son,
to implore the gratitude and friendship of the Persian monarch. For
himself he refused to fly; his body was tortured with sciatic pains,
his mind was enfeebled by superstition; he patiently awaited the
event of the revolution, and addressed a fervent and public prayer to
the Almighty, that the punishment of his sins might be inflicted in
this world rather than in a future life.
After the abdication of Maurice, the two factions disputed the
choice of an emperor; but the favourite of the blues was rejected by
the jealousy of their antagonists, and Germanus himself was hurried
along by the crowds, who rushed to the palace of Hebdomon, seven
miles from the city, to adore the majesty of Phocas the centurion. A
modest wish of resigning the purple to the rank and merit of
Germanus was opposed by his resolution, more obstinate and
equally sincere; the senate and clergy obeyed his summons; and as
soon as the patriarch was assured of his orthodox
belief, he consecrated the successful usurper in
the church of St. John the Baptist. On the third
day, amidst the acclamations of a thoughtless
people, Phocas made his public entry in a chariot
drawn by four white horses; the revolt of the
troops was rewarded by a lavish donative, and
the new sovereign, after visiting the palace,
beheld from his throne the games of the
Hippodrome. In a dispute of precedency between
the two factions, his partial judgment inclined in
favour of the greens. “Remember that Maurice is
still alive,” resounded from the opposite side; and
the indiscreet clamour of the blues admonished
and stimulated the cruelty of the tyrant. The
ministers of death were despatched to
Chalcedon; they dragged the emperor from his
A Byzantine Officer sanctuary; and the five sons of Maurice were
successively murdered before the eyes of their
agonising parent. At each stroke, which he felt in
his heart, he found strength to rehearse a pious ejaculation: “Thou
art just, O Lord! and thy judgments are righteous.” And such, in the
last moments, was his rigid attachment to truth and justice, that he
revealed to the soldiers the pious falsehood of a nurse who
presented her own child in the place of a royal infant.
The tragic scene was finally closed by the execution of the
emperor himself, in the twentieth year of his reign and the sixty-third
of his age (602). The bodies of the father and his five sons were cast
into the sea, their heads were exposed at Constantinople to the
insults or pity of the multitude; and it was not till some signs of
putrefaction had appeared that Phocas connived at the private burial
of these venerable remains. In that grave the faults and errors of
Maurice were kindly interred. His fate alone was remembered; and
at the end of twenty years, in the recital of the history of
Theophylact, the mournful tale was interrupted by the tears of the
audience.

PHOCAS EMPEROR (602-610)

Such tears must have flowed in secret, and


[602-610 a.d.] such compassion would have been criminal,
under the reign of Phocas, who was peaceably
acknowledged in the provinces of the East and West. The images of
the emperor and his wife, Leontia, were exposed in the Lateran to
the veneration of the clergy and senate of Rome, and afterwards
deposited in the palace of the Cæsars, between those of Constantine
and Theodosius. As a subject and a Christian, it was the duty of
Gregory to acquiesce in the established government; but the joyful
applause with which he salutes the fortune of the assassin has
sullied with indelible disgrace the character of the saint.
The successor of the Apostles might have inculcated with decent
firmness the guilt of blood and the necessity of repentance; he is
content to celebrate the deliverance of the people and the fall of the
oppressor; to rejoice that the piety and benignity of Phocas have
been raised by providence to the imperial throne; to pray that his
hands may be strengthened against all his enemies; and to express
a wish, perhaps a prophecy, that, after a long and triumphant reign,
he may be transferred from a temporal to an everlasting kingdom.
We have already traced the steps of a revolution so pleasing, in
Gregory’s opinion, both to heaven and earth; and Phocas does not
appear less hateful in the exercise than in the acquisition of power.
The pencil of an impartial historian has delineated the portrait of a
monster—his diminutive and deformed person, the closeness of his
shaggy eyebrows, his red hair, his beardless chin, and his cheek
disfigured and discoloured by a formidable scar. Ignorant of letters,
of laws, and even of arms, he indulged in the supreme rank a more
ample privilege of lust and drunkenness, and his brutal pleasures
were either injurious to his subjects or disgraceful to himself.
Without assuming the office of a prince, he renounced the
profession of a soldier; and the reign of Phocas afflicted Europe with
ignominious peace and Asia with desolating war. His savage temper
was inflamed by passion, hardened by fear, exasperated by
resistance or reproach.
The flight of Theodosius to the Persian court had been intercepted
by a rapid pursuit or a deceitful message; he was beheaded at
Nicæa, and the last hours of the young prince were soothed by the
comforts of religion and the consciousness of innocence. Yet this
phantom disturbed the repose of the usurper; a whisper was
circulated through the East that the son of Maurice was still alive;
the people expected their avenger, and the widow and daughters of
the late emperor would have adopted as their son and brother the
vilest of mankind. In the massacre of the imperial family, the mercy,
or rather the discretion, of Phocas had spared these unhappy
females, and they were decently confined to a private house. But the
spirit of the empress Constantina, still mindful of her father, her
husband, and her sons, aspired to freedom and revenge. At the
dead of night, she escaped to the sanctuary of St. Sophia; but her
tears, and the gold of her associate Germanus, were insufficient to
provoke an insurrection. Her life was forfeited to revenge, and even
to justice: but the patriarch obtained and pledged an oath for her
safety; a monastery was allotted for her prison, and the widow of
Maurice accepted and abused the lenity of his assassin.
The discovery or the suspicion of a second conspiracy dissolved
the engagements and rekindled the fury of Phocas. A matron who
commanded the respect and pity of mankind, the daughter, wife,
and mother of emperors, was tortured like the vilest malefactor, to
force a confession of her designs and associates; and the empress
Constantina, with her three innocent daughters, was beheaded at
Chalcedon, on the same ground which had been stained with the
blood of her husband and five sons. After such an example, it would
be superfluous to enumerate the names and sufferings of meaner
victims. Their condemnation was seldom preceded by the forms of
trial, and their punishment was embittered by the refinements of
cruelty: their eyes were pierced, their tongues were torn from the
root, the hands and feet were amputated; some expired under the
lash, others in the flames, others again were transfixed with arrows;
and a simple speedy death was mercy which they could rarely
obtain. The Hippodrome, the sacred asylum of the pleasures and the
liberty of the Romans, was polluted with heads and limbs and
mangled bodies; and the companions of Phocas were the most
sensible that neither his favour, nor their services, could protect
them from a tyrant, the worthy rival of the Caligulas and Domitians
of the first age of the empire.
A daughter of Phocas, his only child, was given in marriage to the
patrician Crispus, and the royal images of the bride and bridegroom
were indiscreetly placed in the circus by the side of the emperor. The
father must desire that his posterity should inherit the fruit of his
crimes, but the monarch was offended by this premature and
popular association: the tribunes of the green faction, who accused
the officious error of their sculptors, were condemned to instant
death: their lives were granted to the prayers of the people; but
Crispus might reasonably doubt whether a jealous usurper could
forget and pardon his involuntary competition. The green faction
was alienated by the ingratitude of Phocas and the loss of their
privileges; every province of the empire was ripe for rebellion; and
Heraclius, exarch of Africa, persisted above two years in refusing all
tribute and obedience to the centurion who disgraced the throne of
Constantinople.
By the secret emissaries of Crispus and the senate, the
independent exarch was solicited to save and to govern his country;
but his ambition was chilled by age, and he resigned the dangerous
enterprise to his son Heraclius, and to Nicetas, the son of Gregory,
his friend and lieutenant. The powers of Africa were armed by the
two adventurous youths; they agreed that the one should navigate
the fleet from Carthage to Constantinople, that the other should lead
an army through Egypt and Asia, and that the imperial purple should
be the reward of diligence and success. A faint rumour of their
undertaking was conveyed to the ears of Phocas, and the wife and
mother of the younger Heraclius were secured as the hostages of his
faith: but the treacherous art of Crispus extenuated the distant peril,
the means of defence were neglected or delayed, and the tyrant
supinely slept till the African navy cast anchor in the Hellespont.
Their standard was joined at Abydos by the fugitives and exiles who
thirsted for revenge; the ships of Heraclius, whose lofty masts were
adorned with the holy symbols of religion, steered their triumphant
course through the Propontis; and Phocas beheld from the windows
of the palace his approaching and inevitable fate. The green faction
was tempted by gifts and promises to oppose a feeble and fruitless
resistance to the landing of the Africans; but the people, and even
the guards, were determined by the well-timed defection of Crispus;
and the tyrant was seized by a private enemy, who boldly invaded
the solitude of the palace. Stripped of the diadem and purple,
clothed in a vile habit, and loaded with chains, he was transported in
a small boat to the imperial galley of Heraclius, who reproached him
with the crimes of his abominable reign. “Wilt thou govern better?”
were the last words of the despair of Phocas. After suffering each
variety of insult and torture, his head was severed from his body, the
mangled trunk was cast into the flames, and the same treatment
was inflicted on the statues of the vain usurper and the seditious
banner of the green faction (610 a.d.).

HERACLIUS EMPEROR (610-641)

The voice of the clergy, the senate, and the people, invited
Heraclius to ascend the throne which he had purified from guilt and
ignominy; after some graceful hesitation, he yielded to their
entreaties. His coronation was accompanied by that of his wife
Eudocia; and their posterity, till the fourth generation, continued to
reign over the Empire of the East. The voyage of Heraclius had been
easy and prosperous, the tedious march of Nicetas was not
accomplished before the decision of the contest; but he submitted
without a murmur to the fortune of his friend, and his laudable
intentions were rewarded with an equestrian statue and a daughter
of the emperor. It was more difficult to trust the fidelity of Crispus,
whose recent services were recompensed by the command of the
Cappadocian army. His arrogance soon provoked, and seemed to
excuse, the ingratitude of his new sovereign. In the presence of the
senate, the son-in-law of Phocas was condemned to embrace the
monastic life; and the sentence was justified by the weighty
observation of Heraclius that the man who had betrayed his father
could never be faithful to his friend.
Even after his death, the republic was afflicted by the crimes of
Phocas, which armed with a pious cause the most formidable of her
enemies. According to the friendly and equal forms of the Byzantine
and Persian courts, he announced his exaltation to the throne; and
his ambassador Lilius, who had presented him with the heads of
Maurice and his sons, was the best qualified to describe the
circumstances of the tragic scene. However it might be varnished by
fiction or sophistry, Chosroes turned with horror from the assassin,
imprisoned the pretended envoy, disclaimed the usurper, and
declared himself the avenger of his father and benefactor. The
sentiments of grief and resentment, which humanity would feel and
honour would dictate, promoted, on this occasion, the interest of the
Persian king; and his interest was powerfully magnified by the
national and religious prejudices of the magi and satraps. In a strain
of artful adulation which assumed the language of freedom, they
presumed to censure the excess of his gratitude and friendship for
the Greeks—a nation with whom it was dangerous to conclude either
peace or alliance; whose superstition was devoid of truth and
justice, and who must be incapable of any virtue, since they could
perpetrate the most atrocious of crimes—the impious murder of their
sovereign. For the crime of an ambitious centurion, the nation which
he oppressed was chastised with the calamities of war; and the
same calamities, at the end of twenty years, were retaliated and
redoubled on the heads of the Persians. The general who had
restored Chosroes to the throne, still commanded in the East; and
the name of Narses was the formidable sound with which the
Assyrian mothers were accustomed to terrify their infants.
Jerusalem

But the hero could not depend on the faith of a tyrant; and the
tyrant was conscious how little he deserved the obedience of a hero.
Narses was removed from his military command; he reared an
independent standard at Hierapolis in Syria: he was betrayed by
fallacious promises, and burned alive in the market-place of
Constantinople. Deprived of the only chief whom they could fear or
esteem, the bands which he had led to victory were twice broken by
the cavalry, trampled by the elephants, and pierced by the arrows of
the barbarians; and a great number of the captives were beheaded
on the field of battle by the sentence of the victor, who might justly
condemn these seditious mercenaries as the authors or accomplices
of the death of Maurice. Under the reign of Phocas, the fortifications
of Merdin, Dara, Amida, and Edessa were successively besieged,
reduced, and destroyed by the Persian monarch; he passed the
Euphrates, occupied the Syrian cities, Hierapolis, Chalcis, and Berœa
or Aleppo, and soon encompassed the walls of Antioch with his
irresistible arms. The rapid tide of success discloses the decay of the
empire, the incapacity of Phocas, and the disaffection of his
subjects; and Chosroes provided a decent apology for their
submission or revolt, by an impostor who attended his camp as the
son of Maurice and the lawful heir of the monarchy.
The first intelligence from the East which Heraclius received, was
that of the loss of Antioch; but the aged metropolis, so often
overturned by earthquakes and pillaged by the enemy, could supply
but a small and languid stream of treasure and blood. The Persians
were equally successful and more fortunate in the sack of Cæsarea,
the capital of Cappadocia.
After the reduction of Galilee, and the region beyond the Jordan,
whose resistance appears to have delayed the fate of the capital,
Jerusalem itself was taken by assault. The sepulchre of Christ, and
the stately churches of Helena and Constantine, were consumed, or
at least damaged, by the flames; the devout offerings of three
hundred years were rifled in one sacrilegious day; the patriarch
Zachariah and the True Cross were transported into Persia; and the
massacre of ninety thousand Christians is imputed to the Jews and
Arabs who swelled the disorder of the Persian march. The fugitives
of Palestine were entertained at Alexandria by the charity of Joannes
the archbishop, who is distinguished among a crowd of saints by the
epithet of alms-giver; and the revenues of the church, with a
treasure of three hundred thousand pounds, were restored to the
true proprietors, the poor of every country and every denomination.
But Egypt itself, the only province which had
[615-617 a.d.] been exempt, since the time of Diocletian, from
foreign and domestic war, was again subdued
by the successors of Cyrus. Pelusium, the key of that impervious
country, was surprised by the cavalry of the Persians; they passed,
with impunity, the innumerable channels of the Delta, and explored
the long valley of the Nile, from the pyramids of Memphis to the
confines of Ethiopia. Alexandria might have been relieved by a naval
force, but the archbishop and the prefect embarked for Cyprus; and
Chosroes entered the second city of the empire, which still preserved
a wealthy remnant of industry and commerce. His western trophy
was erected, not on the walls of Carthage, but in the neighbourhood
of Tripoli; the Greek colonies of Cyrene were finally extirpated; and
the conqueror, treading in the footsteps of Alexander, returned in
triumph through the sands of the Libyan desert. In the same
campaign, another army advanced from the Euphrates to the
Thracian Bosporus; Chalcedon surrendered after a long siege, and a
Persian camp was maintained above ten years in the presence of
Constantinople. The sea coast of Pontus, the city of Ancyra, and the
isle of Rhodes, are enumerated among the last conquests of the
great king; and if Chosroes had possessed any maritime power, his
boundless ambition would have spread slavery and desolation over
the provinces of Europe.

A Byzantine Priest

From the long-disputed banks of the Tigris and Euphrates, the


reign of the grandson of Nushirvan was suddenly extended to the
Hellespont and the Nile, the ancient limits of the Persian monarchy.
But the provinces, which had been fashioned by the habits of six
hundred years to the virtues and vices of the Roman government,
supported with reluctance the yoke of the barbarians. The idea of a
republic was kept alive by the institutions, or at least by the writings,
of the Greeks and Romans, and the subjects of Heraclius had been
educated to pronounce the words of liberty and law. But it has
always been the pride and policy of oriental princes to display the
titles and attributes of their omnipotence; to upbraid a nation of
slaves with their true name and abject condition, and to enforce, by
cruel and insolent threats, the rigour of their absolute commands.
The Christians of the East were scandalised by the worship of fire
and the impious doctrine of the two principles; the magi were not
less intolerant than the bishops, and the martyrdom of some native
Persians, who had deserted the religion of Zoroaster, was conceived
to be the prelude of a fierce and general persecution. By the
oppressive laws of Justinian, the adversaries of the church were
made the enemies of the state; the alliance of the Jews, Nestorians,
and Jacobites had contributed to the success of Chosroes, and his
partial favour to the sectaries provoked the hatred and fears of the
Catholic clergy. Conscious of their fear and hatred, the Persian
conqueror governed his new subjects with an iron sceptre; and as if
he suspected the stability of his dominion, he exhausted their wealth
by exorbitant tributes and licentious rapine, despoiled or demolished
the temples of the East, and transported to his hereditary realms the
gold, the silver, the precious marbles, the arts, and the artists of the
Asiatic cities.
While the Persian monarch contemplated the wonders of his art
and power, he received an epistle from an obscure citizen of Mecca,
inviting him to acknowledge Mohammed as the apostle of God. He
rejected the invitation, and tore the epistle. “It is thus,” exclaimed
the Arabian prophet, “that God will tear the kingdom, and reject the
supplications of Chosroes.” Placed on the verge of the two great
empires of the East, Mohammed observed with secret joy the
progress of their mutual destruction; and in the midst of the Persian
triumphs, he ventured to foretell that, before many years should
elapse, victory would again return to the banners of the Romans.

HERACLIUS PLANS TO REMOVE THE CAPITAL TO CARTHAGE


(618)

At the time when this prediction is said to


[618 a.d.] have been delivered, no prophecy could be
more distant from its accomplishment, since the first twelve years of
Heraclius announced the approaching dissolution of the empire. If
the motives of Chosroes had been pure and honourable, he must
have ended the quarrel with the death of Phocas, and he would
have embraced, as his best ally, the fortunate African who had so
generously avenged the injuries of his benefactor Maurice. The
prosecution of the war revealed the true character of the barbarian;
and the suppliant embassies of Heraclius to beseech his clemency
that he would spare the innocent, accept a tribute, and give peace
to the world, were rejected with contemptuous silence or insolent
menace. Syria, Egypt, and the provinces of Asia were subdued by
the Persian arms, while Europe, from the confines of Istria to the
long wall of Thrace, was oppressed by the Avars, unsatiated with the
blood and rapine of the Italian War.
By these implacable enemies, Heraclius, on either side, was
insulted and besieged: and the Roman Empire was reduced to the
walls of Constantinople, with the remnant of Greece, Italy, and
Africa, and some maritime cities, from Tyre to Trebizond, of the
Asiatic coast. After the loss of Egypt, the capital was afflicted with
famine and pestilence; and the emperor, incapable of resistance and
hopeless of relief, had resolved to transfer his person and
government to the more secure residence of Carthage. His ships
were already laden with the treasures of the palace; but his flight
was arrested by the patriarch, who armed the powers of religion in
the defence of his country, led Heraclius to the altar of St. Sophia,
and extorted a solemn oath, that he would live and die with the
people whom God had entrusted to his care.
The chagan was encamped in the plains of Thrace; but he
dissembled his perfidious designs, and solicited an interview with the
emperor near the town of Heraclea. Their reconciliation was
celebrated with equestrian games; the senate and people in their
gayest apparel resorted to the festival of peace; and the Avars
beheld, with envy and desire, the spectacle of Roman luxury. On a
sudden the Hippodrome was encompassed by the Scythian cavalry,
who had pressed their secret and nocturnal march: the tremendous
sound of the chagan’s whip gave the signal of the assault; and
Heraclius, wrapping his diadem round his arm, was saved with
extreme hazard by the fleetness of his horse. So rapid was the
pursuit, that the Avars almost entered the golden gate of
Constantinople with the flying crowds; but the plunder of the
suburbs rewarded their treason, and they transported beyond the
Danube 270,000 captives. On the shore of Chalcedon, the emperor
held a safer conference with a more honourable foe, who, before
Heraclius descended from his galley, saluted with reverence and pity
the majesty of the purple.
The friendly offer of Sain, the Persian general, to conduct an
embassy to the presence of the Great King, was accepted with the
warmest gratitude, and the prayer for pardon and peace was humbly
presented by the prætorian prefect, the prefect of the city, and one
of the first ecclesiastics of the patriarchal church. But the lieutenant
of Chosroes had fatally mistaken the intentions of his master. “It was
not an embassy,” said the tyrant of Asia, “it was the person of
Heraclius, bound in chains, that he should have brought to the foot
of my throne. I will never give peace to the emperor of Rome till he
has abjured his crucified God, and embraced the worship of the
sun.” Sain was flayed alive, according to the inhuman practice of his
country; and the separate and rigorous confinement of the
ambassadors violated the law of nations, and the faith of an express
stipulation. Yet the experience of six years at length persuaded the
Persian monarch to renounce the conquest of Constantinople, and to
specify the annual tribute or ransom of the Roman Empire: a
thousand talents of gold, a thousand talents of silver, a thousand silk
robes, a thousand horses, and a thousand virgins. Heraclius
subscribed these ignominious terms; but the time and space which
he obtained to collect such treasure from the poverty of the East
was industriously employed in the preparations of a bold and
desperate attack.

THE AWAKENING OF HERACLIUS


Of the characters conspicuous in history, that
[616-622 a.d.] of Heraclius is one of the most extraordinary
and inconsistent. In the first and the last years
of a long reign, the emperor appears to be the slave of sloth, of
pleasure, or of superstition, the careless and impotent spectator of
the public calamities. But the languid mists of the morning and
evening are separated by the brightness of the meridian sun: the
Arcadius of the palace arose the Cæsar of the camp; and the honour
of Rome and Heraclius was gloriously retrieved by the exploits and
trophies of six adventurous campaigns.
It was the duty of the Byzantine historians to have revealed the
causes of his slumber and vigilance. At this distance we can only
conjecture, that he was endowed with more personal courage than
political resolution; that he was detained by the charms, and
perhaps the arts, of his niece Martina, with whom, after the death of
Eudocia, he contracted an incestuous marriage; and that he yielded
to the base advice of the counsellors, who urged as a fundamental
law that the life of the emperor should never be exposed in the field.
Perhaps he was awakened by the last insolent demand of the
Persian conqueror; but at the moment when Heraclius assumed the
spirit of a hero, the only hopes of the Romans were drawn from the
vicissitudes of fortune which might threaten the proud prosperity of
Chosroes, and must be favourable to those who had attained the
lowest period of depression.
To provide for the expenses of war was the first care of the
emperor; and for the purpose of collecting the tribute, he was
allowed to solicit the benevolence of the Eastern provinces. But the
revenue no longer flowed in the usual channels; the credit of an
arbitrary prince is annihilated by his power; and the courage of
Heraclius was first displayed in daring to borrow the consecrated
wealth of churches, under the solemn vow of restoring, with usury,
whatever he had been compelled to employ in the service of religion
and of the empire. The clergy themselves appear to have
sympathised with the public distress, and the discreet patriarch of
Alexandria, without admitting the precedent of sacrilege, assisted his
sovereign by the miraculous or seasonable revelation of a secret
treasure.[34] Of the soldiers who had conspired with Phocas, only
two were found to have survived the stroke of time and of the
barbarians; the loss, even of these seditious veterans, was
imperfectly supplied by the new levies of Heraclius, and the gold of
the sanctuary united, in the same camp, the names, and arms, and
languages, of the East and West. He would have been content with
the neutrality of the Avars; and his friendly entreaty, that the chagan
would act, not as the enemy but as the guardian of the empire, was
accompanied with a more persuasive donative of two hundred
thousand pieces of gold. Two days after the festival of Easter, the
emperor, exchanging his purple for the simple garb of a penitent and
warrior, gave the signal of his departure. To the faith of the people
Heraclius recommended his children; the civil and military powers
were vested in the most deserving hands, and the discretion of the
patriarch and senate was authorised to save or surrender the city, if
they should be oppressed in his absence by the superior forces of
the enemy.
The neighbouring heights of Chalcedon were covered with tents
and arms: but if the new levies of Heraclius had been rashly led to
the attack, the victory of the Persians in the sight of Constantinople
might have been the last day of the Roman Empire. As imprudent
would it have been to advance into the provinces of Asia, leaving
their innumerable cavalry to intercept his convoys, and continually to
hang on the lassitude and disorder of his rear. But the Greeks were
still masters of the sea; a fleet of galleys, transports, and store-ships
was assembled in the harbour; the barbarians consented to embark;
a steady wind carried them through the Hellespont; the western and
southern coast of Asia Minor lay on their left hand; the spirit of their
chief was first displayed in a storm; and even the eunuchs of his
train were excited to suffer and to work by the example of their
master. He landed his troops on the confines of Syria and Cilicia, in
the Gulf of Scanderoon, where the coast suddenly turns to the
south; and his discernment was expressed in the choice of this
important post.
From all sides, the scattered garrisons of the
[622-623 a.d.] maritime cities and the mountains might repair
with speed and safety to his imperial standard.
The natural fortifications of Cilicia protected, and even concealed,
the camp of Heraclius, which was pitched near Issus, on the same
ground where Alexander had vanquished the host of Darius. The
angle which the emperor occupied was deeply indented into a vast
semicircle of the Asiatic, Armenian, and Syrian provinces; and to
whatsoever point of the circumference he should direct his attack, it
was easy for him to dissemble his own motions, and to prevent
those of the enemy. In the camp of Issus, the Roman general
reformed the sloth and disorder of the veterans, and educated the
new recruits in the knowledge and practice of military virtue.
Unfolding the miraculous image of Christ, he urged them to revenge
the holy altars which had been profaned by the worshippers of fire;
addressing them by the endearing appellations of sons and brethren,
he deplored the public and private wrongs of the republic. The
subjects of a monarch were persuaded that they fought in the cause
of freedom; and a similar enthusiasm was communicated to the
foreign mercenaries, who must have viewed with equal indifference
the interest of Rome and of Persia.
Heraclius himself, with the skill and patience of a centurion,
inculcated the lessons of the school of tactics, and the soldiers were
assiduously trained in the use of their weapons, and the exercises
and evolutions of the field. The cavalry and infantry, in light or heavy
armour, were divided into two parties; the trumpets were fixed in the
centre, and their signals directed the march, the charge, the retreat,
or pursuit; the direct or oblique order, the deep or extended
phalanx; to represent in fictitious combat the operations of genuine
war. Whatever hardship the emperor imposed on the troops, he
inflicted with equal severity on himself; their labour, their diet, their
sleep, were measured by the inflexible rules of discipline; and,
without despising the enemy, they were taught to repose an implicit
confidence in their own valour and the wisdom of their leader.
Cilicia was soon encompassed with the Persian arms; but their
cavalry hesitated to enter the defiles of Mount Taurus, till they were
circumvented by the evolutions of Heraclius, who insensibly gained
their rear, whilst he appeared to present his front in order of battle.
By a false motion, which seemed to threaten Armenia, he drew
them, against their wishes, to a general action. They were tempted
by the artful disorder of his camp; but when they advanced to
combat, the ground, the sun, and the expectation of both armies
were unpropitious to the barbarians; the Romans successfully
repeated their tactics in a field of battle, and the event of the day[35]
declared to the world, that the Persians were not invincible, and that
a hero was invested with the purple.
Strong in victory and fame, Heraclius boldly ascended the heights
of Mount Taurus, directed his march through the plains of
Cappadocia, and established his troops for the winter season in safe
and plentiful quarters on the banks of the river Halys. His soul was
superior to the vanity of entertaining Constantinople with an
imperfect triumph: but the presence of the emperor was
indispensably required to sooth the restless and rapacious spirit of
the Avars.

TRIUMPH OF HERACLIUS

Since the days of Scipio and Hannibal, no


[623-625 a.d.] bolder enterprise has been attempted than that
which Heraclius achieved for the deliverance of
the empire. He permitted the Persians to oppress for a while the
provinces, and to insult with impunity the capital of the East; while
the Roman emperor explored his perilous way through the Black Sea
and the mountains of Armenia, penetrated into the heart of Persia,
and recalled the armies of the Great King to the defence of their
bleeding country. With a select band of five thousand soldiers,
Heraclius sailed from Constantinople to Trebizond; assembled his
forces which had wintered in the Pontic regions; and from the mouth
of the Phasis to the Caspian Sea, encouraged his subjects and allies
to march with the successor of Constantine under the faithful and
victorious banner of the cross.
When the legions of Lucullus and Pompey first passed the
Euphrates, they blushed at their easy victory over the natives of
Armenia. But the long experience of war had hardened the minds
and bodies of that effeminate people; their zeal and bravery were
approved in the service of a declining empire; they abhorred and
feared the usurpation of the house of Sassan, and the memory of
persecution envenomed their pious hatred of the enemies of Christ.
The limits of Armenia, as it had been ceded to the emperor Maurice,
extended as far the Araxes; the river submitted to the indignity of a
bridge; and Heraclius, in the footsteps of Mark Antony, advanced
towards the city of Tauris or Gandzaca, the ancient and modern
capital of one of the provinces of Media. At the head of forty
thousand men, Chosroes himself had returned from some distant
expedition to oppose the progress of the Roman arms; but he
retreated on the approach of Heraclius, declining the generous
alternative of peace or battle.
The rapid conquests of Heraclius were suspended only by the
winter season; a motive of prudence or superstition determined his
retreat into the province of Albania, along the shores of the Caspian;
and his tents were most probably pitched in the plains of Mogan, the
favourite encampment of oriental princes. In the course of this
successful inroad, he signalised the zeal and revenge of a Christian
emperor: at his command, the soldiers extinguished the fire and
destroyed the temples of the magi; the statues of Chosroes, who
aspired to divine honours, were abandoned to the flames; and the
ruin of Thebarma or Ormia, which had given birth to Zoroaster
himself, made some atonement for the injuries of the Holy
Sepulchre. A purer spirit of religion was shown in the relief and
deliverance of fifty thousand captives. Heraclius was rewarded by
their tears and grateful acclamations; but this wise measure, which
spread the fame of his benevolence, diffused the murmurs of the
Persians against the pride and obstinacy of their own sovereign.
Welcome to our website – the ideal destination for book lovers and
knowledge seekers. With a mission to inspire endlessly, we offer a
vast collection of books, ranging from classic literary works to
specialized publications, self-development books, and children's
literature. Each book is a new journey of discovery, expanding
knowledge and enriching the soul of the reade

Our website is not just a platform for buying books, but a bridge
connecting readers to the timeless values of culture and wisdom. With
an elegant, user-friendly interface and an intelligent search system,
we are committed to providing a quick and convenient shopping
experience. Additionally, our special promotions and home delivery
services ensure that you save time and fully enjoy the joy of reading.

Let us accompany you on the journey of exploring knowledge and


personal growth!

textbookfull.com

You might also like