The Road to React The React js in JavaScript

Book 2024 Edition Robin Wieruch pdf download

https://ebookname.com/product/the-road-to-react-the-react-js-in-
javascript-book-2024-edition-robin-wieruch/

Get Instant Ebook Downloads – Browse at https://ebookname.com

Instant digital products (PDF, ePub, MOBI) available
Download now and explore formats that suit you...

Learning JavaScript Design Patterns A JavaScript and

React Developer s Guide 2nd Edition Adnan Osmani

https://ebookname.com/product/learning-javascript-design-
patterns-a-javascript-and-react-developer-s-guide-2nd-edition-
adnan-osmani/

Learning React Functional Web Development with React

and Redux 1st Edition Alex Banks

https://ebookname.com/product/learning-react-functional-web-
development-with-react-and-redux-1st-edition-alex-banks/

Learning React Native Building Native Mobile Apps with

JavaScript 1 (Early Release) Edition Bonnie Eisenman

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

Automating with SIMATIC S7 1500 Configuring Programming

and Testing with STEP 7 Professional 1st Edition Hans
Berger

https://ebookname.com/product/automating-with-
simatic-s7-1500-configuring-programming-and-testing-with-
step-7-professional-1st-edition-hans-berger/
Handbook of Laboratory Animal Bacteriology Second
Edition Axel Kornerup Hansen

https://ebookname.com/product/handbook-of-laboratory-animal-
bacteriology-second-edition-axel-kornerup-hansen-2/

A History of Autism Conversations with the Pioneers 1st

Edition Adam Feinstein

https://ebookname.com/product/a-history-of-autism-conversations-
with-the-pioneers-1st-edition-adam-feinstein/

Programming Embedded Systems With C and GNU Development

Tools 2nd Edition Michael Barr

https://ebookname.com/product/programming-embedded-systems-with-
c-and-gnu-development-tools-2nd-edition-michael-barr/

Groundwater in the Environment An Introduction 1st

Edition Paul L. Younger

https://ebookname.com/product/groundwater-in-the-environment-an-
introduction-1st-edition-paul-l-younger/

Natural Product Biosynthesis by Microorganisms and

Plants Part C 1st Edition David A. Hopwood (Eds.)

https://ebookname.com/product/natural-product-biosynthesis-by-
microorganisms-and-plants-part-c-1st-edition-david-a-hopwood-eds/
Hepatocellular Carcinoma A Practical Approach 1st
Edition Bandar Al Knawy

https://ebookname.com/product/hepatocellular-carcinoma-a-
practical-approach-1st-edition-bandar-al-knawy/
The Road to React
The React.js in JavaScript Book (2024 Edition)

Robin Wieruch
This book is for sale at http://leanpub.com/the-road-to-learn-react

This version was published on 2024-02-05

This is a Leanpub book. Leanpub empowers authors and publishers with the Lean Publishing
process. Lean Publishing is the act of publishing an in-progress ebook using lightweight tools and
many iterations to get reader feedback, pivot until you have the right book and build traction once
you do.

© 2016 - 2024 Robin Wieruch

Tweet This Book!
Please help Robin Wieruch by spreading the word about this book on Twitter!
The suggested tweet for this book is:
I am going to learn #ReactJs with The Road to React by @rwieruch Join me on my journey
https://roadtoreact.com
The suggested hashtag for this book is #ReactJs.
Find out what other people are saying about the book by clicking on this link to search for this
hashtag on Twitter:
#ReactJs
Contents

Foreword . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
About the Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
FAQ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Who is this book for? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
How to read the book? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Fundamentals of React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Hello React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Setting up a React Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Project Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
npm Scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Meet the React Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
React JSX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Lists in React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Meet another React Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
React Component Instantiation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
React DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
React Component Declaration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Handler Function in JSX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
React Props . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
React State . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Callback Handlers in JSX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Lifting State in React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
React Controlled Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Props Handling (Advanced) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
React Side-Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
React Custom Hooks (Advanced) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
React Fragments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Reusable React Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
React Component Composition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Imperative React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Inline Handler in JSX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
React Asynchronous Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
CONTENTS

React Conditional Rendering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116

React Advanced State . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
React Impossible States . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Data Fetching with React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Data Re-Fetching in React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Memoized Functions in React (Advanced) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Explicit Data Fetching with React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
Third-Party Libraries in React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Async/Await in React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Forms in React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151

A Roadmap for React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155

Styling in React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158

CSS in React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
CSS Modules in React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
Styled Components in React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
SVGs in React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179

React Maintenance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182

Performance in React (Advanced) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
TypeScript in React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
Testing in React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
React Project Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238

Real World React (Advanced) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244

Sorting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
Reverse Sort . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
Remember Last Searches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
Paginated Fetch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264

Deploying a React Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274

Build Process . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275
Deploy to Firebase . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276

Outline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279
Foreword
I’ve been a React developer since its inception. When I first encountered it, there was an air of
mystery surrounding it as it distinguished itself from its competitors by emphasizing the exclusive
use of components. Over a decade later, I find myself unable to envision working with any other
framework in the near future. React continues to reinvent itself while pushing other frameworks
around it to evolve too. As a freelance web developer collaborating closely with companies, React
is my indispensable daily companion, enhancing my productivity in every project.
“The Road to React” made its debut in 2016, and since then, I’ve almost rewritten it annually. This
book teaches the core principles of React, guiding you through building a practical application in
pure React without complex tooling. The book covers everything from setting up the project to
deploying it on a server. Each chapter includes additional recommended reading and exercises. By
the end, you’ll have the skills to develop your own React applications.
In “The Road to React,” I establish a solid foundation before delving into the broader React ecosystem.
The book clarifies general concepts, patterns, and best practices for real-world React applications.
Ultimately, you’ll learn to construct a React application from scratch, incorporating features such
as pagination, client-side and server-side searching, and advanced UI interactions like sorting. My
aspiration is that this book conveys my passion for React and JavaScript, helping you embark on
your journey with confidence.
Foreword 2

About the Author

I am a German software and web developer with a passion for learning and teaching JavaScript.
Following the completion of my Master’s Degree in computer science, I immersed myself in the
startup world, extensively using JavaScript both professionally and in my free time. Collaborating
with an exceptional team of engineers in Berlin, we developed large-scale JavaScript applications
which sparked my interest in sharing this knowledge with others.
During this time, I regularly authored articles on web development for my website. Positive feedback
from readers seeking to learn from my articles motivated me to refine my writing and teaching style.
With each article, my ability to effectively educate others continued to grow. Witnessing students
thrive by providing them with clear objectives and quick feedback loops is particularly fulfilling.
Presently, I operate as a self-employed web developer, closely working with companies on their
products. More information about collaborating with me can be found on my website¹.
¹https://www.robinwieruch.de/
Foreword 3

FAQ
How to get updates?
Stay informed about the latest updates through two channels. You can subscribe to email updates²
or follow me on Twitter³. Regardless of the channel you choose, rest assured that I prioritize sharing
only high-quality content. Upon receiving a notification about an update for the book, simply visit
my website to download the latest version of the book.
Is the learning material up-to-date?
Unlike traditional programming books that quickly become outdated, this self-published book allows
for prompt updates whenever new versions of relevant tools or technologies are released. Rest
assured, you’ll always have access to the latest information.
Can I get a digital copy of the book if I’ve purchased it on Amazon?
If you’ve purchased the book on Amazon, you might have noticed it’s also available on my website.
Since I use Amazon as one way to generate revenue for my frequently free content, I genuinely
appreciate your support and I encourage you to sign up for my courses⁴. Once you’ve created an
account, send me an email detailing your Amazon purchase. This will enable me to unlock the
content for you. By having an account on my platform, you’ll always enjoy access to the most
up-to-date version of the book. Thank you for your support!
Why is the print version so large?
If you’ve acquired the print version of the book, consider making notes directly in its pages. The
deliberate choice to keep the printed book extra-large was made to provide ample space for extensive
code snippets and to afford you sufficient room for your annotations and personal notes. This size
decision was crafted with the intention of enhancing your overall reading and learning experience.
Why does the book not have many pages?
The print version’s larger dimensions contribute to fewer pages. While most sections are concise,
detailed material is available online for in-depth insights. This allows a smooth reading experience,
with essential React concepts covered in the book for a quick start. Engaging in optional exercises
is encouraged for a comprehensive understanding.
Why is the book written like a long read tutorial?
The unconventional manner in which this book is written and structured might come as a surprise to
those more accustomed to the conventional format of programming texts. When I first started coding,
there was a scarcity of practical, hands-on resources available. As a learner, I found great value
in materials that provided step-by-step instructions, guiding me through not only the ‘what’ and
‘how’ but also the ‘why’ behind each concept. With the goal of replicating this immersive learning
²https://rwieruch.substack.com/
³https://twitter.com/rwieruch
⁴https://courses.robinwieruch.de/
Foreword 4

experience, I’ve taken on the task of self-publishing, hoping to extend this valuable knowledge-
sharing opportunity to fellow developers within our community.
What do I do if I encounter a bug?
Should you come across any bugs in the code, locate the current GitHub project URL at the end of
each section. Feel free to open a GitHub issue there, and your assistance will be highly valued!
Foreword 5

Who is this book for?

JavaScript Beginners
JavaScript beginners with knowledge in fundamental JS, CSS, and HTML: If you just started out
with web development, and have a basic grasp of JS, CSS, and HTML, this book should give you
everything that’s needed to learn React. However, if you feel there is a gap in your JavaScript
knowledge, don’t hesitate to read up on that topic before continuing with the book. You will have
lots of references to fundamental JavaScript knowledge in this book though.
JavaScript Veterans
JavaScript veterans coming from jQuery: If you have used JavaScript with jQuery, MooTools, and
Dojo extensively back in the days, the new JavaScript era may seem overwhelming for someone
getting back on track with it. However, most of the fundamental knowledge didn’t change, it’s still
JavaScript and HTML under the hood, so this book should give you the right start into React.
JavaScript Enthusiasts
JavaScript enthusiasts with knowledge in other modern SPA frameworks: If you are coming from
Angular or Vue, there may be lots of differences in how to write applications with React, however,
all these frameworks share the same fundamentals of JavaScript and HTML. After a mindset shift
to get comfortable with React, you should be doing just fine adopting React.
Non-JavaScript Developers
If you are coming from another programming language, you should be more familiar than others
with the different aspects of programming. After picking up the fundamentals of JavaScript and
HTML, you should have a good time learning React with me.
Designers and UI/UX Enthusiasts
If your main profession is in design, user interaction, or user experience, don’t hesitate to pick up this
book. You may be already quite familiar with HTML and CSS which is a plus. After going through
some more JavaScript fundamentals, you should be good to get through this book. These days UI/UX
is moving closer to the implementation details which are often taken care of with React. It would be
your perfect asset to know how things work in code.
Team Leads, Product Owners, or Product Managers
If you are a team lead, product owner or product manager of your development department, this
book should give you a good breakdown of all the essential parts of a React application. Every
section explains one React concept/pattern/technique to add another feature or to improve the
overall architecture. It’s a well-rounded reference guide for React.
Foreword 6

How to read the book?

Most programming books are high-level and go into very much technical detail, but they lack the
ability to get their readers into coding. That’s why this book may be different from the books that
you are used to reading in this domain, because it attempts to teach aspiring developers actual
programming. Hence I try to keep a good balance between being pragmatic, by giving you all the
tools to get the job done, while still being detail-oriented, by giving you as much information as
needed to understand these tools and how they are used in practice.
Every section in this book introduces you to a new topic. For the fast pace learners who do not want
to go into much detail, it’s possible to read from section to section. However, if learners want to dive
deeper into certain topics, they can read more by following the footnotes. I want to offer you a way
to get a great overview of the topic at hand while still enabling you to dig deeper if you want to.
After reading the book either way, you should be able to code what you have learned in a pragmatic
way.
Take Notes
If you have a print version of the book, do not hesitate to underline paragraphs, to write notes, or
to annotate code snippets. That’s why it has such a large size in the first place. If you don’t have a
print version, keep a notebook on the side for your learnings. Taking notes fortifies what you have
learned and you can always come back to them. With every new learning, you will get a better
understanding of the big picture and how the smaller pieces fit together, so it’s a great exercise on
the side to write down your learnings on a piece of paper.
Code Code Code
Every section introduces you to a new topic in a pragmatic way. For this reason just reading through
the section does not suffice to become a developer, because there is lots of things going on in one
section alone. So you shouldn’t rush from section to section, but instead I recommend you to have
a computer by your side which allows you to code along the way.
Do not just copy paste code, instead type it yourself. Do not be satisfied when you just used the
code from the book, instead experiment with it. See what breaks the code and how to fix it. See how
certain changes affect the result. And see how you can extend or even improve the code by adding
a few lines to it. That’s what coding is all about after all. It does not help you to rush through the
book if you haven’t written a line of code once. So get your hands dirty and do more coding than
reading!
Anticipate
There will be many coding problems presented in this book. Often I will give you the option to solve
things yourself before reading about the solution in the next paragraph or code snippet. However,
it breaks the flow of repeating myself, so I keep these encouragements to a minimum. Instead I am
hoping for your eagerness here to jump ahead. Try to solve things before I get the chance to present
you the solution. Only by trying, failing, and solving a problem you will become a better developer.
Take Breaks
Foreword 7

Since every section introduces you to a new topic, it happens fast that you forget the learnings from
the previous section. In addition to coding along with every section, I recommend you to take breaks
between the sections which allow the learnings to sink in. Read the section, code along the way, do
the exercise afterwards, code even a bit more if you like, and then rest. Think about your learnings
while taking a walk outside or speak with someone about what you have learned even though this
other person is not into coding. After all, taking breaks is always essential if you want to learn
something new.
Fundamentals of React
In the initial phase of this learning journey, we’ll delve into the essential foundations of React,
guiding you through the creation of your first React project. As we progress, we’ll expand our
exploration of React’s capabilities, implementing practical features such as client and server-side
searching, remote data fetching, and advanced state management. This hands-on approach mirrors
the development of a real-world web application. By the end, you’ll have a fully functional React
application seamlessly interacting with real-world data.
Fundamentals of React 9

Hello React
Single-page applications (SPA⁵) have become increasingly popular with first-generation SPA frame-
works like Angular (by Google), Ember, Knockout, and Backbone. Using these frameworks made
it easier to build web applications that advanced beyond vanilla JavaScript and jQuery. React,
introduced by Facebook in 2013, is another solution for SPAs, offering yet another powerful
framework for building modern web applications in JavaScript.
Let’s take a trip back in time before the advent of SPAs: In the past, websites and web applications
were server-rendered. When a user accessed a URL in a browser, a request was made to a web
server, fetching one HTML file along with its associated HTML, CSS, and JavaScript files. After some
network delay, the user would see the rendered HTML in the browser and could begin interacting
with it. Each subsequent page transition would trigger this sequence of events again. In this earlier
version, the server handled most essential tasks, while the client’s role was minimal, primarily
focused on rendering pages. Basic HTML and CSS structured and styled the application, with a touch
of JavaScript, often in the form of the popular library jQuery, to enable interactions (e.g. toggling a
dropdown) or advanced styling (e.g. positioning a tooltip).
In contrast, SPA frameworks shifted the focus from the server to the client. In the world of SPAs, the
server primarily delivers JavaScript over the network, accompanied by a minimal HTML file. The
HTML file then executes the linked JavaScript files on the client-side (browser) to render the entire
application using HTML (and CSS), while still relying on JavaScript for interactions. In its most
extreme manifestation, a user visiting a URL requests a small HTML file and a larger JavaScript file.
Following a network and rendering delay, the user sees the HTML rendered by JavaScript in the
browser. Subsequent page transitions do not necessitate additional file requests from the web server
but instead utilize the initially requested JavaScript to render new pages.
React, along with other SPA solutions, played a pivotal role in making this transformation possible.
Essentially, a SPA is a single, organized bundle of JavaScript, neatly structured into folders and files,
creating an entire application. The SPA framework, such as React, provides the necessary tools to
architect this JavaScript-focused application. When a user visits the URL for your web application,
this JavaScript-centric application is delivered once over the network to their browser. Subsequently,
React or any other SPA framework takes charge of rendering everything in the browser as HTML
and managing user interactions with JavaScript.
With the ascent of React, the concept of components gained popularity. Each component defines its
visual and functional aspects using HTML, CSS, and JavaScript. Once a component is established, it
can be integrated into a hierarchy of components to construct a complete application. While React
primarily focuses on components as a library, its adaptable ecosystem positions it as a flexible
framework. Featuring a streamlined API, a flourishing yet stable ecosystem, and a supportive
community, React is ready to welcome you with open arms! :-)
⁵https://bit.ly/3BZOL1o
Fundamentals of React 10

Exercises
• Read more about Websites and Web Applications⁶.
• Watch React.js: The Documentary⁷.
• Read more about JavaScript fundamentals needed for React⁸.
• Optionally, if you need a motivational boost:
– Read more about how to learn a framework⁹.
– Read more about how to learn React¹⁰.
• Optional: Leave feedback for this section¹¹.

⁶https://www.robinwieruch.de/web-applications/
⁷https://bit.ly/3xrvxkI
⁸https://www.robinwieruch.de/javascript-fundamentals-react-requirements/
⁹https://www.robinwieruch.de/how-to-learn-framework/
¹⁰https://www.robinwieruch.de/learn-react-js/
¹¹https://forms.gle/NTqhvyDaP1RjtanC6
Fundamentals of React 11

Requirements
To navigate through this book, it’s essential to have a foundational understanding of web develop-
ment, encompassing HTML, CSS, and JavaScript. Familiarity with APIs¹² is beneficial, as they will
be discussed later. Additionally, you’ll require the following coding tools to follow along with the
book, complementing these skills.

Editor and Terminal

For this learning experience, you will need an editor (e.g. Sublime Text) and a command line tool
(e.g. iTerm). As an alternative, I recommend using an IDE, for example Visual Studio Code (also
called VSCode), for beginners, as it’s an all-in-one solution that provides an advanced editor with
an integrated command line tool, and because it is the most popular choice among web developers.
I have provided a setup guide¹³ to get you started with general web development. It comes with all
the details and I keep it separate from the book, because it offers options for Windows and MacOS
users.
If you don’t want to set up the editor/terminal combination or IDE on your local machine,
CodeSandbox¹⁴, an online editor, is also a viable alternative. While CodeSandbox is a great tool
for sharing code online, a local machine setup is a better tool for learning the different ways to
create a web application. Also, if you want to develop applications professionally, a local setup will
be required.
Throughout this learning experience, I will use the term command line, which will be used
synonymously for the terms command line tool, terminal, and integrated terminal. The same applies
to the terms editor, text editor, and IDE, depending on what you decided to use for your setup.
Optionally, I recommend managing projects on GitHub while we conduct the exercises in this book,
and I’ve provided a short guide¹⁵ on how to use these tools. Github has excellent version control,
so you can see what changes were made if you make a mistake or just want a more direct way to
follow along. It’s also a great way to share your code later with other people.

Node and NPM

Before we can begin, we’ll need to have Node and NPM¹⁶ installed. Both are used to manage libraries
(node packages) that you will need along the way. These node packages can be libraries or whole
frameworks. We’ll install external node packages via npm (node package manager).
You can verify node and npm versions on the command line using the node --version and npm --
version commands. If you don’t receive output in the terminal indicating which version is installed,
you need to install node and npm:
¹²https://www.robinwieruch.de/what-is-an-api-javascript/
¹³https://www.robinwieruch.de/developer-setup/
¹⁴https://codesandbox.io
¹⁵https://www.robinwieruch.de/git-essential-commands/
¹⁶https://nodejs.org/en/
Fundamentals of React 12

Command Line

node --version
*vXX.YY.ZZ
npm --version
*vXX.YY.ZZ

If you have already installed Node and npm, make sure that your installation is the most recent
version. If you’re new to npm or need a refresher, this npm crash course¹⁷ I created will get you up
to speed.

Exercises:
• Optional: Read more about yarn¹⁸ and pnpm¹⁹. Both can be used as a replacement for npm.
However, I do not recommend using them as a beginner. This exercise should only make sure
that you know about the alternatives.

¹⁷https://www.robinwieruch.de/npm-crash-course/
¹⁸https://yarnpkg.com/
¹⁹https://pnpm.io/
Fundamentals of React 13

Setting up a React Project

In the Road to React, we’ll use Vite²⁰ to set up our React application. Vite, a french word which
translates to “quick”, is a modern build tool for status quo web frameworks (e.g. React) which comes
with sensible defaults (read: configuration) while staying highly extensible for specific use cases
(e.g. SVGs, Linting, TypeScript). The essential core of Vite is a development server, which allows
you to start your React application on your local machine (read: development environment), and a
bundler, which outputs highly optimized files for a production-ready deployment (read: production
environment). What matters for a React beginner here: getting started with React by just learning
React while not getting distracted by any tooling around it. Therefore Vite is the perfect partner for
learning React.
There are two ways to create your project with Vite. First, choosing an online template²¹, either
React (recommended for this book) or React TypeScript (advanced, which means you implement
the types for TypeScript yourself) for working on your project online without a local setup. Second,
which is the way I would recommend, is creating a React project with Vite on your local machine
for working on it in your local IDE (e.g. VSCode).
Since the online template works out of the box, we will focus on the setup for your local machine
in this section (recommended). In a previous section, you have installed Node and npm. The latter
enables you to install third-party dependencies (read: libraries, frameworks, etc.) from the command
line. So open up your command line tool and move to a folder where you want to create your React
project. As a crash course for navigating on the command line:

• use pwd (on Windows: cd) to display the current folder

• use ls (on Windows: dir) to display all folders and files in the current folder
• use mkdir <folder_name> to create a folder
• use cd <folder_name> to move into a folder
• use cd .. to move outside of a folder

After navigating into a folder where you want to create your React project, type the following
command. We’ll refer to this project as hacker-stories, but you may choose any project name you
like:
Command Line

npm create vite@latest hacker-stories -- --template react

Optionally you can also go with a React + TypeScript project if you feel confident (check Vite’s
installation website to follow their instructions for a React + TypeScript project). The book comes
with a TypeScript section later, however, it will not do any hand-holding throughout the sections for
²⁰https://bit.ly/3BsG1TH
²¹https://bit.ly/3RPAZWz
Fundamentals of React 14

transforming JavaScript into TypeScript. Only at the end of each section you will find an alternative
TypeScript implementation.
Next, follow the instructions given on the command line for navigating into the folder, installing all
the third-party dependencies of the project, and running it locally on your machine:
Command Line

cd hacker-stories
npm install
npm run dev

The command line should output a URL where you can find your project running in the browser.
Open up the browser with the given URL and verify that you can see the React project running there.
We will continue developing this project in the next sections, however, for the rest of this section,
we will go through explaining the project structure and the scripts (e.g. npm run dev).
Fundamentals of React 15

Project Structure
First, let’s open the application in an editor/IDE. For VSCode, you can simply type code . on the
command line. The following folder structure, or a variation of it depending on the Vite version,
should be presented:
Project Structure

hacker-stories/
--node_modules/
--public/
----vite.svg
--src/
----assets/
------react.svg
----App.css
----App.jsx
----index.css
----main.jsx
--.eslintrc.cjs
--.gitignore
--index.html
--package-lock.json
--package.json
--README.md
--vite.config.js

This is a breakdown of the most important folders and files:

• package.json: This file shows you a list of all third-party dependencies (read: node packages
which are located in the node_modules/ folder) and other essential project configurations
related to Node/npm.
• package-lock.json: This file indicates npm how to break down (read: resolve) all node package
versions and their internal third-party dependencies. We’ll not touch this file.
• node_modules/: This folder contains all node packages that have been installed. Since we
used Vite to create our React application, there are various node modules (e.g. React) already
installed for us. We’ll not touch this folder.
• .gitignore: This file indicates all folders and files that shouldn’t be added to your git repository
when using git, as such files and folders should be located only on your local machine. The
node_modules/ folder is one example. It is enough to share the package.json and package-
lock.json files with other developers in the team, so they can install dependencies on their end
with npm install without having to share the entire node_modules/ folder with everybody.
Fundamentals of React 16

• vite.config.js: A file to configure Vite. If you open it, you should see Vite’s React plugin
showing up there. If you would be running Vite with another web framework, the other
framework’s Vite plugin would show up. In the end, there are many more things that can
optionally be set up here.
• public/: This folder holds static assets for the project like a favicon²² which is used for the
browser tab’s thumbnail when starting the development server or building the project for
production.
• index.html: The HTML that is displayed in the browser when starting the project. If you open
it, you shouldn’t see much content though. However, you should see a script tag which links
to your source folder where all the React code is located to output HTML/CSS in the browser.

In the beginning, everything you need is located in the src/ folder. The main focus lies on the
src/App.jsx file which is used to implement React components. It will be used to implement your
application, but later you might want to split up your React components into multiple files, where
each file maintains one or more components on its own. We will arrive at this point eventually.
Additionally, you will find a src/main.jsx as an entry point to the React world. You will get to know
this file in later sections. There is also a src/index.css and a src/App.css file to style your overall
application and components, which comes with the default style when you open them. You will
modify them later as well.
²²https://bit.ly/3QvRupG
Fundamentals of React 17

npm Scripts
After you have learned about the folder and file structure of your React project, let’s go through
the available commands. All your project-specific commands can be found in your package.json file
under the scripts property. They may look similar to these depending on your Vite version:
package.json

"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"

These scripts are executed with the npm run <script> command in an IDE-integrated terminal or
your standalone command line tool. The commands are as follows:
Command Line

# Runs the application locally for the browser

npm run dev

# Lint the application locally for code style errors

npm run lint

# Builds the application for production

npm run build

Another command from the previous npm scripts called preview can be used to run the production-
ready build on your local machine for testing purposes. In order to make it work, you have to execute
npm run build before running npm run preview. Essentially npm run dev and npm run preview (after
npm run build) should give the identical output in the browser. However, the former is not optimized
for production and should exclusively be used for the local development of the application.

Exercises:
• Read more about Vite²³.
• Exercise npm scripts:
– Start your React application with npm run dev on the command line and check it out in
the browser.
* Exit the command on the command line by pressing Control + C.
²³https://bit.ly/3BsG1TH
Fundamentals of React 18

– Run the npm run build script and verify that a dist/ folder was added to your project.
Note that the build folder can be used later on to deploy your application. Afterward, run
npm run preview to see the production-ready application in the browser.
• Every time we change something in our source code throughout the coming sections, make
sure to check the output in your browser for getting visual feedback. Use npm run dev to keep
your application running.
• Optional: If you use git and GitHub, add and commit your changes after every section of the
book.
• Optional: Leave feedback for this section²⁴.

²⁴https://forms.gle/bvH2jcppsSA6p9i16
Fundamentals of React 19

Meet the React Component

Every React application is built on the foundation of React components. In this section, you will
get to know your first React component which is located in the src/App.jsx file and which should
look similar to the example below. Depending on your Vite version, the content of the file might
differ slightly:
src/App.jsx

import { useState } from 'react';

import reactLogo from './assets/react.svg';
import viteLogo from '/vite.svg';
import './App.css';

function App() {
const [count, setCount] = useState(0);

return (
<>
<div>
<a href="https://vitejs.dev" target="_blank" rel="noreferrer">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank" rel="noreferrer">
<img
src={reactLogo}
className="logo react"
alt="React logo"
/>
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/App.jsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
Fundamentals of React 20

</>
);
}

export default App;

This file will be our focus throughout this book, unless otherwise specified. Even though this file
will grow in size, because we are not splitting it up from the beginning into multiple files, it will
be simpler to understand as a beginner, because everything is at one place. Once you get more
comfortable with React, I will show you how to split your React project with your components into
multiple files.
Let’s start by reducing this React component to a more lightweight version for getting you started
without too much distracting boilerplate code²⁵:
src/App.jsx
function App() {
return (
<div>
<h1>Hello React</h1>
</div>
);
}

export default App;

Optionally I recommend making the src/index.css and src/App.css files blank for starting from a
clean slate style-wise. Next, start your application with npm run dev on the command line and check
what’s displayed in the browser. You should see the headline “Hello React” showing up. Before we
dive deeper into each topic, here comes a quick overview of what’s in your code and what we will
cover more in-depth in the following sections:

• First, this React component, specifically called App component, is just a JavaScript function.
In contrast to traditional JavaScript functions, it’s defined in PascalCase²⁶. A component has
to start with a capital letter, otherwise it isn’t treated as a component in React. The kind of
the App component is commonly called a function component. Function components are the
modern way of using components in React, however, be aware that there are other variations
of React components (see component types in a later section) too.
• Second, the App component doesn’t have any parameters in its function signature yet. In
the upcoming sections, you will learn how to pass information (see props in a later section)
from one component to another component. These props will be accessible via the function’s
signature as parameters then.
²⁵https://bit.ly/3lZzckS
²⁶https://www.robinwieruch.de/javascript-naming-conventions/
 Another Random Document on
Scribd Without Any Related Topics
"Major Barbara" is of still greater social importance, inasmuch as it
points to the fact that while charity and religion are supposed to
minister to the poor, both institutions derive their main revenue from
the poor by the perpetuation of the evils both pretend to fight.

Major Barbara, the daughter of the world renowned cannon

manufacturer Undershaft, has joined the Salvation Army. The latter
lays claim to being the most humane religious institution, because—
unlike other soul savers—it does not entirely forget the needs of the
body. It also teaches that the greater the sinner the more glorious
the saving. But as no one is quite as black as he is painted, it
becomes necessary for those who want to be saved, and incidentally
to profit by the Salvation Army, to invent sins—the blacker the better.

Rummy. What am I to do? I can't starve. Them Salvation lasses

is dear girls; but the better you are the worse they likes to think
you were before they rescued you. Why shouldn't they 'av' a bit
o' credit, poor loves? They're worn to rags by their work. And
where would they get the money to rescue us if we was to let
on we're no worse than other people? You know what ladies
and gentlemen are.

Price. Thievin' swine!... We're companions in misfortune,

Rummy....

Rummy. Who saved you, Mr. Price? Was it Major Barbara?

Price. No: I come here on my own. I'm goin' to be Bronterre

O'Brien Price, the converted painter. I know wot they like. I'll tell
'em how I blasphemed and gambled and wopped my poor old
mother—

Rummy. Used you to beat your mother?

 Price. Not likely. She used to beat me. No matter: you come and
listen to the converted painter, and you'll hear how she was a
pious woman that taught me me prayers at 'er knee, an' how I
used to come home drunk and drag her out o' bed be 'er snow-
white 'airs, and lam into 'er with the poker.

Rummy. That's what's so unfair to us women. Your confessions

is just as big lies as ours: you don't tell what you really done no
more than us; but you men can tell your lies right out at the
meetin's and be made much of for it; while the sort o'
confessions we az to make 'as to be whispered to one lady at a
time. It ain't right, spite of all their piety.

Price. Right! Do you suppose the Army'd be allowed if it went

and did right? Not much. It combs our 'air and makes us good
little blokes to be robbed and put upon. But I'll play the game as
good as any of 'em. I'll see somebody struck by lightnin', or
hear a voice sayin', "Snobby Price: where will you spend
eternity?" I'll 'ave a time of it, I tell you.

It is inevitable that the Salvation Army, like all other religious and
charitable institutions, should by its very character foster cowardice
and hypocrisy as a premium securing entry into heaven.

Major Barbara, being a novice, is as ignorant of this as she is

unaware of the source of the money which sustains her and the
work of the Salvation Army. She consistently refuses to accept the
"conscience sovereign" of Bill Walker for beating up a Salvation
lassie. Not so Mrs. Baines, the Army Commissioner. She is dyed in
the wool in the profession of begging and will take money from the
devil himself "for the Glory of God,"—the Glory of God which
consists in "taking out the anger and bitterness against the rich from
the hearts of the poor," a service "gratifying and convenient for all
large employers." No wonder the whisky distiller Bodger makes the
generous contribution of 5000 pounds and Undershaft adds his own
little mite of another 5000.

Barbara is indeed ignorant or she would not protest against a fact so

notorious:

Barbara. Do you know what my father is? Have you forgotten

that Lord Saxmundham is Bodger the whisky man? Do you
remember how we implored the County Council to stop him
from writing Bodger's Whisky in letters of fire against the sky;
so that the poor drink-ruined creatures on the embankment
could not wake up from their snatches of sleep without being
reminded of their deadly thirst by that wicked sky sign? Do you
know that the worst thing that I have had to fight here is not
the devil, but Bodger, Bodger, Bodger with his whisky, his
distilleries, and his tied houses? Are you going to make our
shelter another tied house for him, and ask me to keep it?

Undershaft. My dear Barbara: alcohol is a very necessary article.

It heals the sick— ... It assists the doctor: that is perhaps a less
questionable way of putting it. It makes life bearable to millions
of people who could not endure their existence if they were
quite sober. It enables Parliament to do things at eleven at night
that no sane person would do at eleven in the morning.

Mrs. Baines. Barbara: Lord Saxmundham gives us the money to

stop drinking—to take his own business from him.

Undershaft. I also, Mrs. Baines, may claim a little

disinterestedness. Think of my business! think of the widows
and orphans! the men and lads torn to pieces with shrapnel and
poisoned with lyddite! the oceans of blood, not one drop of
which is shed in a really just cause! the ravaged crops! the
peaceful peasants forced, women and men, to till their fields
under the fire of opposing armies on pain of starvation! the bad
 blood of the fierce cowards at home who egg on others to fight
for the gratification of national vanity! All this makes money for
me: I am never richer, never busier than when the papers are
full of it. Well, it is your work to preach peace on earth and
good will to men. Every convert you make is a vote against war.
Yet I give you this money to hasten my own commercial ruin.

Barbara. Drunkenness and Murder! My God, why hast thou

forsaked me?

However, Barbara's indignation does not last very long, any more
than that of her aristocratic mother, Lady Britomart, who has no use
for her plebeian husband except when she needs his money.
Similarly Stephen, her son, has become converted, like Barbara, not
to the Glory Hallelujah of the Salvation Army but to the power of
money and cannon. Likewise the rest of the family, including the
Greek Scholar Cusins, Barbara's suitor.

During the visit to their father's factory the Undershaft family makes
several discoveries. They learn that the best modern method of
accumulating a large fortune consists in organizing industries in such
a manner as to make the workers content with their slavery. It's a
model factory.

Undershaft. It is a spotlessly clean and beautiful hillside town.

There are two chapels: a Primitive one and a sophisticated one.
There's even an ethical society; but it is not much patronized, as
my men are all strongly religious. In the high explosives sheds
they object to the presence of agnostics as unsafe.

The family further learns that it is not high moral precepts, patriotic
love of country, or similar sentiments that are the backbone of the
life of the nation. It is Undershaft again who enlightens them of the
power of money and its rôle in dictating governmental policies,
making war or peace, and shaping the destinies of man.
 Undershaft. The government of your country. I am the
government of your country: I, and Lazarus. Do you suppose
that you and a half a dozen amateurs like you, sitting in a row
in that foolish gabble shop, can govern Undershaft and Lazarus?
No, my friend: you will do what pays us. You will make war
when it suits us, and keep peace when it doesn't. You will find
out that trade requires certain measures when we have decided
on those measures. When I want anything to keep my dividends
up, you will discover that my want is a national need. When
either people want something to keep my dividends down, you
will call out the police and military. And in return you shall have
the support and applause of my newspapers, and the delight of
imagining that you are a great statesman. Government of your
country! Be off with you, my boy, and play with your caucuses
and leading articles and historic parties and great leaders and
burning questions and the rest of your toys. I am going back to
my counting house to pay the piper and call the tune.... To give
arms to all men who offer an honest price for them, without
respect of persons or principles: to Aristocrat and Republican, to
Nihilist and Tsar, to Capitalist and Socialist, to Protestant and
Catholic, to burglar and policeman, to black man, white man,
and yellow man, to all sorts and conditions, all nationalities, all
faiths, all follies, all causes and all crimes.... I will take an order
from a good man as cheerfully as from a bad one. If you good
people prefer preaching and shirking to buying my weapons and
fighting the rascals, don't blame me. I can make cannons: I
cannot make courage and conviction.

That is just it. The Undershafts cannot make conviction and courage;
yet both are indispensable if one is to see that, in the words of
Undershaft:

"Cleanliness and respectability do not need justification: they

justify themselves. There are millions of poor people, abject
 people, dirty people, ill fed, ill clothed people. They poison us
morally and physically: they kill the happiness of society: they
force us to do away with our own liberties and to organize
unnatural cruelties for fear they should rise against us and drag
us down into their abyss. Only fools fear crime: we all fear
poverty. I had rather be a thief than a pauper. I had rather be a
murderer than a slave, I don't want to be either; but if you force
the alternative on me, then, by Heaven, I'll choose the braver
and more moral one. I hate poverty and slavery worse than any
other crimes whatsoever."

Cusins, the scientist, realizes the force of Undershaft's argument.

Long enough have the people been preached at, and intellectual
power used to enslave them.

Cusins. As a teacher of Greek I gave the intellectual man

weapons against the common man. I now want to give the
common man weapons against the intellectual man. I love the
common people. I want to arm them against the lawyer, the
doctor, the priest, the literary man, the professor, the artist, and
the politician, who, once in authority, are the most dangerous,
disastrous, and tyrannical of all the fools, rascals, and
impostors.

This thought is perhaps the most revolutionary sentiment in the

whole play, in view of the fact that the people everywhere are
enslaved by the awe of the lawyer, the professor, and the politician,
even more than by the club and gun. It is the lawyer and the
politician who poison the people with "the germ of briefs and
politics," thereby unfitting them for the only effective course in the
great social struggle—action, resultant from the realization that
poverty and inequality never have been, never can be, preached or
voted out of existence.
 Undershaft. Poverty and slavery have stood up for centuries to
your sermons and leading articles: they will not stand up to my
machine guns. Don't preach at them; don't reason with them.
Kill them.

Barbara. Killing. Is that your remedy for everything?

Undershaft. It is the final test of conviction, the only lever

strong enough to overturn a social system, the only way of
saying Must. Let six hundred and seventy fools loose in the
street; and three policemen can scatter them. But huddle them
together in a certain house in Westminster; and let them go
through certain ceremonies and call themselves certain names
until at last they get the courage to kill; and your six hundred
and seventy fools become a government. Your pious mob fills
up ballot papers and imagines it is governing its masters; but
the ballot paper that really governs is the paper that has a bullet
wrapped up in it.... Vote! Bah! When you vote you only change
the names of the cabinet. When you shoot, you pull down
governments, inaugurate new epochs, abolish old orders and
set up new. Is that historically true, Mr. Learned Man, or is it
not?

Cusins. It is historically true. I loathe having to admit it. I

repudiate your sentiments. I abhor your nature. I defy you in
every possible way. Still, it is true. But it ought not to be true.

Undershaft. Ought, ought, ought, ought, ought! Are you going

to spend your life saying ought, like the rest of our moralists?
Turn your oughts into shells, man. Come and make explosives
with me. The history of the world is the history of those who
had the courage to embrace this truth.

"Major Barbara" is one of the most revolutionary plays. In any other

but dramatic form the sentiments uttered therein would have
condemned the author to long imprisonment for inciting to sedition
and violence.

Shaw the Fabian would be the first to repudiate such utterances as

rank Anarchy, "impractical, brain cracked and criminal." But Shaw
the dramatist is closer to life—closer to reality, closer to the historic
truth that the people wrest only as much liberty as they have the
intelligence to want and the courage to take.
 JOHN GALSWORTHY
The power of the modern drama as an interpreter of the pressing
questions of our time is perhaps nowhere evident as clearly as it is in
England to-day.

Indeed, while other countries have come almost to a standstill in

dramatic art, England is the most productive at the present time.
Nor can it be said that quantity has been achieved at the expense of
quality, which is only too often the case.

The most prolific English dramatist, John Galsworthy, is at the same

time a great artist whose dramatic quality can be compared with
that of only one other living writer, namely, Gerhart Hauptmann.
Galsworthy, even as Hauptmann, is neither a propagandist nor a
moralist. His background is life, "that palpitating life," which is the
root of all sorrow and joy.

His attitude toward dramatic art is given in the following words:

"I look upon the stage as the great beacon light of civilization, but
the drama should lead the social thought of the time and not direct
or dictate it.

"The great duty of the dramatist is to present life as it really is. A

true story, if told sincerely, is the strongest moral argument that can
be put on the stage. It is the business of the dramatist so to present
the characters in his picture of life that the inherent moral is brought
to light without any lecturing on his part.

"Moral codes in themselves are, after all, not lasting, but a true
picture of life is. A man may preach a strong lesson in a play which
may exist for a day, but if he succeeds in presenting real life itself in
such a manner as to carry with it a certain moral inspiration, the
force of the message need never be lost, for a new interpretation to
fit the spirit of the time can renew its vigor and power."

John Galsworthy has undoubtedly succeeded in presenting real life.

It is this that makes him so thoroughly human and universal.

STRIFE

Not since Hauptmann's "Weavers" was placed before the thoughtful

public, has there appeared anything more stirring than "Strife."

Its theme is a strike in the Trenartha Tin Plate Works, on the borders
of England and Wales. The play largely centers about the two
dominant figures: John Anthony, the President of the Company,
rigid, autocratic and uncompromising; he is unwilling to make the
slightest concession, although the men have been out for six months
and are in a condition of semi-starvation. On the other hand there is
David Roberts, an uncompromising revolutionist, whose devotion to
the workers and the cause of freedom is at red-white heat. Between
them are the strikers, worn and weary with the terrible struggle,
driven and tortured by the awful sight of poverty at home.

At a directors' meeting, attended by the Company's representatives

from London, Edgar Anthony, the President's son and a man of
kindly feeling, pleads in behalf of the strikers.

Edgar. I don't see how we can get over it that to go on like this
means starvation to the men's wives and families ... It won't kill
the shareholders to miss a dividend or two; I don't see that
that's reason enough for knuckling under.
 Wilder. H'm! Shouldn't be a bit surprised if that brute Roberts
hadn't got us down here with the very same idea. I hate a man
with a grievance.

Edgar. We didn't pay him enough for his discovery. I always said
that at the time.

Wilder. We paid him five hundred and a bonus of two hundred

three years later. If that's not enough! What does he want, for
goodness' sake?

Tench. Company made a hundred thousand out of his brains,

and paid him seven hundred—that's the way he goes on, sir.

Wilder. The man's a rank agitator! Look here, I hate the Unions.
But now we've got Harness here let's get him to settle the
whole thing.

Harness, the trade union official, speaks in favor of compromise. In

the beginning of the strike the union had withdrawn its support,
because the workers had used their own judgment in deciding to
strike.

Harness. I'm quite frank with you. We were forced to withhold

our support from your men because some of their demands are
in excess of current rates. I expect to make them withdraw
those demands to-day.... Now, I want to see something fixed
upon before I go back tonight. Can't we have done with this
old-fashioned tug-of-war business? What good's it doing you?
Why don't you recognize once for all that these people are men
like yourselves, and want what's good for them just as you want
what's good for you.... There's just one very simple question I'd
like to put to you. Will you pay your men one penny more than
they force you to pay them?
Of course not. With trade unionism lacking in true solidarity, and the
workers not conscious of their power, why should the Company pay
one penny more? David Roberts is the only one who fully
understands the situation.

Roberts. Justice from London? What are you talking about,

Henry Thomas? Have you gone silly? We know very well what
we are—discontented dogs—never satisfied. What did the
Chairman tell me up in London? That I didn't know what I was
talking about. I was a foolish, uneducated man, that knew
nothing of the wants of the men I spoke for.... I have this to say
—and first as to their condition.... Ye can't squeeze them any
more. Every man of us is well nigh starving. Ye wonder why I
tell ye that? Every man of us is going short. We can't be no
worse off than we've been these weeks past. Ye needn't think
that by waiting ye'll drive us to come in. We'll die first, the
whole lot of us. The men have sent for ye to know, once and for
all, whether ye are going to grant them their demands.... Ye
know best whether ye can afford your tyranny—but this I tell
ye: If ye think the men will give way the least part of an inch,
ye're making the worst mistake ye ever made. Ye think because
the Union is not supporting us—more shame to it!—that we'll be
coming on our knees to you one fine morning. Ye think because
the men have got their wives an' families to think of—that it's
just a question of a week or two—

The appalling state of the strikers is demonstrated by the women:

Anna Roberts, sick with heart trouble and slowly dying for want of
warmth and nourishment; Mrs. Rous, so accustomed to privation
that her present poverty seems easy compared with the misery of
her whole life.

Into this dismal environment comes Enid, the President's daughter,

with delicacies and jams for Annie. Like many women of her station
she imagines that a little sympathy will bridge the chasm between
the classes, or as her father says, "You think with your gloved hands
you can cure the troubles of the century."

Enid does not know the life of Annie Roberts' class: that it is all a
gamble from the "time 'e's born to the time 'e dies."

Mrs. Roberts. Roberts says workin' folk have always lived from
hand to mouth. Sixpence to-day is worth more than a shillin' to-
morrow, that's what they say.... He says that when a working
man's baby is born, it's a toss-up from breath to breath whether
it ever draws another, and so on all 'is life; an' when he comes
to be old, it's the workhouse or the grave. He says that without
a man is very near, and pinches and stints 'imself and 'is
children to save, there can be neither surplus nor security.
That's why he wouldn't have no children, not though I wanted
them.

The strikers' meeting is a masterly study of mass psychology,—the

men swayed hither and thither by the different speakers and not
knowing whither to go. It is the smooth-tongued Harness who first
weakens their determination to hold out.

Harness. Cut your demands to the right pattern, and we'll see
you through; refuse, and don't expect me to waste my time
coming down here again. I'm not the sort that speaks at
random, as you ought to know by this time. If you're the sound
men I take you for—no matter who advises you against it—
you'll make up your minds to come in, and trust to us to get
your terms. Which is it to be? Hands together, and victory—or—
the starvation you've got now?

Then Old Thomas appeals to their religious sentiments:

Thomas. It iss not London; it iss not the Union—it iss Nature. It
iss no disgrace whateffer to a potty to give in to Nature. For this
 Nature iss a fery pig thing; it is pigger than what a man is.
There is more years to my hett than to the hett of anyone here.
It is a man's pisness to pe pure, honest, just, and merciful.
That's what Chapel tells you.... We're going the roat to
tamnation. An' so I say to all of you. If ye co against Chapel I
will not pe with you, nor will any other Got-fearing man.

At last Roberts makes his plea, Roberts who has given his all—brain,
heart and blood—aye, sacrificed even his wife to the cause. By sheer
force of eloquence and sincerity he stays his fickle comrades long
enough at least to listen to him, though they are too broken to rise
to his great dignity and courage.

Roberts. You don't want to hear me then? You'll listen to Rous

and to that old man, but not to me. You'll listen to Sim Harness
of the Union that's treated you so fair; maybe you'll listen to
those men from London.... You love their feet on your necks,
don't you?... Am I a liar, a coward, a traitor? If only I were, ye'd
listen to me, I'm sure. Is there a man of you here who has less
to gain by striking? Is there a man of you that had more to
lose? Is there a man among you who has given up eight
hundred pounds since this trouble began? Come, now, is there?
How much has Thomas given up—ten pounds or five or what?
You listened to him, and what had he to say? "None can
pretend," he said, "that I'm not a believer in principle—but
when Nature says: 'No further,' 'tes going against Nature!" I tell
you if a man cannot say to Nature: "Budge me from this if ye
can!"—his principles are but his belly. "Oh, but," Thomas says,
"a man can be pure and honest, just and merciful, and take off
his hat to Nature." I tell you Nature's neither pure nor honest,
just nor merciful. You chaps that live over the hill, an' go home
dead beat in the dark on a snowy night—don't ye fight your way
every inch of it? Do ye go lyin' down an' trustin' to the tender
mercies of this merciful Nature? Try it and you'll soon know with
what ye've got to deal. 'Tes only by that (he strikes a blow with
his clenched fist) in Nature's face that a man can be a man.
"Give in," says Thomas; "go down on your knees; throw up your
foolish fight, an' perhaps," he said, "perhaps your enemy will
chuck you down a crust." ... And what did he say about Chapel?
"Chapel's against it," he said. "She's against it." Well, if Chapel
and Nature go hand in hand, it's the first I've ever heard of it.
Surrendering's the work of cowards and traitors.... You've felt
the pinch o't in your bellies. You've forgotten what that fight 'as
been; many times I have told you; I will tell you now this once
again. The fight o' the country's body and blood against a
blood-sucker. The fight of those that spend themselves with
every blow they strike and every breath they draw, against a
thing that fattens on them, and grows and grows by the law of
merciful Nature. That thing is Capital! A thing that buys the
sweat o' men's brows, and the tortures o' their brains, at its
own price. Don't I know that? Wasn't the work o' my brains
bought for seven hundred pounds, and hasn't one hundred
thousand pounds been gained them by that seven hundred
without the stirring of a finger. It is a thing that will take as
much and give you as little as it can. That's Capital! A thing that
will say—"I'm very sorry for you, poor fellows—you have a cruel
time of it, I know," but will not give one sixpence of its
dividends to help you have a better time. That's Capital! Tell me,
for all their talk, is there one of them that will consent to
another penny on the Income Tax to help the poor? That's
Capital! A white-faced, stony-hearted monster! Ye have got it on
its knees; are ye to give up at the last minute to save your
miserable bodies pain? When I went this morning to those old
men from London, I looked into their very 'earts. One of them
was sitting there—Mr. Scantlebury, a mass of flesh nourished on
us: sittin' there for all the world like the shareholders in this
Company, that sit not moving tongue nor finger, takin' dividends
—a great dumb ox that can only be roused when its food is
 threatened. I looked into his eyes and I saw he was afraid—
afraid for himself and his dividends, afraid for his fees, afraid of
the very shareholders he stands for; and all but one of them's
afraid—like children that get into a wood at night, and start at
every rustle of the leaves. I ask you, men—give me a free hand
to tell them: "Go you back to London. The men have nothing for
you!" Give, me that, and I swear to you, within a week you shall
have from London all you want. 'Tis not for this little moment of
time we're fighting, not for ourselves, our own little bodies, and
their wants, 'tis for all those that come after throughout all time.
Oh! men—for the love o' them, don't roll up another stone upon
their heads, don't help to blacken the sky, an' let the bitter sea
in over them. They're welcome to the worst that can happen to
me, to the worst that can happen to us all, aren't they—aren't
they? If we can shake the white-faced monster with the bloody
lips, that has sucked the life out of ourselves, our wives, and
children, since the world began. If we have not the hearts of
men to stand against it breast to breast, and eye to eye, and
force it backward till it cry for mercy, it will go on sucking life;
and we shall stay forever what we are, less than the very dogs.

Consistency is the greatest crime of our commercial age. No matter

how intense the spirit or how important the man, the moment he
will not allow himself to be used or sell his principles, he is thrown
on the dust heap. Such is the fate of Anthony, the President of the
Company, and of David Roberts. To be sure they represent opposite
poles—poles antagonistic to each other, poles divided by a terrible
gap that can never be bridged over. Yet they share a common fate.
Anthony is the embodiment of conservatism, of old ideas, of iron
methods:

Anthony. I have been Chairman of this Company since its

inception two and thirty years ago.... I have had to do with
"men" for fifty years; I've always stood up to them; I have
never been beaten yet. I have fought the men of this Company
four times, and four times I have beaten them.... The men have
been treated justly, they have had fair wages, we have always
been ready to listen to complaints. It has been said that times
have changed; if they have, I have not changed with them.
Neither will I. It has been said that masters and men are equal!
Cant! There can only be one master in a house! Where two men
meet the better man will rule. It has been said that Capital and
Labor have the same interests. Cant! Their interests are as wide
asunder as the poles. It has been said that the Board is only
part of a machine. Cant! We are the machine; its brains and
sinews; it is for us to lead and to determine what is to be done;
and to do it without fear or favor. Fear of the men! Fear of the
shareholders! Fear of our own shadows! Before I am like that, I
hope to die. There is only one way of treating "men"—with the
iron hand. This half-and-half business, the half-and-half
manners of this generation, has brought all this upon us.
Sentiments and softness and what this young man, no doubt,
would call his social policy. You can't eat cake and have it! This
middle-class sentiment, or socialism, or whatever it may be, is
rotten. Masters are masters, men are men! Yield one demand,
and they will make it six. They are like Oliver Twist, asking for
more. If I were in their place I should be the same. But I am
not in their place.... I have been accused of being a
domineering tyrant, thinking only of my pride—I am thinking of
the future of this country, threatened with the black waters of
confusion, threatened with mob government, threatened with
what I cannot say. If by any conduct of mine I help to bring this
on us, I shall be ashamed to look my fellows in the face. Before
I put this amendment to the Board, I have one more word to
say. If it is carried, it means that we shall fail in what we set
ourselves to do. It means that we shall fail in the duty that we
owe to all Capital. It means that we shall fail in the duty that we
owe ourselves.
We may not like this adherence to old, reactionary notions, and yet
there is something admirable in the courage and consistency of this
man; nor is he half as dangerous to the interests of the oppressed
as our sentimental and soft reformers who rob with nine fingers, and
give libraries with the tenth; who grind human beings and spend
millions of dollars in social research work. Anthony is a worthy foe;
to fight such a foe, one must learn to meet him in open battle.

David Roberts has all the mental and moral attributes of his
adversary, coupled with the spirit of revolt and the inspiration of
modern ideas. He, too, is consistent: he wants nothing for his class
short of complete victory.

It is inevitable that compromise and petty interest should triumph

until the masses become imbued with the spirit of a David Roberts.
Will they ever? Prophecy is not the vocation of the dramatist, yet the
moral lesson is evident. One cannot help realizing that the
workingmen will have to use methods hitherto unfamiliar to them;
that they will have to discard the elements in their midst that are
forever seeking to reconcile the irreconcilable—Capital and Labor.
They will have to learn that men like David Roberts are the very
forces that have revolutionized the world and thus paved the way for
emancipation out of the clutches of the "white-faced monster with
bloody lips," toward a brighter horizon, a freer life, and a truer
recognition of human values.

JUSTICE

No subject of equal social import has received such thoughtful

consideration in recent years as the question of Crime and
Punishment. A number of books by able writers, both in Europe and
this country—preëminently among them "Prison Memoirs of an
Anarchist," by Alexander Berkman—discuss this topic from the
historic, psychologic, and social standpoint, the consensus of opinion
being that present penal institutions and our methods of coping with
crime have in every respect proved inadequate as well as wasteful.
This new attitude toward one of the gravest social wrongs has now
also found dramatic interpretation in Galsworthy's "Justice."

The play opens in the office of James How & Sons, solicitors. The
senior clerk, Robert Cokeson, discovers that a check he had issued
for nine pounds has been forged to ninety. By elimination, suspicion
falls upon William Falder, the junior office clerk. The latter is in love
with a married woman, the abused and ill-treated wife of a brutal
drunkard. Pressed by his employer, a severe yet not unkindly man,
Falder confesses the forgery, pleading the dire necessity of his
sweetheart, Ruth Honeywill, with whom he had planned to escape to
save her from the unbearable brutality of her husband.

Falder. Oh! sir, look over it! I'll pay the money back—I will, I
promise.

Notwithstanding the entreaties of young Walter How, who holds

modern ideas, his father, a moral and law-respecting citizen, turns
Falder over to the police.

The second act, in the court room, shows Justice in the very process
of manufacture. The scene equals in dramatic power and
psychologic verity the great court scene in "Resurrection." Young
Falder, a nervous and rather weakly youth of twenty-three, stands
before the bar. Ruth, his faithful sweetheart, full of love and
devotion, burns with anxiety to save the young man, whose affection
for her has brought about his present predicament. Falder is
defended by Lawyer Frome, whose speech to the jury is a
masterpiece of social philosophy. He does not attempt to dispute the
mere fact that his client had altered the check; and though he
pleads temporary aberration in his defense, the argument is based
on a social consciousness as fundamental and all-embracing as the
roots of our social ills—"the background of life, that palpitating life
which always lies behind the commission of a crime." He shows
Falder to have faced the alternative of seeing the beloved woman
murdered by her brutal husband whom she cannot divorce, or of
taking the law into his own hands. He pleads with the jury not to
turn the weak young man into a criminal by condemning him to
prison.

Frome. Men like the prisoner are destroyed daily under our law
for want of that human insight which sees them as they are,
patients, and not criminals.... Justice is a machine that, when
someone has given it a starting push, rolls on of itself.... Is this
young man to be ground to pieces under this machine for an act
which, at the worst, was one of weakness? Is he to become a
member of the luckless crews that man those dark, ill-starred
ships called prisons?... I urge you, gentlemen, do not ruin this
young man. For as a result of those four minutes, ruin, utter
and irretrievable, stares him in the face.... The rolling of the
chariot wheels of Justice over this boy began when it was
decided to prosecute him.

But the chariot of Justice rolls mercilessly on, for—as the learned
Judge says—

"Your counsel has made an attempt to trace your offense back

to what he seems to suggest is a defect in the marriage law; he
has made an attempt also to show that to punish you with
further imprisonment would be unjust. I do not follow him in
these flights. The Law is what it is—a majestic edifice, sheltering
all of us, each stone of which rests on another. I am concerned
only with its administration. The crime you have committed is a
very serious one. I cannot feel it in accordance with my duty to
Society to exercise the powers I have in your favor. You will go
to penal servitude for three years."
In prison the young, inexperienced convict soon finds himself the
victim of the terrible "system." The authorities admit that young
Falder is mentally and physically "in bad shape," but nothing can be
done in the matter: many others are in a similar position, and "the
quarters are inadequate."

The third scene of the third act is heart-gripping in its silent force.
The whole scene is a pantomime, taking place in Falder's prison cell.

"In fast-falling daylight, Falder, in his stockings, is seen standing

motionless, with his head inclined towards the door, listening. He
moves a little closer to the door, his stockinged feet making no
noise. He stops at the door. He is trying harder and harder to hear
something, any little thing that is going on outside. He springs
suddenly upright—as if at a sound—and remains perfectly
motionless. Then, with a heavy sigh, he moves to his work, and
stands looking at it, with his head down; he does a stitch or two,
having the air of a man so lost in sadness that each stitch is, as it
were, a coming to life. Then, turning abruptly, he begins pacing his
cell, moving his head, like an animal pacing its cage. He stops again
at the door, listens, and, placing the palms of his hands against it,
with his fingers spread out, leans his forehead against the iron.
Turning from it, presently, he moves slowly back towards the
window, tracing his way with his finger along the top line of the
distemper that runs round the wall. He stops under the window,
and, picking up the lid of one of the tins, peers into it. It has grown
very nearly dark. Suddenly the lid falls out of his hand with a clatter
—the only sound that has broken the silence—and he stands staring
intently at the wall where the stuff of the shirt is hanging rather
white in the darkness—he seems to be seeing somebody or
something there. There is a sharp tap and click; the cell light behind
the glass screen has been turned up. The cell is brightly lighted.
Falder is seen gasping for breath.
"A sound from far away, as of distant, dull beating on thick metal, is
suddenly audible. Falder shrinks back, not able to bear this sudden
clamor. But the sound grows, as though some great tumbril were
rolling towards the cell. And gradually it seems to hypnotize him. He
begins creeping inch by inch nearer to the door. The banging sound,
travelling from cell to cell, draws closer and closer; Falder's hands
are seen moving as if his spirit had already joined in this beating;
and the sound swells until it seems to have entered the very cell. He
suddenly raises his clenched fists.

"Panting violently, he flings himself at his door, and beats on it."

Falder leaves the prison, a broken ticket-of-leave man, the stamp of

the convict upon his brow, the iron of misery in his soul.

Falder. I seem to be struggling against a thing that's all round

me. I can't explain it: it's as if I was in a net; as fast as I cut it
here, it grows up there. I didn't act as I ought to have, about
references; but what are you to do? You must have them. And
that made me afraid, and I left. In fact, I'm—I'm afraid all the
time now.

Thanks to Ruth's pleading, the firm of James How & Son is willing to
take Falder back in their employ, on condition that he give up Ruth.
Falder resents this:

Falder. I couldn't give her up. I couldn't! Oh, sir! I'm all she's got
to look to. And I'm sure she's all I've got.

It is then that Falder learns the awful news that the woman he loves
had been driven by the chariot wheel of Justice to sell herself.
 Ruth. I tried making skirts ... cheap things. It was the best I
could get, but I never made more than ten shillings a week,
buying my own cotton and working all day; I hardly ever got to
bed till past twelve. I kept at it for nine months.... It was
starvation for the children.... And then ... my employer
happened—he's happened ever since.

At this terrible psychologic moment the police appear to drag Falder

back to prison for failing to report to the authorities as ticket-of-
leave man.

Completely overcome by the inexorability of his fate, Falder throws

himself down the stairs, breaking his neck.

The socio-revolutionary significance of "Justice" consists not only in

the portrayal of the inhuman system which grinds the Falders and
Honeywills, but even more so in the utter helplessness of society as
expressed in the words of the Senior Clerk, Cokeson, "No one'll
touch him now! Never again! He's safe with gentle Jesus!"

THE PIGEON

John Galsworthy calls this play a fantasy. To me it seems cruelly real:

it demonstrates that the best human material is crushed in the fatal
mechanism of our life. "The Pigeon" also discloses to us the
inadequacy of charity, individual and organized, to cope with
poverty, as well as the absurdity of reformers and experimenters
who attempt to patch up effects while they ignore the causes.

Christopher Wellwyn, an artist, a man deeply in sympathy with all

human sorrow and failings, generously shares his meager means
with everyone who applies to him for help.
Welcome to our website – the ideal destination for book lovers and
knowledge seekers. With a mission to inspire endlessly, we offer a
vast collection of books, ranging from classic literary works to
specialized publications, self-development books, and children's
literature. Each book is a new journey of discovery, expanding
knowledge and enriching the soul of the reade

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

Let us accompany you on the journey of exploring knowledge and

personal growth!

ebookname.com