Learning React A Handson Guide To Building Web

Applications Using React And Redux 2nd Edition

Kirupa Chinnathambi download

https://ebookbell.com/product/learning-react-a-handson-guide-to-
building-web-applications-using-react-and-redux-2nd-edition-
kirupa-chinnathambi-10441946

Explore and download more ebooks at ebookbell.com

Here are some recommended products that we believe you will be
interested in. You can click the link to download.

Learning React A Handson Guide To Building Maintainable Highperforming

Web Application User Interfaces Using The React Javascript Library 1st
Edition Chinnathambi

https://ebookbell.com/product/learning-react-a-handson-guide-to-
building-maintainable-highperforming-web-application-user-interfaces-
using-the-react-javascript-library-1st-edition-chinnathambi-7228934

Of Course Its A Big Deal A Story About Learning To React Calmly And
Appropriately Bryan Smith

https://ebookbell.com/product/of-course-its-a-big-deal-a-story-about-
learning-to-react-calmly-and-appropriately-bryan-smith-48666184

Reach Every Athlete A Guide To Coaching Players With Hidden

Disabilities And Conditions Christopher Stanley

https://ebookbell.com/product/reach-every-athlete-a-guide-to-coaching-
players-with-hidden-disabilities-and-conditions-christopher-
stanley-48756406

Reach The Highest Standard In Professional Learning Learning

Communities 1st Edition Shirley M Hord Patricia A Roy

https://ebookbell.com/product/reach-the-highest-standard-in-
professional-learning-learning-communities-1st-edition-shirley-m-hord-
patricia-a-roy-51282632
Learning React Modern Patterns For Developing React Apps 2nd Edition
Alex Banks

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

Learning React Native Building Native Mobile Apps With Javascript

Bonnie Eisenman

https://ebookbell.com/product/learning-react-native-building-native-
mobile-apps-with-javascript-bonnie-eisenman-42303170

Learning React Native Building Native Mobile Apps With Javascript 1

Early Release Bonnie Eisenman

https://ebookbell.com/product/learning-react-native-building-native-
mobile-apps-with-javascript-1-early-release-bonnie-eisenman-5207528

Learning React Functional Web Development With React And Redux Early
Release Raw Unedited 1st Edition Alex Banks

https://ebookbell.com/product/learning-react-functional-web-
development-with-react-and-redux-early-release-raw-unedited-1st-
edition-alex-banks-5771042

Learning React Native Building Native Mobile Apps With Javascript 2nd
Edition Bonnie Eisenman

https://ebookbell.com/product/learning-react-native-building-native-
mobile-apps-with-javascript-2nd-edition-bonnie-eisenman-7013730
Learning React
Second Edition
 The Pearson Addison-Wesley
Learning Series

Visit informit.com/learningseries for a complete list of available publications.

The Pearson Addison-Wesley Learning Series is a collection of hands-

on programming guides that help you quickly learn a new technology or
language so you can apply what you’ve learned right away.

Each title comes with sample code for the application or applications built
in the text. This code is fully annotated and can be reused in your own
projects with no strings attached. Many chapters end with a series of
exercises to encourage you to reexamine what you have just learned, and
to tweak or adjust the code as a way of learning.

Titles in this series take a simple approach: they get you going right away
and leave you with the ability to walk off and build your own application
and apply the language or technology to whatever you are working on.

Make sure to connect with us!

informit.com/socialconnect
Learning React
Second Edition

Kirupa Chinnathambi
Learning React, Second Edition Editor
Copyright © 2018 by Pearson Education, Inc. Mark Taber

All rights reserved. No part of this book shall be reproduced, stored in a retrieval system, Managing Editor
or transmitted by any means, electronic, mechanical, photocopying, recording, or otherwise, Sandra Schroeder
without written permission from the publisher. No patent liability is assumed with respect Project Editor
to the use of the information contained herein. Although every precaution has been taken Mandie Frank
in the preparation of this book, the publisher and author assume no responsibility for
errors or omissions. Nor is any liability assumed for damages resulting from the use of Copy Editor
the information contained herein. Krista Hansing
Indexer
ISBN-13: 978-0-13-484355-1
Erika Millen
ISBN-10: 0-13-484355-X
Proofreader
Library of Congress Control Number: 2017957370 Jeanine Furino
1 18 Technical Editor
Trevor McCauley
Trademarks
All terms mentioned in this book that are known to be trademarks or service marks have Editorial Assistant
been appropriately capitalized. Pearson cannot attest to the accuracy of this information. Vanessa Evans
Use of a term in this book should not be regarded as affecting the validity of any trademark Designer
or service mark. Chuti Prasertsith
Warning and Disclaimer Compositor
Every effort has been made to make this book as complete and as accurate as possible, codemantra
but no warranty or fitness is implied. The information provided is on an “as is” basis. The
author and the publisher shall have neither liability nor responsibility to any person or entity
with respect to any loss or damages arising from the information contained in this book.

Special Sales
For information about buying this title in bulk quantities, or for special sales opportunities
(which may include electronic versions; custom cover designs; and content particular to
your business, training goals, marketing focus, or branding interests), please contact our
corporate sales department at [email protected] or (800) 382-3419.
For government sales inquiries, please contact [email protected].
For questions about sales outside the U.S., please contact [email protected].
Accessing the Free Web Edition
Your purchase of this book in any format includes access to the corresponding
Web Edition, which provides several special online-only features:
■ The complete text of the book
■ Updates and corrections as they become available

The Web Edition can be viewed on all types of computers and mobile devices with
any modern web browser that supports HTML5.

To get access to the Learning React Web Edition, all you need to do is register
this book:

1. Go to www.informit.com/register.

2. Sign in or create a new account.

3. Enter the ISBN: 9780134843551.

4. Answer the questions as proof of purchase.

5. The Web Edition will appear under the Digital Purchases tab on your
Account page. Click the Launch link to access the product.
 ❖

To my dad!

(Who always believed in me—even if what I was often doing

made no sense to him...or to me for that matter! )
❖
Contents at a Glance
1 Introducing React 1

2 Building Your First React App 13

3 Components in React 23

4 Styling in React 37

5 Creating Complex Components 47

6 Transferring Properties 65

7 Meet JSX…Again! 79

8 Dealing with State in React 87

9 Going from Data to UI in React 99

10 Events in React 107

11 The Component Lifecycle 123

12 Accessing DOM Elements in React 135

13 Setting Up Your React Dev Environment Easily 149

14 Working with External Data in React 163

15 Building an Awesome Todo List App in React 177

16 Creating a Sliding Menu in React 197

17 Avoiding Unnecessary Renders in React 211

18 Creating a Single-Page App in React Using React Router 223

19 Introduction to Redux 237

20 Using Redux with React 249

Index 267
Table of Contents

1 Introducing React 1
Old-School Multipage Design 2
New-School Single-Page Apps 3
Meet React 6
Automatic UI State Management 7
Lightning-Fast DOM Manipulation 7
APIs to Create Truly Composable UIs 8
Visuals Defined Entirely in JavaScript 10
Just the V in an MVC Architecture 12
Conclusion 12

2 Building Your First React App 13

Dealing with JSX 14
Getting Your React On 16
Displaying Your Name 17
It’s All Still Familiar 19
Changing the Destination 19
Styling It Up! 20
Conclusion 22

3 Components in React 23
Quick Review of Functions 24
Changing How We Deal with UI 26
Meet the React Component 28
Creating a Hello, World! Component 29
Specifying Properties 32
First Part: Updating the Component Definition 33
Second Part: Modifying the Component Call 33
Dealing with Children 34
Conclusion 35

4 Styling in React 37
Displaying Some Vowels 37
Styling React Content Using CSS 40
Understand the Generated HTML 40
Just Style It Already! 41
 Contents ix

Styling Content the React Way 42

Creating a Style Object 42
Actually Styling Our Content 43
Making the Background Color Customizable 45
Conclusion 46

5 Creating Complex Components 47

From Visuals to Components 47
Identifying the Major Visual Elements 49
Identifying the Components 51
Creating the Components 54
The Card Component 56
The Square Component 58
The Label Component 59
Passing Properties, Again! 61
Why Component Composability Rocks 63
Conclusion 64

6 Transferring Properties 65
Problem Overview 65
Detailed Look at the Problem 69
Meet the Spread Operator 74
A Better Way to Transfer Properties 75
Conclusion 77

7 Meet JSX…Again! 79
What Happens with JSX? 79
JSX Quirks to Remember 81
Evaluating Expressions 81
Returning Multiple Elements 82
You Can’t Specify CSS Inline 83
Comments 84
Capitalization, HTML Elements, and Components 85
Your JSX Can Be Anywhere 86
Conclusion 86
x Contents

8 Dealing with State in React 87

Using State 87
Our Starting Point 88
Getting Our Counter On 90
Setting the Initial State Value 91
Starting Our Timer and Setting State 92
Rendering the State Change 95
Optional: The Full Code 95
Conclusion 97

9 Going from Data to UI in React 99

The Example 99
Your JSX Can Be Anywhere, Part II 102
Dealing with Arrays 103
Conclusion 105

10 Events in React 107

Listening and Reacting to Events 107
Starting Point 108
Making the Button Click Do Something 110
Event Properties 112
Meet Synthetic Events 113
Doing Stuff with Event Properties 114
More Eventing Shenanigans 115
You Can’t Directly Listen to Events on Components 116
Listening to Regular DOM Events 118
The Meaning of this Inside the Event Handler 119
React…Why? Why? 120
Browser Compatibility 120
Improved Performance 120
Conclusion 121

11 The Component Lifecycle 123

Meet the Lifecycle Methods 123
See the Lifecycle Methods in Action 124
The Initial Rendering Phase 128
Getting the Default Props 128
 Contents xi

Getting the Default State 129

componentWillMount 129
render 129
componentDidMount 129
The Updating Phase 130
Dealing with State Changes 130
shouldComponentUpdate 131
componentWillUpdate 131
render 131
componentDidUpdate 131
Dealing with Prop Changes 132
The Unmounting Phase 132
Conclusion 133

12 Accessing DOM Elements in React 135

The Colorizer Example 137
Meet Refs 140
Using Portals 143
Conclusion 148

13 Setting Up Your React Dev Environment Easily 149

Meet Create React 152
Making Sense of What Happened 154
Creating Our HelloWorld App 158
Creating a Production Build 161
Conclusion 162

14 Working with External Data in React 163

Web Request 101 166
It’s React Time! 167
Getting Started 168
Getting the IP Address 169
Kicking the Visuals Up a Notch 172
Conclusion 176

15 Building an Awesome Todo List App in React 177

Getting Started 179
Creating the Initial UI 180
xii Contents

Building the Rest of the App 182

Adding Items 183
Displaying the Items 186
Styling our App 189
Removing Items 191
Animation! Animation! Animation! 194
Conclusion 195

16 Creating a Sliding Menu in React 197

How the Sliding Menu Works 197
Setting Up the Sliding Menu 201
Getting Started 202
Showing and Hiding the Menu 205
Creating the Button 206
Creating the Menu 207
Conclusion 210

17 Avoiding Unnecessary Renders in React 211

About the render Method 211
Optimizing render Calls 213
Getting an Example Going 213
Seeing the render Calls 216
Overriding a Component Update 218
Using PureComponent 220
Conclusion 222

18 Creating a Single-Page App in React Using React Router 223

The Example 224
Getting Started 225
Building Our Single-Page App 227
Displaying the Initial Frame 227
Creating Our Content Pages 228
Using React Router 230
It’s the Little Things 233
Fixing Our Routing 233
Adding Some CSS 233
Highlighting the Active Link 235
Conclusion 236
 Contents xiii

19 Introduction to Redux 237

What Is Redux? 238
Building a Simple App Using Redux 243
It’s Redux Time 243
Lights! Camera! Action! 244
Our Reducer 245
Store Stuff 247
Conclusion 248

20 Using Redux with React 249

Managing React State with Redux 256
How Redux and React Overlap 257
Getting Started 259
Building the App 260
Conclusion 266

Index 267
About the Author
Kirupa Chinnathambi has spent most of his life trying to teach others to love web
development as much as he does.

In 1999, before blogging was even a word, he started posting tutorials on kirupa.com. In the
years since then, he has written hundreds of articles, penned a few books (none as good as
this one, of course!), and recorded a bunch of videos you can find on YouTube. When he isn’t
writing or talking about web development, he spends his waking hours helping make the web
more awesome as a Program Manager at Microsoft. In his nonwaking hours, he is probably
sleeping—or writing about himself in the third person.

You can find him on Twitter (twitter.com/kirupa), Facebook (facebook.com/kirupa), or email

([email protected]). Feel free to contact him anytime.

Acknowledgments
First, none of this would be possible without the support and encouragement of my awesome
wife, Meena. If she hadn’t put her goals on hold to allow me to spend six months designing,
writing, and rewriting everything you see here, writing this book would have been a distant
dream.

Next, I’d like to thank my parents for always encouraging me to aimlessly wander and enjoy
free time doing what I like—such as teaching complete strangers via the Internet in the late
1990s how to do cool things with programming. I wouldn’t be half the rugged indoorsman/
scholar/warrior I am today without them both .

On the publishing side, writing the words you see here is the easy part. Getting the book into
your hands is an amazingly complex process. The more I learn about all the moving pieces
involved, the more impressed I am with all the individuals who work tirelessly behind the
scenes to keep this amazing machinery running. To everyone at Pearson who made this
possible, thank you! There are a few people I’d like to explicitly call out, though. First, I’d like
to thank Mark Taber for continuing to give me opportunities to work together, Chris Zahn
for patiently addressing my numerous questions and concerns, Krista Hansing for turning my
version of English into something humanly understandable, and Loretta Yates for helping
make the connections a long time ago that made all of this happen. The technical content of
this book has been reviewed in great detail by my long-time friends and online collaborators
Kyle Murray (a.k.a. Krilnon) and Trevor McCauley (a.k.a. senocular). I can’t thank them
enough for their thorough (and, frequently, humorous!) feedback.
 1
Introducing React

Ignoring for a moment that web apps today both look and feel nicer than they did back in the
day, something even more fundamental has changed. The way we architect and build web apps
is very different now. To highlight this, let’s take a look at the app in Figure 1.1.

Figure 1.1 An app.

This app is a simple catalog browser for something. As with any app of this sort, you have your
usual set of pages revolving around a home page, a search results page, a details page, and so
on. In the following sections, let’s look at the two approaches we have for building this app.
Yes, in some mysterious fashion, this leads to us getting an overview of React as well.

Onward!
2 Chapter 1 Introducing React

Old-School Multipage Design

If you had to build this app a few years ago, you might have taken an approach that involved
multiple, individual pages. The flow would have looked something like Figure 1.2.

Figure 1.2 Multipage design.

 New-School Single-Page Apps 3

For almost every action that changes what the browser displays, the web app navigates you to
a whole different page. This is a big deal, beyond just the less-than-stellar user experience users
will see as pages get torn down and redrawn. This has a big impact on how you maintain your
app state. Except for storing user data via cookies and some server-side mechanism, you simply
don’t need to care. Life is good.

New-School Single-Page Apps

These days, going with a web app model that requires navigating between individual pages
seems dated—really dated. Check out Figure 1.3.

Figure 1.3 The individual page model is a bit dated, like this steam engine.

Instead, modern apps tend to adhere to what is known as a single-page app (SPA) model. This
model gives you a world in which you never navigate to different pages or ever even reload a
page. In this world, the different views of your app are loaded and unloaded into the same page
itself.

For our app, this looks something like Figure 1.4.

4 Chapter 1 Introducing React

Figure 1.4 Single-page app.

As users interact with our app, we replace the contents of the dotted red region with the data
and HTML that matches what the user is trying to do. The end result is a much more fluid
experience. You can even use a lot of visual techniques to have your new content transition
nicely, just like you might see in cool apps on your mobile device or desktop. This sort of stuff
is simply not possible when navigating to different pages.

All of this might sound a bit crazy if you’ve never heard of single-page apps, but there’s a very
good chance you’ve run into some of them in the wild. If you’ve ever used popular web apps
like Gmail, Facebook, Instagram, or Twitter, you’ve used a single-page app. In all those apps,
the content gets dynamically displayed without requiring you to refresh or navigate to a
different page.

Now, I’m making these single-page apps seem really complicated. That’s not entirely the case.
Thanks to a lot of great improvements in both JavaScript and a variety of third-party frame-
works and libraries, building single-page apps has never been easier. That doesn’t mean there’s
no room for improvement, though.
 New-School Single-Page Apps 5

When building single-page apps, you’ll encounter three major issues at some point:

1. In a single-page application, you’ll spend the bulk of your time keeping your data in
sync with your UI. For example, if a user loads new content, do you explicitly clear out
the search field? Do you keep the active tab on a navigation element still visible? Which
elements do you keep on the page, and which do you destroy?

These are all problems that are unique to single-page apps. When navigating between
pages in the old model, we assumed everything in our UI would be destroyed and just
built back up again. This was never a problem.

2. Manipulating the DOM is really, really slow. Manually querying elements, adding
children (see Figure 1.5), removing subtrees, and performing other DOM operations is
one of the slowest things you can do in your browser. Unfortunately, in a single-page
app, you’ll be doing a lot of this. Manipulating the DOM is the primary way you are able
to react to user actions and display new content.

Figure 1.5 Adding children.

3. Working with HTML templates can be a pain. Navigation in a single-page app is

nothing more than you dealing with fragments of HTML to represent whatever you want
to display. These fragments of HTML are often known as templates, and using JavaScript
to manipulate them and fill them out with data gets really complicated really quickly.
6 Chapter 1 Introducing React

To make things worse, depending on the framework you’re using, the way your templates
look and interact with data can vary wildly. For example, this is what defining and using a
template in Mustache looks like:
var view = {
title: "Joe",
calc: function() {
return 2 + 4;
}
};

var output = Mustache.render("{{title}} spends {{calc}}", view);

Sometimes your templates look like clean HTML that you can proudly show off in front of
the class. Other times, your templates might be unintelligible, with a boatload of custom
tags designed to help map your HTML elements to some data.

Despite these shortcomings, single-page apps aren’t going anywhere. They are a part of the
present and will fully form the future of how web apps are built. That doesn’t mean you have
to tolerate these shortcomings, of course. Read on.

Meet React
Facebook (and Instagram) decided that enough is enough. Given their huge experience with
single-page apps, they released a library called React to not only address these shortcomings,
but also change how we think about building single-page apps.

In the following sections, we look at the big things React brings to the table.
 Meet React 7

Automatic UI State Management

With single-page apps, keeping track of your UI and maintaining state is hard … and also very
time consuming. With React, you need to worry about only one thing: the final state of your
UI. It doesn’t matter what state your UI started out in. It doesn’t matter what series of steps
your users took to change the UI. All that matters is where your UI ended up (see Figure 1.6).

Figure 1.6 The final or end state of your UI is what matters in React.

React takes care of everything else. It figures out what needs to happen to ensure that your UI
is represented properly so that all that state-management stuff is no longer your concern.

Lightning-Fast DOM Manipulation

Because DOM modifications are really slow, you never modify the DOM directly using React.
Instead, you modify an in-memory virtual DOM (resembling what you see in Figure 1.7).
8 Chapter 1 Introducing React

Figure 1.7 Imagine an in-memory virtual DOM that sort of looks like this.

Manipulating this virtual DOM is extremely fast, and React takes care of updating the real DOM
when the time is right. It does so by comparing the changes between your virtual DOM and the
real DOM, figuring out which changes actually matter, and making the fewest number of DOM
changes needed to keep everything up-to-date in a process called reconciliation.

APIs to Create Truly Composable UIs

Instead of treating the visual elements in your app as one monolithic chunk, React encourages
you to break your visual elements into smaller and smaller components (see Figure 1.8).
 Meet React 9

Figure 1.8 An example of how the visuals of your app can be broken into smaller pieces.

As with everything else in programming, it’s a good idea to make things modular, compact, and
self-contained. React extends that well-worn idea to how we think about user interfaces. Many
of React’s core APIs revolve around making it easier to create smaller visual components that
can later be composed with other visual components to make larger and more complex visual
components—kind of like the Russian matryoshka dolls in Figure 1.9. (see Figure 1.8):
10 Chapter 1 Introducing React

Figure 1.9 Russian matryoshka dolls.

This is one of the major ways React simplifies (and changes) how we think about building the
visuals for our web apps.

Visuals Defined Entirely in JavaScript

While this sounds ridiculously crazy and outrageous, hear me out. Besides having a really
weird syntax, HTML templates have traditionally suffered from another major problem:
You are limited in the variety of things you can do inside them, which goes beyond simply
displaying data. If you want to choose a piece of UI to display based on a particular condition,
for example, you have to write JavaScript somewhere else in your app or use some weird
framework-specific templating command to make it work.

For example, here’s what a conditional statement inside an EmberJS template looks like:
{{#if person}}
Welcome back, {{person.firstName}} {{person.lastName}}!
{{else}}
Please log in.
{{/if}}
 Meet React 11

React does something pretty neat. By having your UI defined entirely in JavaScript, you get
to use all the rich functionality JavaScript provides for doing all sorts of things inside your
templates. You are limited only by what JavaScript supports, not limitations imposed by
your templating framework.

Now, when you think of visuals defined entirely in JavaScript, you’re probably thinking
something horrible that involves quotation marks, escape characters, and a whole lot of
createElement calls. Don’t worry. React allows you to (optionally) specify your visuals
using an HTML-like syntax known as JSX that lives fully alongside your JavaScript. Instead
of writing code to define your UI, you are basically specifying markup:
ReactDOM.render(
<div>
<h1>Batman</h1>
<h1>Iron Man</h1>
<h1>Nicolas Cage</h1>
<h1>Mega Man</h1>
</div>,
destination
);

This same code defined in JavaScript would look like this:

ReactDOM.render(React.createElement(
"div",
null,
React.createElement(
"h1",
null,
"Batman"
),
React.createElement(
"h1",
null,
"Iron Man"
),
React.createElement(
"h1",
null,
"Nicolas Cage"
),
React.createElement(
"h1",
null,
"Mega Man"
)
), destination);
12 Chapter 1 Introducing React

Yikes! Using JSX, you are able to easily define your visuals using a very familiar syntax, while
still getting all the power and flexibility that JavaScript provides.

Best of all, in React, your visuals and JavaScript often live in the same location. You no longer
have to jump among multiple files to define the look and behavior of one visual component.
This is templating done right.

Just the V in an MVC Architecture

We’re almost done here! React is not a full-fledged framework that has an opinion on how
everything in your app should behave. Instead, React works primarily in the View layer, where
all of its worries and concerns revolve around keeping your visual elements up-to-date. This
means you’re free to use whatever you want for the M and C parts of your MVC (a.k.a. Model-
View-Controller) architecture. This flexibility allows you to pick and choose technologies you
are familiar with, and it makes React useful not only for new web apps you create, but also for
existing apps you’d like to enhance without removing and refactoring a whole bunch of code.

Conclusion
As new web frameworks and libraries go, React is a runaway success. It not only deals with the
most common problems developers face when building single-page apps, but it also throws in a
few additional tricks that make building the visuals for your single-page apps much easier. Since
it came out in 2013, React has also steadily found its way into popular web sites and apps that
you probably use. Besides Facebook and Instagram, some notable ones include the BBC, Khan
Academy, PayPal, Reddit, The New York Times, and Yahoo!, among many others.

This article was an introduction to what React does and why it does it. In subsequent chapters,
we’ll dive deeper into everything you’ve seen here and cover the technical details that will help
you successfully use React in your own projects. Stick around.
 2
Building Your
First React App

Thanks to the previous chapter, you probably now know all about the backstory of React and how
it helps even your most complex user interfaces sing. For all the awesomeness that React brings to
the table, getting started with it (kind of like this sentence) is not the most straightforward. It has
a steep learning curve filled with many small and big hurdles, as in Figure 2.1.

Figure 2.1 Hurdles come in a variety of sizes. Some are big. Some are small.

In this chapter, we start at the very beginning and get our hands dirty by building a simple
React app. You’ll encounter some of these hurdles head-on, and some of these hurdles you’ll
skip over—for now. By the end of this chapter, not only will you have built something you can
proudly show off to your friends and family, but you’ll have set yourself up nicely for diving
deeper into all that React offers in future chapters.
14 Chapter 2 Building Your First React App

Dealing with JSX

Before we start building our app, there’s an important point to cover first. React isn’t like many
JavaScript libraries you might have used. It doesn’t get too happy when you simply refer to
code you’ve written for it using a script tag. React is annoyingly special that way, and it has to
do with how React apps are built.

As you know, your web apps (and everything else your browser displays) are made up of HTML,
CSS, and JavaScript (see Figure 2.2).

Figure 2.2 Web apps are built in HTML, CSS, and JavaScript.

It doesn’t matter whether your web app was written using React or some other library, such as
Angular, Knockout, or jQuery. The end result has to be some combination of HTML, CSS, and
JavaScript; otherwise, your browser really won’t know what to do.

Now, here’s where the special nature of React comes in. Besides normal HTML, CSS, and
JavaScript, the bulk of your React code will be written in JSX. As I mentioned in Chapter 1,
“Introducing React,” JSX is a language that allows you to easily mix JavaScript and HTML-like
tags to define user interface (UI) elements and their functionality. That sounds cool and all
(and you’ll see JSX in action in just a few moments), but there’s a slight problem. Your browser
has no idea what to do with JSX.

To build a web app using React, we need a way to convert our JSX into plain old JavaScript that
your browser can understand (see Figure 2.3).
 Dealing with JSX 15

Figure 2.3 JSX needs to turn into something our browser understands.

If we don’t do this, our React app simply won’t work. That’s not cool. Fortunately, we have two
solutions to this:

1. Set up a development environment around Node and a handful of build-tools.

In this environment, every time you perform a build, all of your JSX is automatically
converted into JS and placed on disk for you to reference like any plain JavaScript file.

2. Let your browser automatically convert JSX to JavaScript at runtime. You specify
your JSX directly, just as you would any old piece of JavaScript, and your browser takes
care of the rest.

Both of these solutions have a place in our world, but let’s talk about the impact of each.

The first solution, while a bit complicated and time-consuming at first, is the way modern
web development is done these days. Besides compiling (transpiling, to be more accurate) your
JSX to JS, this approach enables you to take advantage of modules, better build tools, and a
bunch of other features that make building complex web apps somewhat manageable.

The second solution provides a quick and direct path in which you initially spend more time
writing code and less time fiddling with your development environment. To use this solution,
all you do is reference a script file. This script file takes care of turning the JSX into JS on page
load, and your React app comes to life without you having to do anything special to your
development environment.

For our introductory look at React, we are going to use the second solution. You might be wondering
why we don’t always use the second solution. The reason is that your browser takes a perfor-
mance hit each time it translates JSX into JS. That is totally acceptable when learning how to
use React, but it is totally not acceptable when deploying your app for real-life use. Because of
that lack of acceptability, we will revisit all of this later, to look at the first solution and how to
set up your development environment after you’ve gotten your feet comfortably wet in React.
16 Chapter 2 Building Your First React App

Getting Your React On

In the previous section, we looked at the two ways you have for ensuring that your React app
ends up as something your browser understands. In this section, we put all those words into
practice. First, you need a blank HTML page as your starting point.

Create a new HTML document with the following contents:

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>React! React! React!</title>
</head>

<body>
<script>

</script>
</body>

</html>

This page has nothing interesting or exciting going for it, but let’s fix that by adding a
reference to the React library. Just below the title, add these two lines:
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

These two lines bring in both the core React library and the various things React needs to work
with the DOM. Without them, you aren’t building a React app at all.

Now, you aren’t done yet. You need to reference one more library. Just below these two script
tags, add the following line:
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>

Here you’re adding a reference to the Babel JavaScript compiler (http://babeljs.io/). Babel does
many cool things, but the one we care about is its capability to turn JSX into JavaScript.
 Displaying Your Name 17

At this point, your HTML page should look as follows:

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>React! React! React!</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>

<body>
<script>

</script>
</body>

</html>

If you preview your page right now, you’ll notice that this page is still blank, with nothing
visible going on. That’s okay. We’re going to fix that next.

Displaying Your Name

Now you’re going to use React to display your name onscreen. You do that by using a method
called render. Inside your empty script tag in the body, add the following:
ReactDOM.render(
<h1>Sherlock Holmes</h1>,
document.body
);

Don’t worry if none of this makes sense at this point. Our goal is to get something to display
onscreen first, and we’ll make sense of what we did afterward. Now, before previewing this in
the page to see what happens, you need to designate this script block as something that Babel
can work its magic on. You do that is by setting the type attribute on the script tag to a value
of text/babel:
<script type="text/babel">
ReactDOM.render(
<h1>Sherlock Holmes</h1>,
document.body
);
</script>
18 Chapter 2 Building Your First React App

After you’ve made that change, preview what you have in your browser. You’ll see the words
Sherlock Holmes printed in giant letters, as in Figure 2.4.

Figure 2.4 Your browser should display Sherlock Holmes.

Congratulations! You’ve just built an app using React.

As apps go, this isn’t all that exciting. Chances are, your name isn’t even Sherlock Holmes. This
app doesn’t have much going for it, but it does introduce you to one of the most frequently
used methods you’ll use in the React universe: the ReactDOM.render method.

The render method takes two arguments:

1. The HTML-like elements (a.k.a. JSX) you want to output

2. The location in the DOM where React will render the JSX into

Here’s what our render method looks like:

ReactDOM.render(
<h1>Sherlock Holmes</h1>,
document.body
);

Our first argument is the text Sherlock Holmes wrapped inside some h1 tags. This HTML-like
syntax inside your JavaScript is what JSX is all about. We’ll spend a lot more time drilling into
JSX a bit later, but I should mention this up front: It is every bit as crazy as it looks. Whenever
I see brackets and slashes in JavaScript, a part of me dies on the inside because of all the string
 It’s All Still Familiar 19

escaping and quotation mark gibberish I will need to do. With JSX, you do none of that. You
just place your HTML-like content as is, just like you’ve done here. Magically (like the super-
awesome kind involving dragons and laser beams), it all works.

The second argument is document.body. There’s nothing crazy or bizarre about this argument.
It simply specifies where the converted markup from the JSX will end up living in our DOM. In
our example, when the render method runs, the h1 tag (and everything inside it) is placed in
our document’s body element.

Now, the goal of this exercise wasn’t to display a name on the screen. It was to display your
name. Go ahead and modify your code to do that. In my case, the render method will look as
follows:
ReactDOM.render(
<h1>Batman</h1>,
document.body
);

Well, it would look like that if my name were Batman! Anyway, if you preview your page now,
you’ll see your name displayed instead of Sherlock Holmes.

It’s All Still Familiar

The JavaScript looks new and shiny thanks to JSX, but the end result your browser sees is nice
and clean HTML, CSS, and JavaScript. To see this for yourself, let’s make a few alterations to
how our app behaves and looks.

Changing the Destination

First we’ll change where the JSX gets output. Using JavaScript to place things directly in your
body element is never a good idea. A lot can go wrong, especially if you’re going to be mixing
React with other JS libraries and frameworks. The recommended path is to create a separate
element that you will treat as a new root element. This element will serve as the destination
your render method will use. To make this happen, go back to the HTML and add a div
element with an id value of container:
<body>
<div id="container"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Batman</h1>,
document.body
);
</script>
</body>
20 Chapter 2 Building Your First React App

With the container div element safely defined, let’s modify the render method to use it
instead of document.body. Here’s one way of doing this:
ReactDOM.render(
<h1>Batman</h1>,
document.querySelector("#container")
);

Another option is to do some things outside the render method itself:

var destination = document.querySelector("#container");

ReactDOM.render(
<h1>Batman</h1>,
destination
);

Notice that the destination variable stores the reference to your container DOM element.
Inside the render method, you simply reference the same destination variable instead of
writing the full element-finding syntax as part of the argument itself. The reason for this is
simple: I want to show you that you’re still writing JavaScript and that render is just another
boring old method that happens to take two arguments.

Styling It Up!
Time for the last change before we call it a day. Right now, our names show up in whatever
default h1 styling the browser provides. That’s just terrible, so let’s fix that by adding some CSS.
Inside your head tag, let’s add a style block with the following CSS:
<style>
#container {
padding: 50px;
background-color: #EEE;
}
#container h1 {
font-size: 144px;
font-family: sans-serif;
color: #0080A8;
}
</style>

After you’ve added everything, preview your page. Notice that the text appears to have a
little more purpose than it did earlier, when it relied entirely on the browser’s default styling
(see Figure 2.5).
 It’s All Still Familiar 21

Figure 2.5 The result of adding the CSS.

This works because, after running all the React code, the DOM’s body contains our container
element with an h1 tag inside it. It doesn’t matter that the h1 tag was defined entirely inside
JavaScript in this JSX syntax or that your CSS was defined well outside the render method. The
end result of your React app is still going to be made up of some 100% organic (and cage-free!)
HTML, CSS, and JavaScript. If we had to see what this transpiled JavaScript looks like, it would
look a bit like the following:
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>React! React! React!</title>
<script src="https://unpkg.com/react@16/umd/react.development.js">
</script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">
</script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>

<style>
#container {
padding: 50px;
background-color: #EEE;
}
#container h1 {
font-size: 144px;
font-family: sans-serif;
color: #0080A8;
}
22 Chapter 2 Building Your First React App

</style>
</head>

<body>
<div id="container"></div>
<script type="text/babel">
var destination = document.querySelector("#container");

ReactDOM.render(React.createElement(
"h1",
null,
"Batman"
), destination);
</script>
</body>

</html>

Notice that there’s nary a trace of React-like code in sight. (Also, we should use the word nary
more often in everyday conversation!)

Conclusion
If this is your first time building a React app, we covered a lot of ground here. One of the
biggest takeaways is that React is different than other libraries because it uses a whole new
language called JSX to define what the visuals will look like. You got a very small glimpse of
that here when we defined the h1 tag inside the render method.

JSX’s impact goes beyond how you define your UI elements. It also alters how you build
your app as a whole. Because your browser can’t understand JSX in its native representation,
you need to use an intermediate step to convert that JSX into JavaScript. One approach is to
build your app to generate the transpiled JavaScript output to correspond to the JSX source.
Another approach (the one we used here) is to use the Babel library to translate the JSX into
JavaScript on the browser itself. While the performance hit of doing this is not recommended
for live/production apps, when you’re familiarizing yourself with React, you can’t beat the
convenience.

In future chapters, we spend some time diving deeper into JSX and going beyond the render
method as we look at all the important things that make React tick.

Note: If you run into any issues, ask!

If you have any questions or your code isn’t running like you expect, don’t hesitate to ask!
Post on the forums at https://forum.kirupa.com and get help from some of the friendliest and
most knowledgeable people the Internet has ever brought together!
 3
Components in React

Components are one of the pieces that make React, well, React! They’re one of the primary
ways you have for defining the visuals and interactions that make up what people see when
they use your app. Let’s say Figure 3.1 shows what your finished app looks like.

Figure 3.1 Your hypothetical finished app.

This is the finished sausage. During development, viewed through the lens of a React project,
things might look a little less appealing. Almost every part of this app’s visuals would be
wrapped inside a self-contained module known as a component. To highlight what “almost
every” means here, take a look at the diagram in Figure 3.2.
24 Chapter 3 Components in React

Figure 3.2 Diagrammatic representation of the app components.

Each dotted line represents an individual component that is responsible for both what you see
and any interactions that it is responsible for. Don’t let this scare you. While this looks really
complicated, you will soon see that it will start to make a whole lot of sense once you’ve had
a chance to play with components and some of the awesome things they do—or, at least, try
really hard to do.

Quick Review of Functions

In JavaScript, you have functions that enable you to make your code a bit cleaner and more
reusable. Now, there’s reason we’re taking some time to look at functions, and it isn’t to annoy
you! Conceptually, functions share a lot of surface area with React components, and the easiest
way to understand what components do is to take a quick look at functions first.

In a terrible world where functions don’t exist, you might have some code that looks as follows:
var speed = 10;
var time = 5;
alert(speed * time);
 Quick Review of Functions 25

var speed1 = 85;

var time1 = 1.5;
alert(speed1 * time1);

var speed2 = 12;

var time2 = 9;
alert(speed2 * time2);

var speed3 = 42;

var time3 = 21;
alert(speed3 * time3);

In a really chill world that involves functions, you can condense all that duplicated text into
something simple, like the following:
function getDistance(speed, time) {
var result = speed * time;
alert(result);
}

Our getDistance function removes all the duplicated code you saw earlier, and it takes speed
and time as arguments to allow you to customize the calculation that gets returned.

To call this function, all you have to do is this:

getDistance(10, 5);
getDistance(85, 1.5);
getDistance(12, 9);
getDistance(42, 21);

Doesn’t this look nicer? Functions provide another great value, too. Your functions (such as
the alert inside getDistance) can call other functions as part of their running. Take a look
at using a formatDistance function to change what getDistance returns:
function formatDistance(distance) {
return distance + " km";
}

function getDistance(speed, time) {

var result = speed * time;
alert(formatDistance(result));
}

This capability to have functions call other functions enables us to cleanly separate what
functions do. You don’t need to have one monolithic function that does everything under
the sun; you can distribute functionality across many functions that are specialized for
a particular type of task.

Best of all, after you make changes to how your functions work, you don’t have to do anything
extra to see the results of those changes. If the function signature didn’t change, any existing
calls to that function will just magically work and automatically pick up any new changes you
made to the function itself.
26 Chapter 3 Components in React

In a nutshell, functions are awesome. I know that. You know that. That’s why all of the code
we write has them all over the place.

Changing How We Deal with UI

I don’t think anybody will disagree with the good functions bring to the table. They really
make it possible to structure the code for your apps in a sane way. That same level of care we
use in writing our code isn’t always possible when it comes to writing our UIs. For various
technical and nontechnical reasons, we’ve always tolerated a certain level of sloppiness with
how we typically work with our UI elements.

That’s a pretty controversial statement, so let me highlight what I mean by looking at some
examples. Let’s go back and look at the render method we used in the previous chapter:
var destination = document.querySelector("#container");

ReactDOM.render(
<h1>Batman</h1>,
destination
);

Onscreen, you see the word Batman printed in giant letters, thanks to the h1 element. Let’s
change things up a bit. Say that we want to print the names of several other superheroes. To do
this, we modify our render method to look as follows:
var destination = document.querySelector("#container");

ReactDOM.render(
<div>
<h1>Batman</h1>
<h1>Iron Man</h1>
<h1>Nicolas Cage</h1>
<h1>Mega Man</h1>
</div>,
destination
);

Notice what you see here. We emit a div that contains the four h1 elements with our superhero
names.

Okay, so now we have four h1 elements that each contains the name of a superhero. What if
we want to change our h1 element to something like an h3 instead? We can manually update
all of these elements as follows:
var destination = document.querySelector("#container");

ReactDOM.render(
<div>
<h3>Batman</h3>
<h3>Iron Man</h3>
 Changing How We Deal with UI 27

<h3>Nicolas Cage</h3>
<h3>Mega Man</h3>
</div>,
destination
);

If you preview what we have, you’ll see something that looks a bit unstyled and plain
(see Figure 3.3).

Figure 3.3 Plain vanilla superhero names.

We don’t want to go crazy with the styling here. All we want to do is italicize all these names
by using the i tag, so let’s manually update what we render by making this change:
var destination = document.querySelector("#container");

ReactDOM.render(
<div>
<h3><i>Batman</i></h3>
<h3><i>Iron Man</i></h3>
<h3><i>Nicolas Cage</i></h3>
<h3><i>Mega Man</i></h3>
</div>,
destination
);
28 Chapter 3 Components in React

We went through each h3 element and wrapped the content inside some i tags. Can you start
to see the problem here? What we are doing with our UI is no different than having code
that looks as follows:
var speed = 10;
var time = 5;
alert(speed * time);

var speed1 = 85;

var time1 = 1.5;
alert(speed1 * time1);

var speed2 = 12;

var time2 = 9;
alert(speed2 * time2);

var speed3 = 42;

var time3 = 21;
alert(speed3 * time3);

Every change we want to make to our h1 or h3 elements needs to be duplicated for every
instance of them. What if we want to do something even more complex than just modifying
the appearance of our elements? What if we want to represent something more complex than
the simple examples we’re using so far? What we’re doing right now won’t scale; manually
updating every copy of what we want to modify is time-consuming. It is also boring.

Now, here’s a crazy thought: What if everything awesome that we looked at about functions could
somehow be applied to how we define our app’s visuals? Wouldn’t that solve all the inefficiencies
we’ve highlighted in this section? As it turns out, the answer to that “what if” forms the core of
what React is all about. It’s time for you to say hello to the component.

Meet the React Component

The solution to all of our problems (even the existential ones we grapple with) can be found in
React components. React components are reusable chunks of JavaScript that output (via JSX) HTML
elements. That sounds really pedestrian for something capable of solving great things, but as
you start to build components and gradually turn up the complexity, you’ll see that compo-
nents are really powerful and every bit as awesome as I’ve portrayed them.

Let’s start by building a couple of components together. To follow along, start with a blank
React document:
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>React Components</title>
 Meet the React Component 29

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>

<body>
<div id="container"></div>
<script type="text/babel">

</script>
</body>

</html>

Nothing exciting is going on in this page. As in the last chapter, this page is pretty barebones,
with just a reference to the React and Babel libraries and a div element that proudly sports
an id value of container.

Creating a Hello, World! Component

Let’s start really simple. We want to use a component to help us print the famous “Hello,
world!” text to the screen. As we already know, using just the render method of ReactDOM
would give us code that looks as follows:
ReactDOM.render(
<div>
<p>Hello, world!</p>
</div>,
document.querySelector("#container")
);

Let’s re-create all of this by using a component. React gives us several ways of creating
components, but we are going to create them by using the class syntax. Go ahead and add
the following highlighted code just above the existing render method:
class HelloWorld extends React.Component {

ReactDOM.render(
<div>
<p>Hello, world!</p>
</div>,
document.querySelector("#container")
);

If the class syntax is foreign to you, first check out my online tutorial Using Classes in
JavaScript (https://www.kirupa.com/javascript/classy_way_to_create_objects.htm).
30 Chapter 3 Components in React

Getting back to our code, we have created a new component called HelloWorld. This is a
component because it extends React.Component. If it didn’t do that, it would just be an empty
class that doesn’t do much. Inside our class, you can put all sorts of methods to further define
what HelloWorld does. Some methods that you define are special, and React uses them to help
your components work their magic. One such mandatory property is render.

Go ahead and modify our HelloWorld component by adding the render method, as shown:
class HelloWorld extends React.Component {
render() {

}
}

Just like the render method you saw a few moments earlier as part of ReactDOM.render, the
render function inside a component is also responsible for dealing with JSX. Let’s modify our
render function to return Hello, componentized world!. Add the following highlighted line:
class HelloWorld extends React.Component {
render() {
return <p>Hello, componentized world!</p>
}
}

You’ve told the render function to return the JSX that represents the Hello, componentized
world! text. All that remains is to actually use this component. You use a component after
you’ve defined it by calling it. Here we call it from our old friend, the ReactDOM.render
method.

The way you call a component from it is a bit unique. Go ahead and replace the first argument
to ReactDOM.render with the following:
ReactDOM.render(
<HelloWorld/>,
document.querySelector("#container")
);

That isn’t a typo! The JSX we use for calling our HelloWorld component is the very HTML-like
<HelloWorld/>. If you preview your page in your browser, you’ll see the text Hello, compo-
nentized world! showing up on your screen. If you were holding your breath in suspense, you
can relax.

If you have difficulty relaxing after seeing the syntax we used for calling HelloWorld, stare at
the circle in Figure 3.4 a few moments.
 Meet the React Component 31

Figure 3.4 Just some lighthearted distraction!

Okay, back to reality. What we’ve done so far might seem crazy, but simply think of your
<HelloWorld/> component as a cool and new HTML tag whose functionality you fully have
control over. This means you can do all sorts of HTML-y things to it.

For example, go ahead and modify our ReactDOM.render method to look as follows:
ReactDOM.render(
<div>
<HelloWorld/>
</div>,
document.querySelector("#container")
);

We wrapped our call to the HelloWorld component inside a div element, and if you preview
this in your browser, everything still works. Let’s go one step further! Instead of having just
32 Chapter 3 Components in React

a single call to HelloWorld, let’s make a bunch of calls. Modify our ReactDOM.render method
to now look as follows:
ReactDOM.render(
<div>
<HelloWorld/>
<HelloWorld/>
<HelloWorld/>
<HelloWorld/>
<HelloWorld/>
<HelloWorld/>
</div>,
document.querySelector("#container")
);

Now you’ll see is a bunch of Hello, componentized world! text instances appear. Let’s do one
more thing before we move on to something shinier. Go back to our HelloWorld component
declaration and change the text you return to the more traditional Hello, world! value:
class HelloWorld extends React.Component {
render() {
return <p>Hello, world!</p>
}
}

Make this one change and then preview your example. This time around, all the various
HelloWorld calls we specified earlier return Hello, world! to the screen. No need to manually
modify every HelloWorld call—that’s a good thing!

Specifying Properties
Right now, our component does just one thing. It prints Hello, world! to the screen—and only
that! That’s the equivalent of having a JavaScript function that looks like this:
function getDistance() {
alert("42km");
}

Except for one very specific case, that JavaScript function doesn’t seem very useful, does it? To
increase the usefulness of this function, we need to modify it to take arguments:
function getDistance(speed, time) {
var result = speed * time;
alert(result);
}

Now this function can be used more generally for a variety of situations, not just one whose
output will be 42km.

Something similar applies to your components as well. Just as with functions, you can pass in
arguments that alter what your component does. There’s a slight terminology update you need
 Meet the React Component 33

to be on top of. What we call arguments in the function world are known as properties in the
component world. Let’s see these properties in action!

You’re now going to modify the HelloWorld component to allow you to specify who or what
you greet besides the generic World. For example, imagine being able to specify Bono as part of
the HelloWorld call and seeing Hello, Bono! appear onscreen.

To add properties to a component, you need to follow two parts of instructions.

First Part: Updating the Component Definition

Right now, our HelloWorld component is hard-coded to always send out Hello, world! as part
of its return value. We first need to change that behavior by having the return statement print
out the value passed in by a property. We need a name to give our property; for this example,
we call our property greetTarget.

To specify the value of greetTarget as part of our component, we need to make this
modification:
class HelloWorld extends React.Component {
render() {
return <p>Hello, {this.props.greetTarget}!</p>
}
}

You access a property by referencing it via the this.props property that every component has
access to. Notice how you specify this property: You place it inside curly brackets, { and }. In JSX,
if you want something to get evaluated as an expression, you need to wrap that something inside curly
brackets. If you don’t do that, you’ll see the raw text this.props.greetTarget printed out.

Second Part: Modifying the Component Call

After you’ve updated the component definition, all that remains is to pass in the property value
as part of the component call. This is done by adding an attribute with the same name as the
property, followed by the value you want to pass in. In our example, that involves modifying
the HelloWorld call with the greetTarget attribute and the value you want to give it.

Go ahead and modify the HelloWorld calls as follows:

ReactDOM.render(
<div>
<HelloWorld greetTarget="Batman"/>
<HelloWorld greetTarget="Iron Man"/>
<HelloWorld greetTarget="Nicolas Cage"/>
<HelloWorld greetTarget="Mega Man"/>
<HelloWorld greetTarget="Bono"/>
<HelloWorld greetTarget="Catwoman"/>
</div>,
document.querySelector("#container")
);
34 Chapter 3 Components in React

Each HelloWorld call now has the greetTarget attribute, along with the name of a super-
hero (or equivalent mythical being) that we want to greet. If you preview this example in the
browser, you’ll see the greetings happily printed out onscreen.

One last point is important to call out before we move on. You are not limited to having just a
single property on a component. You can have as many properties as you want, and your props
property will easily accommodate any property requests you have without making any fuss.

Dealing with Children

A few sections ago, I mentioned that components (in JSX) are very similar to regular HTML
elements. You saw that when you wrapped a component inside a div element or specified an
attribute and value as part of specifying properties. Just as you can have many HTML elements,
your components can have children.

This means you can do something like this:

<CleverComponent foo="bar">
<p>Something!</p>
</CleverComponent>

Here you have a component very cleverly called CleverComponent, and it has a p element as
a child. From within CleverComponent, you have the capability to access the p child element
(and any children it has) via the children property accessed by this.props.children.

To make sense of all this, let’s look at another really simple example. This time around, we have
a component called Buttonify that wraps its children inside a button. The component looks
like this:
class Buttonify extends React.Component {
render() {
return(
<div>
<button type={this.props.behavior}>{this.props.children}</button>
</div>
);
}
}

You can use this component by calling it via the ReactDOM.render method, as shown here:
ReactDOM.render(
<div>
<Buttonify behavior="submit">SEND DATA</Buttonify>
</div>,
document.querySelector("#container")
);

When this code runs, given what the JSX in the Buttonify component’s render method
looked like, you see the words SEND DATA wrapped inside a button element. With the
appropriate styling, the result could look comically large, as in Figure 3.5.
 Conclusion 35

Figure 3.5 A large Send Data button.

Getting back to the JSX, notice that we specify a custom property called behavior. This property
allows us to specify the button element’s type attribute, and you can see us accessing it via
this.props.behavior in the component definition’s render method.

There’s more to accessing a component’s children than what you’ve seen here. For example,
if your child element is just some text, the this.props.children property returns a string.
If your child element is just a single element (as in our example), the this.props.children
property returns a single component that is not wrapped inside an array. We still need to call
out a few more things, but instead of enumerating all the cases and boring you, we’ll bring up
those points later as we look at more elaborate examples.

Conclusion
If you want to build an app using React, you can’t wander too far without having to use a
component. Trying to build a React app without using a component is kind of like building a
JavaScript-based app without using functions. I’m not saying that it can’t be done; it’s just one
of those things you don’t do—kind of like the Bad Idea part of the popular Animaniacs Good
Idea/Bad Idea sketches (https://www.youtube.com/watch?v=2dJOIf4mdus).

If this witty video doesn’t convince you that you should learn to embrace components, I don’t
know what will—except for maybe a future chapter on creating complex components!

Note: If you run into any issues, ask!

If you have any questions or your code isn’t running like you expect, don’t hesitate to ask!
Post on the forums at https://forum.kirupa.com and get help from some of the friendliest and
most knowledgeable people the Internet has ever brought together!
Exploring the Variety of Random
Documents with Different Content
politiques, allusions voilées et difficiles à pénétrer aujourd'hui. Le flot
de l'émigration devient un torrent qui emporte tout; presque toutes
les dames de Madame Élisabeth l'ont quittée, avec les meilleures
raisons du monde; elle est la première à le dire; elle ne les aime pas
moins, mais elle est presque seule. Elle résiste néanmoins aux
instances de son amie qui la supplie de quitter un pays où il n'existe
plus aucune sécurité et que tout le monde fuit comme une terre
pestiférée, et où un présent sombre et triste est le précurseur d'un
avenir plus menaçant encore. Madame Élisabeth a dit le secret de
son invincible résistance dans une lettre précédente: «Elle doit
persister à suivre la route par laquelle la Providence l'a menée
jusqu'alors»; c'est-à-dire qu'elle doit rester auprès du Roi son frère.
C'est là sa place. Aujourd'hui que Madame Élisabeth a reçu sa
récompense, on peut lui appliquer ces paroles, qu'au temps de sa
vie mortelle son humilité n'aurait pas acceptées: Quand Dieu permet
qu'un juste soit livré aux grandes épreuves, il envoie un de ses
anges auprès de lui.

C'est pour cela qu'elle écrit à madame de Raigecourt, dans sa

lettre du 29 mai 1791: «Plus votre amie avance, moins elle croit
devoir suivre vos désirs: les raisons qu'elle vous a mandées, mille
réflexions qui s'y mêlent, la persuasion d'une vraie tranquillité, tout
est contre vous.» Pour expliquer ces derniers mots, il faut ajouter
que madame de Raigecourt avait enfin donné le jour à cette Hélène
si longtemps attendue. Madame Élisabeth se disait tranquille pour
que son amie le fût: «Aimez-moi toujours, continuait Madame
Élisabeth, et donnez-m'en la preuve en ne vous tourmentant point et
en soignant votre petite avec le calme que donne la grande
confiance en Dieu et l'abandon que tout bon chrétien doit à la
Providence.»

Le dimanche 29 mai, il se passa dans la chapelle des Tuileries un

petit événement qui devint bientôt l'entretien de la ville. La chapelle
était pleine de monde pour les vêpres et le salut, auxquels le Roi et
la Reine assistaient.
 «Au moment où le père Feuillant étoit prêt à donner la
bénédiction, on chanta le verset ordinaire: Domine salvum fac
regem; une voix très-forte ajouta par trois fois: et reginam. Cette
addition frappa tout le monde, et la Reine s'évanouit, se croyant
menacée de quelque danger. C'était uniquement le zèle inconsidéré
d'un grenadier, homme remarquable par sa taille. On le fit sortir de
l'église, et on lui demanda à quel dessein il avoit causé ce trouble
dans l'assemblée; alors il se contenta de montrer son cœur et de
dire: «C'est de là qu'est partie cette exclamation.» Un des bons
papiers qui racontent cette anecdote dit qu'il est fâcheux de ne
pouvoir pas approuver ce qu'on admire; et apostrophant ensuite ce
grenadier, il lui dit: «Généreux grenadier, vous êtes vraiment
Français, et le cri de votre cœur a retenti jusqu'au fond des
nôtres[155].»

Le 2 juin, Madame Élisabeth écrivait à la marquise des Montiers,

qui lui annonçait son retour, une de ces lettres mi-sérieuses, mi-
badines, dans laquelle elle lui donnait les plus sages conseils sur la
conduite qu'elle devait tenir dans son intérieur.

Puis viennent encore, au commencement de juin, deux lettres à

madame de Raigecourt, où la bonté du cœur de la princesse se
révèle tout entière. Elle avait écrit quelques jours avant à son amie,
sous le coup de la contrariété que lui faisait éprouver le départ
successif de toutes ses dames, et elle lui avait dit que si madame de
Raigecourt n'était pas nourrice dans ce moment, elle l'aurait priée de
revenir auprès d'elle. Là-dessus madame de Raigecourt, avec son
cœur plein d'imagination et son imagination pleine de cœur, a pris
feu. Elle a écrit à sa princesse qu'elle voulait partir, qu'elle nourrirait
sa fille à Paris aussi bien qu'ailleurs, et que, coûte que coûte, elle
voulait reprendre son poste. À ce sujet, comme Madame Élisabeth
traite son amie! comme elle repousse ses offres généreuses, mais
imprudentes! «Cette occasion vient à propos, mon cœur, pour que je
vous gronde bien à mon aise. Je m'étois déjà bien reproché ce que
je t'ai mandé, mais je m'en repens bien plus depuis que cela t'a fait
venir l'idée la plus folle qu'une personne sensée puisse avoir. Quoi!
parce que je te marquois que si tu ne nourrissois pas je te prierois
de venir, tu en conclus qu'il faut que tu hasardes ta fille et toi dans
ce triste pays! Mais, mon cœur, comment pouvois-tu imaginer que je
puisse souffrir une telle folie?» Puis elle la rassure: les deux dames
qui voulaient la quitter en même temps se sont arrangées; l'une
attendra le retour de l'autre. Des allusions détournées au comte
d'Artois, pour lequel Madame Élisabeth éprouvait la plus vive amitié,
reparaissent de temps en temps dans sa correspondance. Elle
s'inquiète du rôle qu'il pourra être appelé à jouer. On voit du reste
qu'elle fait des progrès dans la vie spirituelle sous la forte discipline
de l'abbé de Firmont, car il lui arrive plus d'une fois de bénir les
épreuves qui ont tiré son âme d'un engourdissement funeste.
Apprendre à connaître les dangers de la prospérité et l'utilité du
malheur, n'est-ce point là par excellence la science d'une religion qui
adore un Dieu crucifié?

On arrivait à une époque où la révolution marchait le front levé et

jetait le masque. Les complots se tramaient en plein jour; les crimes
étaient publiquement cotés et marchandés. On désignait les chefs,
on nommait leurs agents, on indiquait les victimes. Les intentions
révolutionnaires étaient si peu voilées qu'elles laissaient à découvert
leurs filtres et leurs poisons. L'heure était venue où, fatigué de sa
captivité, en butte aux motions les plus acerbes des clubs comme
aux insultes les plus outrageantes de la rue, Louis XVI s'émut enfin
et résolut de quitter Paris. La pensée du danger qu'il courait
personnellement n'entrait pour rien dans sa détermination; mais sa
tendresse et sa conscience même de père et d'époux s'indignaient
de la situation impossible que les événements avaient faite à sa
femme et à ses enfants.
 LIVRE SIXIÈME.
FUITE DE LA FAMILLE ROYALE.
20—26 JUIN 1791.

«Vous êtes venus après moi

comme après un voleur, avec des
épées et des bâtons pour me
prendre.»

S. Marc, chap. XIV, v. 48.

Le Roi dépouillé du droit de grâce. — Fuite de la famille

royale. — Déguisement. — Détails divers sur le voyage. —
Long silence de Madame Élisabeth. — Retour de Varennes. —
Halte à Châlons; à Épernay. — Mademoiselle Vallée. —
Cazotte fils. — Rencontre des commissaires de l'Assemblée
nationale; leur attitude; celle du Roi, de la Reine, de Madame
Élisabeth. — Celle-ci prenant la parole, retrace à Barnave
pendant plus d'une heure et demie les différentes phases de
la révolution. — Récit de Pétion. — Arrivée à Paris. —
Arrestation des gardes du corps. — La Fayette chargé de la
garde du Roi. — Madame de Tourzel, gardée à vue, fait
demander à Madame Élisabeth un livre intitulé: Pensées sur la
mort. — Portrait, de Pétion. — Le Roi et la Reine ne pouvant
sans escorte prendre l'air au jardin, ne quittent pas leur
appartement, et Madame Élisabeth ne veut point pour elle
d'une liberté qu'ils n'ont plus.
 Le décret du 5 juin, qui avait enlevé à Louis XVI le droit de faire
grâce aux condamnés, l'avait profondément humilié et affligé. «On a
ôté depuis longtemps la liberté au Roi, disait à ce sujet Madame
Élisabeth, et voilà qu'on lui interdit la clémence.» Déjà le 10 juin,
indigné du réseau de servitude dans lequel on l'avait enveloppé, il
avait protesté, mais secrètement, contre les décrets qu'il avait
sanctionnés, et d'avance contre les décrets qui seraient présentés à
son acceptation. Mais, hélas! c'était hautement, c'était à la face de la
France et de l'Europe qu'il aurait fallu agir ainsi. Il est douteux qu'on
eût réussi, mais on aurait du moins mis la révolution en demeure de
se produire au grand jour, dans un temps où elle avait encore intérêt
à se cacher: on lui aurait ainsi arraché le masque qu'elle jetait
maintenant.

À l'heure où le Roi se décidait à partir, il ne lui restait qu'à se

dérober par la fuite à une situation intolérable qui, en lui enlevant
l'exercice du pouvoir, lui en laissait toute la responsabilité.

Mon intention n'est point de refaire ici le récit du voyage de

Varennes, dont j'ai étudié avec soin les détails dans les dernières
éditions que j'ai données de l'Histoire de Louis XVII. Je crois devoir
revenir seulement sur quelques points qui concernent plus
particulièrement Madame Élisabeth.

Le voyage de Varennes a deux phases: l'allée et le retour, une

comédie et un drame. Dans la comédie, mêlée d'alertes et
d'inquiétudes et trop mal combinée pour arriver à un heureux
dénoûment, madame de Tourzel joue le rôle de mère sous le nom de
baronne de Korff; le Dauphin et Madame Royale sont ses filles, sous
les noms d'Aglaé et d'Amélie; Marie-Antoinette, sous le nom de
madame Rochet, est gouvernante des deux enfants; Louis XVI est
valet de chambre sous le nom de Durand, et Madame Élisabeth
bonne des enfants sous le nom de Rosalie. La comédie finit à Sainte-
Menehould, le drame commence à Varennes. Là chacun redevient
lui-même. Placée sur le second plan, Madame Élisabeth attire peu
les regards et n'occupe pas l'attention: elle assiste en silence aux
scènes pénibles qu'amènent successivement l'arrestation du Roi, sa
descente chez le procureur de la commune de Varennes, l'arrivée de
MM. de Choiseul et Goguelat, de MM. de Damas et d'Eslon, puis celle
de Romeuf, aide de camp de la Fayette, porteur du décret de
l'Assemblée, et celle enfin de Bayon, envoyé de Bailly. Agitée tour à
tour par le sentiment de la délivrance et l'imminence du péril
qu'éveille l'apparition de ces hommes accourus d'horizons si
différents et avec des buts si opposés, elle voit s'éteindre d'heure en
heure et de minute en minute les dernières lueurs de l'espérance, et,
muette, elle assiste à ce départ fatal qui va ramener le Roi à ses
ennemis. Les cris des populations qui bordent la route, la halte faite
à Sainte-Menehould, où quelques paroles politiques s'échangent
entre Louis XVI et le maire de la ville; l'affluence de la multitude
devenue encore plus compacte et plus hostile à la famille royale; le
meurtre de M. de Dampierre assassiné presque sous ses yeux;
l'aspect de Drouet et de Guillaume, ce valet d'auberge, qui
dépassent au galop la voiture du Roi, à Orbeval, allant comme
l'éclair annoncer leur triomphe à Paris; quelques témoignages
d'intérêt offerts à Châlons au Roi et à la Reine, la messe entendue le
lendemain matin (jour de la Fête-Dieu) et violemment interrompue
par l'ordre du départ;—ces incidents, ces tableaux, ces scènes
avaient dû causer bien des émotions à Madame Élisabeth, mais rien
n'avait altéré son sang-froid, rien ne lui avait encore arraché une
parole. Elle n'avait rien à dire en effet, elle n'avait rien à répondre à
des hommes dont les sentiments et les idées étaient depuis
longtemps faussés par la presse, aigris par les événements, et, dans
cette dernière circonstance, surexcités jusqu'au délire par la passion
politique. Ce fut à Épernay que sa langue se délia. La populace, qui
remplissait les abords de la cour de l'hôtel de Rohan, où le Roi était
attendu pour dîner, obligea les voitures à s'arrêter à la porte de cette
cour. Le jeune Cazotte, commandant de la garde nationale du village
de Pierry, situé à une lieue d'Épernay, était chargé de protéger la
descente des augustes voyageurs; mais sa troupe fidèle n'offre
qu'une digue impuissante au flot populaire qui fait irruption dans la
cour et y entraîne confusément la famille royale. Cazotte se débat
pour arriver à elle. Madame Élisabeth, qui le connaissait, s'étonne de
le voir au milieu de l'émeute, et ne peut s'empêcher de lui dire: «Et
vous aussi, Cazotte!—Je ne suis ici, répond-il, que pour vous servir,
et il est essentiel que vous n'ayez pas l'air de me connoître.»
Élisabeth lui jette un regard d'adhésion, qu'elle porte aussitôt vers la
Reine, comme pour indiquer au protecteur inattendu qui se révèle la
personne qui plus que toutes les autres a besoin de protection. En
effet, mille cris injurieux étaient poussés en ce moment contre
Marie-Antoinette: «Méprisez cette fureur, dit en allemand Cazotte,
dont les yeux rencontrent ceux de la Reine, Dieu est au-dessus de
tout! Verachten sie das, Gott ist über alles!»—«La Reine, raconte
Cazotte, me regarda attentivement et se mit en marche, suivie de
Madame Royale, de Madame Élisabeth et de madame de Tourzel,
mais pêle-mêle avec le peuple... Le Dauphin, porté par un garde du
corps, cessant d'apercevoir sa mère, la demandoit avec larmes, et ce
fut à moi qu'il s'adressa en passant les bras à mon cou; mes joues
furent mouillées de ses pleurs. Nous le portâmes dans la chambre où
la Reine avoit été introduite. Elle me demanda si je pouvois lui
procurer une ouvrière, afin de rajuster une partie de ses vêtements,
sur lesquels la foule avoit marché. Dans la maison même se trouvoit
la fille de l'hôte[156], personne de la plus jolie figure. Je la conduisis
à la Reine, et son respect, ses yeux rouges de pleurs offrirent à Sa
Majesté un touchant contraste avec le spectacle qu'elle venoit d'avoir
sous les yeux[157].»

Après cette halte courte et vive, le convoi se remit en route, et

Madame Élisabeth reprit son attitude calme et silencieuse. Une
heure après eut lieu la rencontre des commissaires de l'Assemblée
nationale (Barnave, Pétion et Latour-Maubourg), chargés de
s'assurer de la personne du Roi. L'installation des deux premiers
dans la voiture de la famille royale ne troubla pas un moment la
sérénité d'Élisabeth, qui n'ouvrit la bouche que pour adjurer, avec la
Reine, Pétion et Barnave d'empêcher qu'on attentât aux jours des
serviteurs qui les accompagnaient. Après ce premier épanchement
de douleur et d'inquiétude, un long silence se fit. On s'observa de
part et d'autre. Les commissaires eurent le temps d'examiner
l'attitude du Roi, de la Reine, de leurs enfants. La simplicité naturelle
de leurs manières les surprit, toucha profondément Barnave, étonna
Pétion lui-même, qui ne put s'en taire, et qui fut aussi frappé de la
mesquinerie, c'est son expression, du costume des voyageurs. Le
Roi, la Reine, Madame Élisabeth remarquèrent aussi de leur côté les
manières et la parole de Barnave, qui contrastaient avec la parole et
les manières de Pétion. Louis XVI entama la conversation et
s'expliqua sur le but de son voyage. Le jeune orateur de Grenoble
répondit respectueusement au Roi, combattant avec déférence une
opinion qu'il ne partageait pas, et avec émotion des sentiments qui
le gagnaient malgré lui. La Reine fut touchée de son trouble comme
de la bienséance de son langage, et elle se mêla bientôt à
l'entretien. Un nouveau jour éclaira Barnave: les traits sous lesquels
on peignait chaque jour la famille royale ressemblaient si peu à ce
qu'il lui était donné de voir[158]!

Madame Élisabeth, depuis deux jours absorbée par le spectacle

inouï qui s'offrait à elle et par les terribles réflexions qu'elle en tirait,
prit enfin la parole, et s'adressant à Barnave, elle lui retraça avec
une fermeté admirable les diverses époques de la révolution:
mettant en opposition, avec un tact merveilleux, la conduite de Louis
XVI et celle de l'Assemblée nationale, elle rappela successivement les
décrets de l'Assemblée, contraires à la religion, à l'autorité royale, à
l'ordre et à la tranquillité du royaume. Madame de Tourzel nous a
conservé une partie de cette allocution, qui dura plus d'une heure et
demie:

«Je suis bien aise, monsieur Barnave, que vous me mettiez à

portée de vous ouvrir mon cœur et de vous parler franchement sur
la révolution. Vous avez trop d'esprit pour n'avoir point connu sur-le-
champ l'amour du Roi pour les François et son désir de les rendre
heureux. Égaré par un amour excessif de la liberté, vous n'avez
calculé que ses avantages sans penser aux désordres qui pouvoient
l'accompagner. Vos premiers succès vous ont enivré et vous ont fait
aller bien au delà du but que vous vous étiez proposé. La résistance
que vous avez éprouvée vous a roidi contre les difficultés et vous a
fait briser sans réflexion tout ce qui mettoit obstacle à vos projets.
Vous avez oublié que le bien s'opère lentement, et qu'en voulant
arriver trop promptement au but on court le risque de s'égarer. Vous
vous êtes persuadé qu'en détruisant tout ce qui existoit, bon ou
mauvais, vous construiriez un ouvrage parfait, et que vous rétabliriez
ce qui étoit utile à conserver. Séduit par cette idée, vous avez
attaqué tous les fondements de la royauté et abreuvé d'outrages et
d'amertume le meilleur des rois. Tous ses efforts et ses sacrifices
pour vous ramener à des idées plus saines ont été inutiles, et vous
n'avez cessé de calomnier ses intentions et de l'avilir aux yeux de
son peuple en ôtant à la royauté toutes les prérogatives.

«Arraché de son palais et conduit à Paris de la manière la plus

indécente, sa bonté ne s'est pas démentie. Il tendoit les bras à ses
enfants égarés, et cherchoit à s'entendre avec eux pour opérer le
bien de cette France qu'il chérissoit malgré ses erreurs. Vous l'avez
forcé de signer une constitution point achevée, quoiqu'il vous
représentât qu'il étoit plus convenable de ne donner sa sanction qu'à
un ouvrage terminé, et vous l'avez obligé de la présenter ainsi au
peuple dans une fédération dont l'objet étoit de vous attacher les
départements en isolant le Roi de la nation.—Ah! madame, reprit
vivement Barnave, ne vous plaignez pas de cette fédération: nous
étions perdus si vous en eussiez su profiter!»

»La famille royale soupira, et Madame Élisabeth continua la

conversation:

«Le Roi, dit-elle, malgré les diverses insultes qu'il a éprouvées de

nouveau depuis cette époque, ne pouvoit encore se résoudre au
parti qu'il vient de prendre; mais, attaqué dans ses principes, dans
sa famille, dans sa propre personne, profondément affligé des
crimes qui se commettent dans toute la France, et voyant une
désorganisation générale dans toutes les parties du gouvernement
et les maux qui en résultent, il s'est déterminé à quitter Paris pour
aller dans une ville du royaume où, libre de ses actions, il pût
engager l'Assemblée à reviser ses décrets et faire, de concert avec
elle, une constitution qui, classant les divers pouvoirs et les
remettant à leur place, pût faire le bonheur de la France.

»Je ne parle pas de nos malheurs particuliers; le Roi seul, qui ne

doit faire qu'un avec la France, nous occupe uniquement: je ne
quitterai jamais sa personne, à moins que vos décrets n'achevant
d'ôter toute liberté de pratiquer la religion, je ne sois forcée de
l'abandonner pour aller dans un pays où la liberté de conscience me
donne les moyens de pratiquer ma religion, à laquelle je tiens plus
qu'à ma propre vie.—Gardez-vous-en bien, répliqua Barnave, vos
exemples et votre présence sont trop utiles à votre pays.—Je n'y
penserai jamais sans cela; il m'en coûteroit trop de quitter mon frère
quand il est aussi malheureux; mais un pareil motif ne peut faire
impression sur vous, monsieur Barnave, qu'on dit protestant, et qui
n'avez peut-être même aucune religion!»

»Barnave s'en défendit en assurant qu'on l'avoit plus d'une fois

calomnié en lui prêtant des propos bien éloignés de ses sentiments,
et nommément, dit-il, cet infâme propos après la mort de MM.
Foulon et Berthier: Ce sang est-il donc si pur?[159]»

Pétion a laissé du retour de Varennes un récit que nous croyons

devoir donner ici, en en retranchant toutefois quelques traits
cyniques que notre plume ne saurait se permettre de reproduire:

«Je fus nommé avec Maubourg et Barnave pour aller au-devant du

Roi et des personnes qui l'accompagnoient.

»Cette nomination avoit été faite sur la présentation des comités

de constitution et militaire réunis.

»Je ne fis d'abord aucune attention à la manière dont cette

ambassade étoit composée; depuis longtemps je n'avois aucune
liaison avec Barnave; je n'avois jamais fréquenté Maubourg.

»Maubourg connoissoit beaucoup madame de Tourzel, et on ne

peut se dissimuler que Barnave avoit déjà conçu des projets. Ils
crurent très-politique de se mettre sous l'abri d'un homme qui étoit
connu pour l'ennemi de toute intrigue et l'ami des bonnes mœurs et
de la vertu. Deux heures après ma nomination, je me rendis chez M.
Maubourg, lieu du rendez-vous.

»À peine y fus-je entré que Duport arriva, que la Fayette arriva; je

ne fus pas peu surpris de voir Duport et la Fayette causer ensemble
familièrement, amicalement. Je savois qu'ils se détestoient, et leur
coalition n'étoit pas encore publique. Arriva aussi un homme que j'ai
toujours estimé, M. Tracy.

»On s'entretint beaucoup des partis qu'on prendroit envers le Roi:

chacun disoit que «ce gros cochon-là étoit fort embarrassant.
L'enfermera-t-on? disoit l'un; régnera-t-il? disoit l'autre; lui donnera-
t-on un conseil?»

»La Fayette faisoit des plaisanteries, ricanoit; Duport s'expliquoit

peu; au milieu d'une espèce d'abandon, j'apercevois clairement
beaucoup de contrainte. Je ne me laissai point aller avec des gens
qui visiblement jouoient serré et qui déjà sans doute s'étoient fait un
plan de conduite.

»Barnave se fit attendre très-longtemps. Nous ne partîmes qu'à

quatre heures du matin. Nous éprouvâmes à la barrière un petit
retard, parce qu'on ne laissoit passer personne, et je vis le moment
où nous serions obligés de rétrograder.

»M. Dumas étoit avec nous. Nous fûmes le prendre chez lui.
L'Assemblée, également sur la présentation des comités, lui avoit
confié le commandement général de toutes les forces que nous
jugerions utile et nécessaire de requérir. Cette nomination n'est pas
indifférente. M. Dumas étoit la créature des Lameth.

»Nous voilà donc partis par un très-bon temps. Les postillons, qui
savoient l'objet de notre voyage, nous conduisoient avec la plus
grande rapidité. Dans les villages, dans les bourgs, dans les villes,
partout sur notre passage on nous donnoit des témoignages de joie,
d'amitié et de respect.

»Dans tout le cours de la route, nous n'arrêtâmes que le temps

nécessaire pour manger promptement un morceau. À la Ferté-sous-
Jouarre, une procession ralentit un instant notre marche: nous
mîmes pied à terre, nous gagnâmes une auberge pour déjeuner. Les
officiers municipaux vinrent nous y joindre; un grand nombre de
citoyens nous entourèrent; nous ne couchâmes point.

»Arrivés à Dormans, où nous nous disposions à dîner, des

courriers vinrent nous dire que le Roi étoit parti le matin de Châlons
et qu'il devoit être près d'Épernay; d'autres assurèrent qu'il avoit été
suivi dans sa marche par les troupes de Bouillé et qu'il alloit d'un
instant à l'autre être enlevé. Plusieurs, pour confirmer ce fait,
soutinrent avoir vu de la cavalerie traverser dans les bois.

»Rien ne nous paroissoit plus naturel que cette nouvelle tentative

de M. de Bouillé; avec son caractère connu, il voudra, disions-nous,
plutôt périr que de l'abandonner.

»Cependant le Roi avançoit dans l'intérieur; il laissoit déjà derrière

lui Châlons, et il nous paroissoit difficile de tenter un coup de main
et surtout de réussir, de sorte qu'en combinant toutes les
circonstances nous penchions davantage à croire que M. de Bouillé
n'hasarderoit pas une housarderie semblable, qui pouvoit d'ailleurs
compromettre la personne du Roi.

»Nous ne nous donnâmes que le temps de manger debout un

morceau, de boire un coup, et nous nous mîmes en marche.

»Mes compagnons de voyage avoient usé envers moi, dans tout le

cours du voyage, de beaucoup de discrétion et de réserve; nous
avions parlé de choses indifférentes. Il n'y avoit eu qu'un seul instant
qui avoit éveillé en moi quelques soupçons. On avoit remis sur le
tapis la question de savoir ce qu'on feroit du Roi; Maubourg avoit
dit: «Il est bien difficile de prononcer: c'est une bête qui s'est laissé
entraîner; il est bien malheureux, en vérité il fait pitié.» Barnave
observoit qu'en effet on pouvoit le regarder comme un imbécile.
«Qu'en pensez-vous, me dit-il, Pétion?» Et dans le même moment il
fit un signe à Maubourg, mais de ces signes d'intelligence pour celui
à qui on les fait et de défiance pour celui de qui on ne veut pas être
vu; cependant il étoit possible que, connoissant l'austérité et
l'inflexibilité de mes principes, il ne vouloit dire autre chose sinon:
Pétion va condamner avec toute la rigueur de la loi et comme si
c'étoit un simple citoyen.

»Je répondis néanmoins que je ne m'écartois pas de l'idée de le

traiter comme un imbécile, incapable d'occuper le trône, qui avoit
besoin d'un tuteur, que ce tuteur pouvoit être un conseil national.
Là-dessus des objections, des réponses, des répliques; nous
parlâmes de la régence, de la difficulté du choix du régent.

»M. Dumas n'étoit pas dans la même voiture que nous. Sortant de
Dormans, M. Dumas examinoit tous les endroits comme un général
d'armée. «Si M. de Bouillé arrive, disoit-il, il ne peut prendre que par
là; on peut l'arrêter à cette hauteur et ce défilé; sa cavalerie ne peut
plus manœuvrer.» Il fit même une disposition militaire. Il donna
ordre à la garde nationale d'un bourg de prendre tel et tel poste.

»Ces précautions paroissoient non-seulement inutiles, mais

ridicules. Nous nous en divertîmes, et je dois dire que M. Dumas lui-
même s'en amusoit. Il n'en paroissoit pas moins sérieux avec les
habitants des campagnes, qui s'attendoient sérieusement à
combattre. Le zèle qui animoit ces bonnes gens étoit vraiment
admirable; ils accouroient de toutes parts, vieillards, femmes et
enfants: les uns avec des broches, avec des faux; les autres avec
des bâtons, des sabres, de mauvais fusils; ils alloient comme à la
noce; des maris embrassoient leurs femmes, leur disant: «Eh bien,
s'il le faut, nous irons à la frontière tuer ces gueux, ces j... f...-là! Ah!
nous l'aurons, ils ont beau faire.»—Ils couroient aussi vite que la
voiture; ils applaudissoient; ils crioient: Vive la nation! J'étois
émerveillé, attendri de ce sublime spectacle.
 »Les courriers se multiplioient, se pressoient, nous disoient: Le Roi
approche. À une lieue, une lieue et demie d'Épernay, sur une très-
belle route, nous apercevons de loin un nuage de poussière, nous
entendons un grand bruit; plusieurs personnes approchent de notre
voiture et nous crient: Voilà le Roi! Nous faisons ralentir le pas des
chevaux; nous avançons, nous apercevons un groupe immense;
nous mettons pied à terre. La voiture du Roi s'arrête, nous allons au-
devant; l'huissier nous précède, et le cérémonial s'observe d'une
manière imposante. Aussitôt qu'on nous aperçoit, on s'écrie: Voilà
les députés de l'Assemblée nationale! On s'empresse de nous faire
place partout; on donne des signals d'ordre et de silence. Le cortége
étoit superbe: des gardes nationales à cheval, à pied, avec uniforme,
sans uniforme, des armes de toute espèce; le soleil, sur son déclin,
réfléchissoit sa lumière sur ce bel ensemble, au milieu d'une paisible
campagne; la grande circonstance, je ne sais, tout cela étoit
imposant et faisoit naître des idées qui ne se calculent pas; mais que
le sentiment étoit diversifié et exagéré! Je ne puis peindre le respect
dont nous étions environnés. Quel ascendant puissant, me disois-je,
a cette assemblée, quel mouvement elle a imprimé, que ne peut-elle
pas faire! Comme elle seroit coupable de ne pas répondre à cette
confiance sans bornes, à cet amour si touchant!

»Au milieu des chevaux, du cliquetis des armes, des

applaudissements de la foule que l'empressement attiroit, que la
crainte de nous presser éloignoit, nous arrivâmes à la portière de la
voiture. Elle s'ouvrit sur-le-champ. Des bruits confus en sortoient. La
Reine, Madame Élisabeth paroissoient vivement émues, éplorées:
«Messieurs, dirent-elles avec précipitation, les larmes aux yeux,
messieurs! Ah! monsieur Maubourg, en lui prenant la main en grâce;
ah! monsieur, prenant aussi la main à Barnave; ah! monsieur,
Madame Élisabeth appuyant seulement la main sur la mienne,
qu'aucun malheur n'arrive, que les gens qui nous ont accompagnés
ne soient pas victimes, qu'on n'attente pas à leurs jours; le Roi n'a
pas voulu sortir de France!—Non, messieurs, dit le Roi en parlant
avec volubilité, je ne sortois pas; je l'ai déclaré, cela est vrai.»
 »Cette scène fut vive, ne dura qu'une minute; mais comme cette
minute me frappa! Maubourg répondit; je répondis par des ah! par
des mots insignifiants et quelques signes de dignité sans dureté, de
douceur sans afféterie, et brisant ce colloque, prenant le caractère
de notre mission, je l'annonçai au Roi en peu de mots, et je lui lus le
décret dont j'étois porteur. Le plus grand silence régnoit dans cet
instant.

»Passant de l'autre côté de la voiture, je demandai du silence, je

l'obtins, et je donnai aux citoyens lecture de ce décret; il fut
applaudi. M. Dumas prit à l'instant le commandement de toutes les
gardes qui jusqu'à ce moment avoient accompagné le Roi. Il y eut
de la part de ces gardes une soumission admirable. C'étoit avec joie
qu'elles reconnoissoient le chef militaire qui se plaçoit à leur tête:
l'Assemblée l'avoit désigné; il sembloit que c'étoit pour eux un objet
sacré.

»Nous dîmes au Roi qu'il étoit dans les convenances que nous
prissions place dans sa voiture. Barnave et moi nous y entrâmes. À
peine y eurent-nous mis le premier pied que nous dîmes au Roi:
«Mais, Sire, nous allons vous gêner, vous incommoder; il est
impossible que nous trouvions place ici.» Le Roi répondit: «Je désire
qu'aucune des personnes qui m'ont accompagné ne sorte. Je vous
prie de vous asseoir, nous allons nous presser, vous trouverez
place.»

»Le Roi, la Reine, le Prince royal étoient sur le derrière; Madame

Élisabeth, madame de Tourzel et Madame étoient sur le devant. La
Reine prit le prince sur ses genoux. Barnave se plaça entre le Roi et
la Reine. Madame de Tourzel mit Madame entre ses jambes, et je
me plaçai entre Madame Élisabeth et madame de Tourzel.

»Nous n'avions pas fait dix pas qu'on nous renouvelle les
protestations que le Roi ne vouloit pas sortir du royaume, et qu'on
nous témoigne les plus vives inquiétudes sur le sort des trois gardes
du corps qui étoient sur le siége de la voiture. Les paroles se
pressoient, se croisoient; chacun disoit la même chose; il sembloit
que c'étoit le mot du gué; mais il n'y avoit aucune mesure, aucune
dignité dans cette conversation, et je n'aperçus surtout sur aucune
des figures cette grandeur souvent très-imprimante que donne le
malheur à des âmes élevées.

»Le premier caquetage passé, j'aperçus un air de simplicité et de

famille qui me plut; il n'y avoit plus là de représentation royale, il
existoit une aisance et une bonne hommie domestique: la Reine
appeloit Madame Élisabeth ma petite sœur; Madame Élisabeth lui
répondoit de même. Madame Élisabeth appeloit le Roi mon frère; la
Reine faisoit danser le Prince sur ses genoux. Madame, quoique plus
réservée, jouoit avec son frère: le Roi regardoit tout cela avec un air
assez satisfait, quoique peu ému et peu sensible.

»J'aperçus, en levant les yeux au ciel de la voiture, un chapeau

galonné dans le filet; c'étoit, je n'en doute pas, celui que le Roi avoit
dans son déguisement, et j'avoue que je fus révolté qu'on eût laissé
subsister cette trace qui rappeloit une action dont on devoit être
empressé et jaloux d'anéantir jusqu'au plus léger souvenir.
Involontairement je portois de temps à autre mes regards sur le
chapeau: j'ignore si on s'en aperçut.

»J'examinai aussi le costume des voyageurs. Il étoit impossible

qu'il fût plus mesquin. Le Roi avoit un habit brun peluché, du linge
fort sale; les femmes avoient de petites robes très-communes et du
matin.

»Le Roi parla d'un accident qui venoit d'arriver à un seigneur qui
venoit d'être égorgé, et il en paroissoit très-affecté. La Reine répétoit
que c'étoit abominable, qu'il faisoit beaucoup de bien dans sa
paroisse, et que c'étoient ses propres habitants qui l'avoient
assassiné.

»Un autre fait l'affectoit beaucoup: elle se plaignoit amèrement

des soupçons qu'on avoit manifestés dans la route contre elle.
«Pourriez-vous le croire, nous disoit-elle, je vais pour donner une
cuisse de volaille à un garde national qui paroissoit nous suivre avec
quelque attachement; eh bien, on crie au garde national: Ne mangez
pas, défiez-vous! en faisant entendre que cette volaille pouvoit être
empoisonnée. Oh! j'avoue que j'ai été indignée de ce soupçon, et à
l'instant j'ai distribué de cette volaille à mes enfants; j'en ai mangé
moi-même.»

»Cette histoire à peine finie: «Messieurs, nous dit-elle, nous avons

été ce matin à la messe à Châlons, mais une messe
constitutionnelle.» Madame Élisabeth appuya, le Roi ne dit un mot.
Je ne pus pas m'empêcher de répondre que cela étoit bien, que ces
messes étoient les seules que le Roi dût entendre; mais j'avoue que
je fus très-mécontent de ce genre de persiflage et dans les
circonstances où le Roi se trouvoit.

»La Reine et Madame Élisabeth revenoient sans cesse aux gardes

du corps qui étoient sur le siége de la voiture, et témoignoient les
plus vives inquiétudes.

«Quant à moi, dit madame de Tourzel, qui avoit gardé jusqu'alors

le silence, mais avec un ton résolu et très-sec, j'ai fait mon devoir en
accompagnant le Roi et en ne quittant pas les enfants qui m'ont été
confiés. On fera de moi tout ce qu'on voudra, mais je ne me
reproche rien. Si c'étoit à recommencer, je recommencerois encore.»

»Le Roi parloit très-peu, et la conversation devint plus particulière;

la Reine parlat à Barnave et Madame Élisabeth me parlat, mais
comme si on se fût distribué les rôles en se disant: Chargez-vous de
votre voisin, je vais me charger du mien.

»Madame Élisabeth me fixoit avec des yeux attendris, avec cet air
de langueur que le malheur donne et qui inspire un assez vif
intérêt.....

»Nous allions lentement: un peuple nombreux nous

accompagnoit. Madame Élisabeth m'entretenoit des gardes du corps
qui les avoient accompagnés; elle m'en parloit avec un intérêt
tendre; sa voix avoit je ne sais quoi de flatteur. Elle entrecoupoit
quelquefois ces mots de manière à me troubler. Je lui répondois avec
une égale douceur, mais cependant sans foiblesse, avec un genre
d'austérité qui n'avoit rien de farouche; je me gardois bien de
compromettre mon caractère; je donnois tout ce qu'il falloit à la
position dans laquelle je croyois la voir, mais sans néanmoins donner
assez pour qu'elle pût penser, même soupçonner, que rien altérât
jamais mon opinion, et je pense qu'elle le sentit à merveille, qu'elle
vit que les tentations les plus séduisantes seroient inutiles, car je
remarquois un certain refroidissement, une certaine sévérité qui
tient souvent chez les femmes à l'amour-propre irrité.

»Nous arrivions insensiblement à Dormans. J'observai plusieurs

fois Barnave, et quoique la demie clarté qui régnoit ne me permît
pas de distinguer avec une grande précision, son maintien avec la
Reine me paroissoit honnête, réservé, et la conversation ne me
sembloit pas mystérieuse.

»Nous entrâmes à Dormans entre minuit et une heure; nous

descendîmes dans l'auberge où nous avions mangé un morceau (en
venant), et cette auberge, quoique très-passable pour un petit
endroit, n'était guère propre à recevoir la famille royale.

»J'avoue cependant que je n'étois pas fâché que la cour connût ce

que c'étoit qu'une auberge ordinaire.

»Le Roi descendit de voiture, et nous descendîmes

successivement; il n'y eut aucun cri de Vive le Roi! et on criait
toujours: Vive la nation! Vive l'Assemblée nationale! quelquefois:
Vive Barnave! Vive Pétion! Cela eut lieu pendant toute la route.

»Nous montâmes dans les chambres hautes; des sentinelles furent

posées à l'instant à toutes les portes. Le Roi, la Reine, Madame
Élisabeth, le Prince, Madame, madame de Tourzel soupèrent
ensemble; MM. Maubourg, Barnave, Dumas et moi, nous soupâmes
dans un autre appartement; nous fîmes nos dépêches pour
l'Assemblée nationale; je me mis dans un lit à trois heures du matin;
Barnave vint coucher dans le même lit. Déjà j'étois endormi; nous
nous levâmes à cinq heures.

»Le Roi étoit seul dans une chambre où il y avoit un mauvais lit
d'auberge. Il passa la nuit dans un fauteuil.

»Il étoit difficile de dormir dans l'auberge, car les gardes

nationales et tous les habitants des environs étoit autour à chanter, à
boire et danser des rondes.

»Avant de partir, MM. Dumas, Barnave, Maubourg et moi, nous

passâmes en revue les gardes nationales; nous fûmes très-bien
accueillis.

»Nous montâmes en voiture entre cinq et six heures, et je me

plaçai cette fois entre le Roi et la Reine. Nous étions fort mal à l'aise.
Le jeune Prince venoit sur mes genoux, jouoit avec moi; il étoit fort
gai et surtout fort remuant.

»Le Roi cherchoit à causer. Il me fit d'abord de ces questions

oiseuses pour entrer ensuite en matière. Il me demanda si j'étois
marié, je lui dis que oui; il me demanda si j'avois des enfants, je lui
dis que j'en avois un qui étoit plus âgé que son fils. Je lui disois de
temps en temps: «Regardez ces paysages, comme ils sont beaux!»
Nous étions en effet sur des coteaux admirables, où la vue étoit
variée, étendue: la Marne couloit à nos pieds. «Quel beau pays,
m'écriai-je, que la France! il n'est pas dans le monde de royaume qui
puisse lui être comparé.» Je lâchois ces idées à dessein; j'examinois
quelle impression elles faisoient sur la physionomie du Roi; mais sa
figure est toujours froide, inanimée, d'une manière vraiment
désolante, et, à vrai dire, cette masse de chair est insensible.

»Il voulut me parler des Anglois, de leur industrie, du génie

commercial de cette nation. Il articula une ou deux phrases. Ensuite
il s'embarrassa, s'en aperçut et rougit. Cette difficulté à s'exprimer
lui donne une timidité dont je m'aperçus plusieurs fois. Ceux qui ne
le connoissent pas seroient tentés de prendre cette timidité pour de
la stupidité; mais on se tromperoit: il est très-rare qu'il lui échappe
une chose déplacée, et je ne lui ai pas entendu dire une sottise.

»Il s'appliquoit beaucoup à parcourir des cartes géographiques

qu'il avoit, et il disoit: Nous sommes dans tel département, dans tel
district, dans tel endroit.

»La Reine causa aussi avec moi d'une manière unie et familière;
elle me parla aussi de l'éducation de ses enfants. Elle en parla en
mère de famille et en femme assez instruite. Elle exposa des
principes très-justes en éducation. Elle dit qu'il falloit éloigner de
l'oreille des princes toute flatterie, qu'il ne falloit jamais leur dire que
la vérité. Mais j'ai su depuis que c'étoit le jargon de mode dans
toutes les cours de l'Europe. Une femme très-éclairée me rapportoit
qu'elle avoit vu et assez familièrement cinq ou six princesses qui
toutes lui avoient tenu le même langage, sans pour cela s'occuper
une minute de l'éducation de leurs enfants.

»Au surplus, je ne fus pas longtemps sans m'apercevoir que tout

ce qu'elle me disoit étoit extrêmement superficiel, et il ne lui
échappoit aucune idée forte ni de caractère; elle n'avoit dans aucun
sens ni l'air ni l'attitude de sa position.

»Je vis bien cependant qu'elle désiroit qu'on lui crût du caractère;
elle répétoit assez souvent qu'il falloit en avoir, et il se présenta une
circonstance où elle me fit voir qu'elle le faisoit consister en si peu
de chose que je demeurai convaincu qu'elle n'en avoit pas.

»Les glaces étoient toujours baissées; nous étions cuits par le

soleil et étouffés par la poussière; mais le peuple des campagnes,
les gardes nationales nous suivant processionnellement, il étoit
impossible de faire autrement, parce qu'on vouloit voir le Roi.

»Cependant la Reine saisit un moment pour baisser le sthort. Elle

mangeoit alors une cuisse de pigeon. Le peuple murmure; Madame
É
Élisabeth fut pour le lever, la Reine s'y oppose en disant: «Non, il
faut du caractère.» Elle saisit l'instant mathématique où le peuple ne
se plaignoit plus pour lever elle-même le sthort et pour faire croire
qu'elle ne le levoit pas parce qu'on l'avoit demandé; elle jeta par la
portière l'os de la cuisse de pigeon, et elle répéta ces propres
expressions: «Il faut avoir du caractère jusqu'au bout.»

»Cette circonstance est minutieuse, mais je ne puis pas dire

combien elle m'a frappé.

»À l'entrée de la Ferté-sous-Jouarre, nous trouvâmes un grand

concours de citoyens qui crioient: Vive la nation! Vive l'Assemblée
nationale! Vive Barnave! Vive Pétion! J'apercevois que ces cris
faisoient une impression désagréable à la Reine, surtout à Madame
Élisabeth. Le Roi y paroissoit insensible, et l'embarras qui régnoit sur
leurs figures m'embarrassoit moi-même.

»Le maire de la Ferté-sous-Jouarre nous avoit fait prévenir qu'il

recevroit le Roi, et le Roi avoit accepté cette offre. La maison du
maire est extrêmement jolie; la Marne en baigne les murs. Le jardin
qui accompagne cette maison est bien distribué, bien soigné, et la
terrasse qui est sur le bord de la rivière est agréable.

»Je me promenai avec Madame Élisabeth sur cette terrasse avant

le dîner, et là je lui parlai avec toute la franchise et la véracité de
mon caractère; je lui représentai combien le Roi étoit mal entouré,
mal conseillé; je lui parlai de tous les intrigants, de toutes les
manœuvres de la cour avec la dignité d'un homme libre et le dédain
d'un homme sage. Je mis de la force, de la persuasion dans
l'expression de mes sentiments, et l'indignation de la vertu lui rendit
sensible et attachant le langage de la raison; elle parut attentive à ce
que je lui disois: elle en parut touchée; elle se plaisoit à mon
entretien, et je me plaisois à l'entretenir. Je serois bien surpris si elle
n'avoit pas une belle et bonne âme, quoique très-imbue des
préjugés de naissance et gâtée par les vices d'une éducation de
cour.»
 C'est ainsi que ce ridicule pédagogue, prenant pour des
qualifications méritées les sobriquets que lui adressait la foule,
s'imaginait que Madame Élisabeth était frappée d'admiration pour le
vertueux Pétion. Mais laissons-le poursuivre son récit.

«Barnave, dit-il, causa un instant avec la Reine, mais, à ce qu'il me

parut, d'une manière assez indifférente.

»Le Roi vint lui-même sur la terrasse nous engager à dîner avec
lui. Nous conférâmes, MM. Maubourg, Barnave et moi, pour savoir si
nous accepterions. «Cette familiarité, dit l'un, pourroit paroître
suspecte.—Comme ce n'est pas l'étiquette, dit l'autre, on pourroit
croire que c'est à l'occasion de la situation malheureuse qu'il nous a
invités.» Nous convînmes de refuser, et nous fûmes lui dire que nous
avions besoin de nous retirer pour notre correspondance, ce qui
nous empêchoit de répondre à l'honneur qu'il nous faisoit.

»On servit le Roi ainsi que sa famille dans une salle séparée; on
nous servit dans une autre. Les repas furent splendides. Nous nous
mîmes à cinq heures en marche. En sortant de la Ferté, il y eut du
mouvement et du bruit autour de la voiture. Les citoyens forçoient la
garde nationale, la garde nationale vouloit empêcher d'approcher. Je
vis un de nos députés, Kervelegan, qui perçoit la foule, qui
s'échauffoit avec les gardes nationaux qui cherchoient à l'écarter, et
qui approcha de la portière en jurant, en disant: «Pour une brute
comme celle-là, voilà bien du train.» J'avançai ma tête hors de la
portière pour lui parler; il étoit très-échauffé, il me dit: «Sont-ils tous
là? prenez garde, car on parle encore de les enlever; vous êtes là
environnés de gens bien insolents!» Il se retira, et la Reine me dit
d'un air très-piqué et un peu effrayé: «Voilà un homme bien
malhonnête!» Je lui répondis qu'il se fâchoit contre la garde qui avoit
agi brusquement à son égard. Elle me parut craindre, et le jeune
prince jeta deux ou trois cris de frayeur.

»Cependant nous cheminions tranquillement. La Reine, à côté de

qui j'étois, m'adressa fréquemment la parole, et j'eus occasion de lui
dire avec toute franchise ce que l'on pensoit de la cour, ce que l'on
disoit de tous les intrigants qui fréquentoient le château. Nous
parlâmes de l'Assemblée nationale, du côté droit, du côté gauche, de
Malouet, de Maury, de Cazalès, mais avec cette aisance que l'on met
avec ses amis. Je ne me gênai en aucune manière; je lui rapportai
plusieurs propos qu'on ne cessoit de tenir à la cour, qui devenoient
publics et qui indisposoient beaucoup le peuple; je lui citai les
journaux que lisoit le Roi. Le Roi, qui entendoit très-bien toute cette
conversation, me dit: «Je vous assure que je ne lis pas plus l'Ami du
Roi que Marat.»

»La Reine paroissoit prendre le plus vif intérêt à cette discussion;

elle l'excitoit, elle l'animoit, elle faisoit des réflexions assez fines,
assez méchantes.

«Tout cela est fort bon, me dit-elle; on blâme beaucoup le Roi,

mais on ne sait pas assez dans quelle position il se trouve; on lui fait
à chaque instant des récits qui se contredisent, il ne sait que croire;
on lui donne successivement des conseils qui se croisent et se
détruisent, il ne sait que faire: comme on le rend malheureux, sa
position n'est pas tenable; on ne l'entretient en même temps que de
malheurs particuliers, que de meurtres; c'est tout cela qui l'a
déterminé à quitter la capitale. La couronne, m'ajouta-t-elle, est en
suspens sur sa tête. Vous n'ignorez pas qu'il y a un parti qui ne veut
pas de roi, que ce parti grossit de jour en jour.»

À travers les mailles grossières de ce compte rendu burlesque,

comme sous la couche de plâtre qui, appliquée par un maçon,
déshonore les sculptures d'un monument, on entrevoit la force et la
finesse des raisons de la Reine. Elle alléguait la multiplicité des
rapports contraires que recevait le Roi, les avis contradictoires dont il
était assiégé, les malheurs de tout genre dont on le rendait
responsable, l'impossibilité où il était de les prévenir ou de les
réparer, parce que la réalité de la puissance lui manquait; les progrès
de plus en plus marqués de la situation vers la république à l'ombre
de la fiction royale que l'on maintenait: voilà les véritables causes qui
l'avaient décidé à s'éloigner de Paris. Ce n'était pas un roi qui avait
quitté le pouvoir, c'était un captif qui avait rompu sa chaîne.
Écoutons la réponse de Pétion:

«Je crus très-distinctement apercevoir l'intention de la Reine en

laissant échapper ces derniers mots: pour mieux dire, je ne pus pas
me méprendre sur l'application qu'elle vouloit en faire.

«Eh bien, lui dis-je, madame, je vais vous parler avec toute
franchise, et je pense que je ne vous serai pas suspect. Je suis un de
ceux que l'on désigne sous le titre de républicains, et, si vous le
voulez, un des chefs de ce parti. Par principe, par sentiment, je
préfère le gouvernement républicain à tout autre. Il seroit trop long
de développer ici mon idée, car il est telle et telle république que
j'aimerois moins que le despotisme d'un seul. Mais il n'est que trop
vrai, je ne demande pas que vous en conveniez, mais il n'est que
trop vrai que presque partout les rois ont fait le malheur des
hommes; qu'ils ont regardé leurs semblables comme leur propriété;
qu'entourés de courtisans, de flatteurs, ils échappent rarement aux
vices de leur éducation première. Mais, madame, est-il exact de dire
qu'il existe maintenant un parti républicain qui veuille renverser la
constitution actuelle pour en élever une autre sur ses ruines? On se
plaît à le répandre pour avoir le prétexte de former également un
autre parti hors la constitution, un parti royaliste non constitutionnel,
pour exciter des troubles intérieurs. Le piége est trop grossier. On ne
peut pas, de bonne foi, se persuader que le parti appelé républicain
soit redoutable; il est composé d'hommes sages, d'hommes à
principes d'honneur qui savent calculer et qui ne hasarderoient pas
un bouleversement général qui pourroit conduire plus facilement au
despotisme qu'à la liberté.

»Ah! madame, que le Roi eût été bien conduit s'il eût favorisé
sincèrement la révolution! Les troubles qui nous agitent
n'existeroient pas, et déjà la constitution marcheroit, les ennemis du
dehors nous respecteroient; le peuple n'est que trop porté à chérir
et idolâtrer ses rois.»
 »Je ne puis dire avec quelle énergie, avec quelle abondance d'âme
je lui parlai; j'étois animé par les circonstances et surtout par l'idée
que les germes de vérité que je jetois pourroient fructifier; que la
Reine se souviendroit de ce moment d'entretien.»

On le voit, il ne suffisait pas à Pétion d'avoir fasciné Madame

Élisabeth, il fallait qu'il fascinât encore la Reine. C'est ainsi que, sous
sa plume, le retour de Varennes devient l'apothéose de Pétion.

Il continue en ces termes:

«Je m'expliquai enfin très-clairement sur l'évasion du Roi. La

Reine, Madame Élisabeth répétoient souvent que le Roi avoit été
libre de voyager dans le Royaume, que son intention n'avoit jamais
été d'en sortir.

»Permettez-moi, disois-je à la Reine, de ne pas pénétrer dans

cette intention. Je suppose que le Roi se fût arrêté d'abord sur la
frontière, il se seroit mis dans une position à passer d'un instant à
l'autre chez l'étranger; il se seroit peut-être trouvé forcé de le faire,
et puis d'ailleurs le Roi n'a pas pu se dissimuler que son absence
pouvoit occasionner les plus grands désordres. Le moindre
inconvénient de son éloignement de l'Assemblée nationale étoit
d'arrêter tout court la marche des affaires.»

»Je ne me permis pas néanmoins une seule fois de laisser

entrevoir mon avis sur le genre de peine que je croirois applicable à
un délit de cette nature.

»À mon tour je mis quelque affectation à rappeler le beau calme

qui avoit existé dans Paris à la nouvelle du départ du Roi. Ni la Reine
ni Madame Élisabeth ne répondirent jamais un mot sur cela. Elles ne
dirent pas que rien n'étoit plus heureux; je crus même apercevoir
qu'elles en étoient très-piquées; elles eurent au moins la bonne foi
de ne pas paroître contentes.
 »Nous arrivâmes à Meaux de bonne heure. Le Roi, sa famille et
nous, nous descendîmes à l'évêché. L'évêque étoit constitutionnel,
ce qui ne dut pas beaucoup plaire au Roi; mais il ne donna aucun
signe de mécontentement. Des sentinelles furent posées à toutes les
issues.

»Le Roi soupa très-peu, se retira de bonne heure dans son

appartement. Comme il n'avoit pas de linge, il emprunta une
chemise à l'huissier qui nous accompagnoit.

»Nous nous fîmes servir dans nos chambres; nous mangeâmes à

la hâte un morceau et nous fîmes nos dépêches. Nous partîmes de
Meaux à six heures du matin.

»Je repris ma place première, entre Madame Élisabeth et madame

de Tourzel, et Barnave se plaça entre le Roi et la Reine. Jamais
journée ne fut plus longue et plus fatigante. La chaleur fut extrême,
et des tourbillons de poussière nous enveloppoient. Le Roi m'offrit et
me versa à boire plusieurs fois. Nous restâmes douze heures
entières en voiture sans descendre un moment..... Une chose que je
remarquai, c'est que Mademoiselle se mit constamment sur mes
genoux sans en sortir, tandis qu'auparavant elle s'étoit placée tantôt
sur madame de Tourzel, tantôt sur Madame Élisabeth. Je pensai que
cet arrangement étoit concerté; qu'étant sur moi on la regardoit
comme dans un asile sûr et sacré que le peuple, en cas de
mouvement, respecteroit.»

Pétion, toujours Pétion; tout à l'heure sa voix était un oracle,

maintenant ses genoux sont un lieu d'asile.

«Nous marchâmes tranquillement, poursuit-il, jusqu'à Pantin. La

cavalerie qui nous avoit accompagnés depuis Meaux et un
détachement de celle de Paris nous servoient d'escorte et
environnoient la voiture.

»Lorsque la garde nationale à pied nous eut joint, un peu au-

dessus de Pantin, il y eut un mouvement qui menaçoit d'avoir des
suites. Les grenadiers faisoient reculer les chevaux, les cavaliers
résistoient; les chasseurs se réunissoient aux grenadiers pour
éloigner la cavalerie. La mêlée devint vive; on lâcha de gros mots,
on alloit en venir aux mains; les baïonnettes rouloient autour de la
voiture, dont les glaces étoient baissées. Il étoit très-possible qu'au
milieu de ce tumulte des gens malintentionnés portassent quelques
coups à la Reine. J'apercevois des soldats qui paroissoient très-
irrités, qui la regardoient de fort mauvais œil. Bientôt elle fut
apostrophée (des qualifications les plus outrageantes et les plus
odieuses). Le Roi entendit très-distinctement ces propos. Le jeune
Prince, effrayé du bruit, du cliquetis des armes, jeta quelques cris
d'effroi; la Reine le retint, les larmes lui rouloient dans les yeux.

«Barnave et moi voyant que la chose pouvoit devenir sérieuse,

nous mîmes la tête aux portières; nous haranguâmes, on nous
témoigna de la confiance. Les grenadiers nous dirent: «Ne craignez
rien, il n'arrivera aucun mal, nous en répondons; mais le poste
d'honneur nous appartient.» C'étoit en effet une querelle de
prééminence, mais qui pouvoit s'envenimer et qui auroit pu conduire
à des excès.

»Lorsque ces postes furent une fois remplis par les grenadiers, il
n'y eut plus de dispute; nous marchions sans obstacles, à la vérité
très-lentement. Au lieu d'entrer dans Paris par la porte Saint-Denis,
nous fîmes le tour des murs et nous passâmes par la porte de la
Conférence.

»Le concours du peuple étoit immense, et il sembloit que tout

Paris et ses environs étoient réunis dans les Champs-Élysées. Jamais
un spectacle plus imposant ne s'est présenté aux regards des
hommes. Les toits des maisons étoient couverts d'hommes, de
femmes et d'enfants; les barrières en étoient hérissées, les arbres en
étoient remplis; tout le monde avoit le chapeau sur la tête, le silence
le plus majestueux régnoit; la garde nationale portoit le fusil la
crosse en haut. Ce calme énergique étoit quelquefois interrompu par
les cris: Vive la nation! Le nom de Barnave et le mien étoient
quelquefois mêlés à ces cris, ce qui faisoit l'impression la plus
douloureuse à Madame Élisabeth surtout. Ce qu'il y a de
remarquable, c'est que nulle part je n'entendis proférer une parole
désobligeante contre le Roi: on se contentoit de crier: Vive la nation!

»Nous passâmes sur le pont tournant, qui fut fermé aussitôt, ce

qui coupa le passage; il y avoit néanmoins beaucoup de monde dans
les Tuileries, des gardes nationaux surtout. Une partie des députés
sortit de la salle pour être témoin du spectacle. On remarqua M.
d'Orléans, ce qui parut au moins inconsidéré. Arrivés en face de la
grille d'entrée du château et au pied de la première terrasse, je crus
qu'il alloit se passer une scène sanglante. Les gardes nationaux se
pressoient autour de la voiture, sans ordre et sans vouloir rien
entendre. Les gardes du corps qui étoient sur le siége excitoient
l'indignation, la rage des spectateurs. On leur présentoit des
baïonnettes avec les menaces et les imprécations les plus terribles.
Je vis le moment où ils alloient être immolés sous nos yeux. Je
m'élance de tout mon corps hors de la portière; j'invoque la loi; je
m'élève contre l'attentat affreux qui va déshonorer les citoyens; je
leur dis qu'ils peuvent descendre; je le leur commande avec un
empire qui en impose; on s'en empare assez brusquement, mais on
les protége, et il ne leur est fait aucun mal.

»Des députés fendent la foule, arrivent, nous secondent,

exhortent, parlent au nom de la loi.

»M. de la Fayette, dans le même moment, paroît à cheval au

milieu des baïonnettes, s'exprime avec chaleur; le calme ne se
rétablit pas, mais il est facile de voir qu'il n'existe aucune intention
malfaisante.

»On ouvre les portières; le Roi sort, on garde le silence; la Reine

sort, on murmure avec assez de violence; les enfants sont reçus
avec bonté, même avec attendrissement; je laisse passer tout le
monde, les députés accompagnoient, je clos la marche. Déjà la grille
étoit fermée; je suis très-froissé avant de pouvoir entrer. Un garde
me prend au collet et alloit me donner une bourrade, ne me
connoissant pas, lorsqu'il est arrêté tout à coup; on décline mon
nom, il me fait mille excuses. Je monte dans les appartements. Le
Roi et sa famille étoient là, dans la pièce qui précède la chambre à
coucher du Roi, comme de simples voyageurs fatigués, assez mal en
ordre, appuyés sur des meubles.

»Une scène très-originale et très-piquante, c'est que

Corollaire[160], s'approchant du Roi et prenant le ton doctoral, mitigé
cependant par un peu de bonté, le réprimandoit comme un écolier.
«N'avez-vous pas fait là, lui disoit-il, une belle équipée! Ce que c'est
que d'être mal environné! Vous êtes bon, vous êtes aimé; voyez
quelle affaire vous avez là!» Et puis il s'attendrissoit; on ne peut se
faire une idée de cette bizarre mercuriale, il faut l'avoir vue pour la
croire.

»Quelques minutes écoulées, nous passâmes, Maubourg, Barnave

et moi, dans l'appartement du Roi; la Reine, Madame Élisabeth y
passèrent également. Déjà tous les valets y étoient rendus dans leur
costume d'usage. Il sembloit que le Roi revenoit d'une partie de
chasse; on lui fit la toilette. En voyant le Roi, en le contemplant,
jamais on n'auroit pu deviner tout ce qui venoit de se passer; il étoit
tout aussi flegme, tout aussi tranquille que si rien eût été. Il se mit
sur-le-champ en représentation; tous ceux qui l'entouroient ne
paroissoient pas seulement penser qu'il fût survenu des événements
qui avoient éloigné le Roi pendant plusieurs jours et qui le
ramenoient. J'étois confondu de ce que je voyois.

»Nous dîmes au Roi qu'il étoit nécessaire qu'il nous donnât les
noms des trois gardes du corps, ce qu'il fit.

»Comme j'étois excédé de fatigue et que je haletois de soif, je

priai Madame Élisabeth de vouloir bien me faire donner des
rafraîchissements, ce qui fut fait à l'instant. Nous n'eûmes que le
temps de boire deux ou trois verres de bière. Nous nous rendîmes
ensuite auprès des gardes du corps, que nous mîmes dans un état
d'arrestation. Nous donnâmes l'ordre à M. de la Fayette de faire
garder à vue madame de Tourzel; nous confiâmes à sa garde la
personne du Roi. Il nous dit qu'il ne pouvoit répondre de rien s'il ne
pouvoit mettre des sentinelles jusque dans sa chambre. Il nous fit
sentir la nécessité que l'Assemblée s'expliquât clairement,
positivement à ce sujet. Nous le quittâmes en lui disant que c'étoit
juste, et nous fûmes sur-le-champ à l'Assemblée pour lui rendre un
compte succinct de notre mission.»

Si ce récit, copié sur le manuscrit original, dont nous avons

conservé jusqu'aux fautes de langage et aux fautes d'orthographe,
ne montre pas avec leurs traits réels et dans un jour convenable le
Roi, la Reine et Madame Élisabeth, il a du moins le rare avantage de
donner une idée exacte de ce type prodigieux de l'outrecuidance
révolutionnaire et de la fatuité personnelle qu'on appelle Pétion.
Doué d'une certaine faconde et d'un extérieur assez avenant, cet
avocat de Chartres, regardé par les jeunes stagiaires au présidial de
cette ville comme un argumentateur redoutable, et par les coureurs
de ruelles de la société bourgeoise comme un concurrent dangereux,
avait, au barreau et dans le boudoir, obtenu quelques succès faciles
qui avaient donné à ses prétentions un épanouissement ridicule.
Nommé en 1789 député aux états généraux, il s'y fit remarquer tout
d'abord par l'assurance de son attitude, sa figure agréable,
l'emphase de sa parole, toujours satisfaite d'elle-même et
intarissable en lieux communs politiques. Objet de l'idolâtrie
populaire pendant quelque temps, il eut le fâcheux honneur d'être
associé à Robespierre par la pensée de la multitude, qui décerna à
l'un le titre de vertueux et à l'autre celui d'incorruptible. Pétion se
croyait fait pour charmer et régénérer le monde: jamais fat, dans sa
vanité à faces diverses, ne s'arrogea plus complaisamment l'austérité
du philosophe, le génie du politique et l'ascendant irrésistible du
séducteur. Mais j'oublie que je n'ai pas à le faire connaître: il s'est
peint trait pour trait dans la narration que nous avons mise sous les
yeux du lecteur.
Welcome to our website – the perfect destination for book lovers and
knowledge seekers. We believe that every book holds a new world,
offering opportunities for learning, discovery, and personal growth.
That’s why we are dedicated to bringing you a diverse collection of
books, ranging from classic literature and specialized publications to
self-development guides and children's books.

More than just a book-buying platform, we strive to be a bridge

connecting you with timeless cultural and intellectual values. With an
elegant, user-friendly interface and a smart search system, you can
quickly find the books that best suit your interests. Additionally,
our special promotions and home delivery services help you save time
and fully enjoy the joy of reading.

Join us on a journey of knowledge exploration, passion nurturing, and

personal growth every day!

ebookbell.com