React.js Book: Learning React JavaScript Library From Scratch Greg Sidelnikov download
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/
https://textbookfull.com/product/learning-react-js-learn-react-
js-from-scratch-with-hands-on-projects-2nd-edition-alves/
https://textbookfull.com/product/learning-react-native-building-
native-mobile-apps-with-javascript-2nd-edition-bonnie-eisenman/
https://textbookfull.com/product/deep-learning-from-
scratch-1-converted-edition-seth-weidman/
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/
https://textbookfull.com/product/fullstack-react-native-create-
beautiful-mobile-apps-with-javascript-and-react-native-5th-
edition-devin-abbott/
https://textbookfull.com/product/learning-react-modern-patterns-
for-developing-react-apps-2nd-edition-alex-banks/
https://textbookfull.com/product/innovation-in-public-libraries-
learning-from-international-library-practice-kirstie-nicholson/
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.
Reactive Programming8
Main Principles of Reactive Programming9
Gems and Working in the Mine12
The Essentials14
Special Props21
PropTypes22
Component Instances25
Properties25
Methods26
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
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.
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.)
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:
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.
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.
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.
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.
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.
// HTML
<div class = "LoginForm">
<div class = "Name">
Enter username here.
</div>
</div>
// Ajax counterpart
$.ajax( { url: "/login.php",
data: { "username": "user1",
"password": "abfgh123" },
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.
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.
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.
And here are a few examples of how you would use createElement in practice:
Of course in this case link is the only child, but multiple links can be used as
well, as additional arguments separated by comma:
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.
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:
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.
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:
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:
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.
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:
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.
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.
ReactDOM.render(reactElement, domContainerNode);
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
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
ref
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
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.
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:
displayName: 'MyComponent',
render: function() {
// Once rendered, let's return a newly created element
return React.createElement( /* … */ );
}
});
Component Options
Components hold the propTypes object and two methods that return an 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
THE AVARS
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.
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
TRIUMPH OF HERACLIUS
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.
textbookfull.com