Learning React Native Building Native Mobile Apps with JavaScript 1 (Early Release) Edition Bonnie Eisenman

Learning React Native Building Native Mobile Apps with JavaScript 1 (Early Release) Edition Bonnie Eisenman
Learning React Native Building Native Mobile Apps with JavaScript 1 (Early Release) Edition Bonnie Eisenman
Learning React Native Building Native Mobile Apps with JavaScript 1 (Early Release) Edition Bonnie Eisenman

1. Learning React Native Building Native Mobile
Apps with JavaScript 1 (Early Release) Edition
Bonnie Eisenman download
https://ebookname.com/product/learning-react-native-building-
native-mobile-apps-with-javascript-1-early-release-edition-
bonnie-eisenman/
Get Instant Ebook Downloads – Browse at https://ebookname.com

2. Instant digital products (PDF, ePub, MOBI) available
Download now and explore formats that suit you...
Getting Started with NativeScript Explore the
possibility of building truly native cross platform
mobile applications using your JavaScript skill
NativeScript 1st Edition Anderson
https://ebookname.com/product/getting-started-with-nativescript-
explore-the-possibility-of-building-truly-native-cross-platform-
mobile-applications-using-your-javascript-skill-nativescript-1st-
edition-anderson/
Enyo Up and Running Build Native Quality Cross Platform
JavaScript Apps 2nd Edition Roy Sutton
https://ebookname.com/product/enyo-up-and-running-build-native-
quality-cross-platform-javascript-apps-2nd-edition-roy-sutton/
Building Android Apps with HTML CSS and JavaScript 2nd
Edition Jonathan Stark
https://ebookname.com/product/building-android-apps-with-html-
css-and-javascript-2nd-edition-jonathan-stark/
The New Path Third Edition My Life with Paramhansa
Yogananda Swami Kriyananda
https://ebookname.com/product/the-new-path-third-edition-my-life-
with-paramhansa-yogananda-swami-kriyananda/

3. New World Babel Languages and Nations in Early America
Edward G. Gray
https://ebookname.com/product/new-world-babel-languages-and-
nations-in-early-america-edward-g-gray/
Beginning T SQL 3rd Edition Kathi Kellenberger
https://ebookname.com/product/beginning-t-sql-3rd-edition-kathi-
kellenberger/
Intelligent Quantum Information Processing 1st Edition
Siddhartha Bhattacharyya
https://ebookname.com/product/intelligent-quantum-information-
processing-1st-edition-siddhartha-bhattacharyya/
Parables and Conflict in the Hebrew Bible 1st Edition
Jeremy Schipper
https://ebookname.com/product/parables-and-conflict-in-the-
hebrew-bible-1st-edition-jeremy-schipper/
Top 10 Los Angeles Andrea Schulte
https://ebookname.com/product/top-10-los-angeles-andrea-schulte/

4. Emily Post s Etiquette 17th Edition Peggy Post
https://ebookname.com/product/emily-post-s-etiquette-17th-
edition-peggy-post/

7. Bonnie EisenmanBoston
Learning React Native
Building Mobile Applications with Javascript

8. {{ title }}
by Author Name
Copyright © 2015
This is a legal notice of some kind. You can add notes about the kind of license you are using for your
book (e.g., Creative Commons), or anything else you feel you need to specify.
If your book has an ISBN or a book ID number, add it here as well.

9. Table of Contents
Preface Title. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vii
1.
Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
How Does React Native Work? 10
The Virtual DOM in React 10
Extending the Virtual DOM 11
The Implications of “Native” 12
Why Use React Native? 13
Learn once, write anywhere 13
Leveraging the native platform 14
Developer tools 14
Using existing platform knowledge 16
Risks and Drawbacks 16
Summary 17
Native VS React for Web 17
The React Native Lifecycle 17
Working with Views in React Native 18
Styling Native Views 20
JSX and React Native 21
Thinking about host platform APIs 21
Summary 22
2.
Getting Started. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Setting Up Your Environment 23
Installing React Native 24
Creating a New Application 24
Running a React Native Application 25
Uploading to Your Device 27
iii

10. Summary 30
Exploring the Sample Code 30
Attaching a component to the view 31
Imports in React Native 31
The FirstProject Component 32
Summary 32
Introduction to the Tools 32
Using the Chrome Debugger 33
Targeting Different Devices 33
Type-Checking with Flow 34
Testing with Jest 34
Summary 35
Building a Weather App 36
Handling User Input 38
Displaying Data 39
Adding a Background Image 40
Fetching Data from the Web 42
Putting it Together 43
Summary 46
3.
Components for Mobile. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Analogies between HTML Elements and iOS Native Components 49
Text for the Web versus React Native 50
The Image Component 52
Working with Touch and Gestures 54
Using TouchableHighlight 54
The Gesture Responder System 57
PanResponder 59
Working with Organizational Components 66
Using the ListView 66
Using Navigators 78
TabBarIOS 82
Summary 84
4.
Styles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Declaring and Manipulating Styles 85
Inline Styles 86
Styling with Objects 86
Using Stylesheet.Create 87
Style Concatenation 87
Organization and Inheritance 89
Exporting Style Objects 89
iv | Table of Contents

11. Passing Styles as Props 90
Reusing and Sharing Styles 91
Positioning and Designing Layouts 91
Layouts with Flexbox 91
Using Absolute Positioning 97
Putting it Together 98
Summary 102
Table of Contents | v

13. Preface Title
This Is an A-Head
Congratulations on starting your new project! We’ve added some skeleton files for
you, to help you get started, but you can delete any or all of them, as you like. In the
file called chapter.html, we’ve added some placeholder content showing you how to
markup and use some basic book elements, like notes, sidebars, and figures.
vii

15. CHAPTER 1
Introduction
React is a Javascript library for building user interfaces. Open-sourced by Facebook in
2013, it has been met with excitement from a wide community of developers. Corpo‐
rate adopters have included the likes of Netflix, Yahoo!, Github, and Codecademy.
Users praise React for its performance and flexibility, as well as its declarative,
component-based approach to building user interfaces. As one might expect, React
was designed for the needs of Facebook’s development team, and is therefore suited
particularly well to complex web applications that deal heavily with user interaction
and changing data.
In January of 2015, the React team announced a new project: React Native. React
Native uses React to target platforms other than the browser, such as iOS and
Android, by implementing a so-called “bridge” between Javascript and the host plat‐
form. It promises web developers the ability to write real, natively rendering mobile
applications, all from the comfort of a Javascript library that they already know and
love.
How is this possible? And perhaps more importantly — how can you take advantage
of it? In this book, we will start by covering the basics of React Native and how it
works. Then, we will explore how to use your existing knowledge of React to build
complex mobile applications with React Native, taking advantage of host platform
APIs such as geolocation, the camera, and more. By the end, you will be equipped
with all the necessary knowledge to deploy your iOS applications to the App Store.
Though we will be focusing on iOS-based examples, the principles we will cover
apply equally well to React Native for Android and other platforms.
Are you ready to write your own mobile applications using React? Great — let’s get
started!
9

16. How Does React Native Work?
The idea of writing mobile applications in Javascript feels a little odd. How is it possi‐
ble to use React in a mobile environment? In this section, we will explore the techni‐
cal underpinnings that enable React Native. We will first need to recall one of React’s
features, the Virtual DOM, and understand how it relates to React Native for mobile.
The Virtual DOM in React
In React, the Virtual DOM acts as a layer between the developer’s description of how
things ought to look, and the work done to actually render them onto the page. To
render interactive user interfaces in a browser, developers must edit the browser’s
DOM, or Document Object Model. This is an expensive step, and excessive writes to
the DOM have a significant impact on performance. Rather than directly render
changes on the page, React computes the necessary changes by using an in-memory
version of the DOM. It then re-renders the minimal amount of your application nec‐
essary.
Figure 1-1. Rendering with the VirtualDOM
In the context of React on the web, most developers think of the Virtual DOM pri‐
marily as a performance optimization. Indeed, the Virtual DOM was one of React’s
early claims to fame, and most articles discussing React’s benefits mention perfor‐
mance and the Virtual DOM in the same breath. This focus makes a lot of sense,
given the context. At the time of React’s release, the Virtual DOM approach to ren‐
dering gave it a large performance advantage over existing Javascript frameworks,
especially when dealing with changing data or otherwise render-intensive applica‐
tions. (Since then, React’s model for DOM updates has started to be adopted by other
10 | Chapter 1: Introduction

17. frameworks, such as Ember.js’s new Glitter engine, though React maintains a strong
lead when it comes to performance.)
Extending the Virtual DOM
The Virtual DOM certainly has performance benefits, but its real potential lies in the
power of its abstraction. Placing a clean abstraction layer between the developer’s
code and the actual rendering opens up a lot of interesting possibilities. What if React
could render to a target other than the browser DOM? Why should React be limited
to the browser? After all, React already “understands” what your application is sup‐
posed to look like. Surely the conversion of that ideal to actual HTML elements on the
page could be replaced by some other step.
During the first two years of React’s public existence, some onlookers noticed this
intriguing possibility. Netflix, for instance, modified React so that they could render
to a huge variety of platforms including televisions and DVD players. Flipboard
demonstrated how to render React to the HTML <canvas> element. Then, at React
Conf in January 2015, Facebook announced a new library, React Native, that does the
same for iOS and Android, allowing React to render natively to mobile platforms.
There’s that word again: native. What does it mean to render natively? For React on
the web, this means that it renders to the browser DOM. With React Native, native
rendering means that React renders using native APIs for creating views.
Figure 1-2. React can render to different targets.
How Does React Native Work? | 11

18. This is all possible because of the “bridge,” which provides React with an interface
into the host platform’s native UI elements. React components return markup from
their render function, which instructs React how to render them. With React for the
web, this translates directly to the browser’s DOM. For React Native, this markup is
translated to suit the host platform, so a <View/> might become an iOS-specific
UIView.
While the projects from Flipboard and Netflix are not affiliated with React Native, the
basic idea is the same. Flipboard has essentially built a bridge from React to the
HTML5 <canvas/> element, while Netflix has built many bridges from React to hun‐
dreds of smart TVs, DVD players, and so on. The Virtual DOM gives React the flexi‐
bility to swap different rendering logic in and out, so as long as a bridge can be
constructed, React can render to virtually any platform. Version 0.14 of React split the
library into two separate packages, react and react-dom, further emphasizing that
the core of React is not dependent on any platform-specific rendering logic. (You can
read more about this in the relevant blog post.)
The Implications of “Native”
The fact that React Native actually renders using its host platform’s standard render‐
ing APIs enables it to stand out from most existing methods of cross-platform appli‐
cation development. Existing frameworks that enable you to write mobile
applications using combinations of Javascript, HTML, and CSS typically render using
webviews. While this approach can work, it also comes with drawbacks, especially
around performance. Additionally, they do not usually have access to the host plat‐
form’s set of native UI elements. When these frameworks do try to mimic native UI
elements, the results usually “feel” just a little off; reverse-engineering all the fine
details of things like animations takes an enormous amount of effort.
By contrast, React Native actually translates your markup to real, native UI elements,
leveraging existing means of rendering views on whatever platform you are working
with. There is no need to reverse-engineer animations or the finer details of a design,
because React is consuming the existing platform API. Additionally, React works sep‐
arately from the main UI thread, so your application can maintain high performance
without sacrificing capability. The update cycle in React Native is the same as in
React: when props or state change, React Native re-renders the views. The major
difference between React Native and React in the browser is that React Native does
this by leveraging the UI libraries of its host platform, rather than using HTML and
CSS markup.
The net result of the “native” approach is that you can create applications using React
and Javascript, without the usual accompanying trade-offs. React Native for iOS was
open-sourced in March 2015, with Android support expected to be released by the
end of the year. Any team willing to put in the work to write a “bridge” between React
12 | Chapter 1: Introduction

19. and any given host platform can add support for other platforms as well, so it will be
interesting to see where Native expands to next.
For developers accustomed to working on the web with React, this means that you
can write mobile apps with the performance and look-and-feel of a native application,
while using the tools that you know and love. This in turn has huge implications for
how we think about cross-platform application development, prototyping, and code
reuse.
Why Use React Native?
One of the first things people ask after learning about React Native is how it relates to
standard, native platform development. How should you make the decision about
whether or not to work in React Native, as opposed to traditional, platform-specific
development?
Whether or not React Native is a good fit for your needs depends heavily on your
individual circumstances and background knowledge. For developers who are com‐
fortable working with Javascript for the web, and React specifically, React Native is
obviously exciting — it can leverage your existing skillset to turn you into a mobile
developer overnight, without requiring a significant investment in platform-specific
languages and development paradigms. On the other hand, if you are already accus‐
tomed to traditional mobile development, then React Native’s advantages are less
immediately apparent. Let’s take a look at some of the benefits and considerations
that come with using React Native.
Learn once, write anywhere
The React team has been very clear that they are not chasing the “write once, run
anywhere” dream of cross-platform application development. This makes sense: an
interaction that feels magical on one platform will be completely unsuited to others.
Rather than focusing on total code reuse, React Native prioritizes knowledge reuse: it
allows you to carry your knowledge and skillset across platforms. The React team
dubs this “learn once, write anywhere.”
“Learn once, write anywhere” means that you can create interesting projects on new
platforms, without investing time and energy in learning an entirely new stack.
Knowledge of React is enough to be able to work effectively across multiple plat‐
forms. This has implications not just for individual programmers, but also for your
development teams. For instance, on a small team of engineers, committing to hiring
a full-time mobile developer may be difficult. However, if all members of your team
can cross-train between web and mobile, the barrier to releasing a mobile application
can be drastically lowered. Knowledge transfer empowers your team to be more flexi‐
ble about your projects.
Why Use React Native? | 13

20. Of course, while you will not be able to reuse all of your code, working in React
Native means that you can share plenty of it. Business logic and higher-level abstrac‐
tions within your application can be recycled across platforms, as we will discuss in
detail later. Netflix, for instance, has a React application that runs on literally hun‐
dreds of different platforms, and can expand quickly to new devices thanks in part to
code reuse. And the Facebook Ads Manager application for Android shares 87% of its
codebase with the iOS version, as noted in the React Europe 2015 keynote.
This also means that developers who are already comfortable working on any given
platform can still benefit from using React Native. For instance, an iOS developer
equipped with knowledge of React Native can write mobile applications that can then
be adapted easily for Android.
It’s also worth mentioning a perhaps less-obvious bonus: you will be using React for
the “write anywhere” part of this equation. React has gained popularity rapidly, and
for good reason. It is fast, and flexbile; the component-based approach implicitly
encourages you to write clean, modular code that can scale to accommodate complex
applications. The facets of React that are most appreciated by the community apply
equally well to React Native.
Leveraging the native platform
React Native gives you the benefits of native development, and allows you to take
advantage of whatever platform you are developing for. This includes UI elements
and animations, as well as platform-specific APIs, such as geolocation or the camera
roll.
We can contrast this with existing cross-platform mobile solutions. Many of them
allow you to develop inside of thinly-disguised browser components, which then re-
implement pieces of the native UI. However, these applications often feel a little “off.”
It is usually impossible to fully replicate native UI elements, and as a result, aspects of
your application such as animations and styling can feel clunky or just less-than-
natural. React Native lets you neatly circumvent this problem.
Compared with traditional mobile application development, React Native does not
have quite the same access to its host platform. There is a slight layer of added com‐
plexity to using APIs not yet supported by the React Native core, for instance, and
synchronous APIs in particular pose a challenge.
Developer tools
The React Native team has baked strong developer tools and meaningful error mes‐
sages into the framework, so that working with robust tools is a natural part of your
development experience. As a result, React Native is able to remove many of the pain
points associated with mobile development.
14 | Chapter 1: Introduction

21. For instance, because React Native is “just” Javascript, you do not need to rebuild
your application in order to see your changes reflected; instead, you can hit CMD+R
to refresh your application just as you would any other webpage. Having worked with
both Android and iOS development previously, I always cringe to think about how
much wasted time was spent waiting to recompile my applications for testing. React
Native shrinks that delay from minutes to milliseconds, allowing you to focus on your
actual development work.
Additionally, React Native lets you take advantage of intelligent debugging tools and
error reporting. If you are comfortable with Chrome or Safari’s developer tools, you
will be happy to know that you can use them for mobile development, as well. Like‐
wise, you can use whatever text editor you prefer for Javascript editing: React Native
does not force you to work in Xcode to develop for iOS, or Android Studio for
Android development.
Figure 1-3. Using the Chrome Debugger
Besides the day-to-day improvements to your development experience, React Native
also has the potential to positively impact your product release cycle. Apple, for
instance, has indicated that they are open to allowing Javascript-based changes to an
app’s behavior to be loaded over-the-air with no new release cycle necessary.
Why Use React Native? | 15

22. All of these small perks add up to saving you and your fellow developers time and
energy, allowing you to focus on the more interesting parts of your work and be more
productive overall.
Using existing platform knowledge
For developers already accustomed to writing traditional native applications on a
given platform, moving to React Native does not obsolete your platform-specific
knowledge. Far from it; there are a number of circumstances in which this knowledge
becomes critical. Occasionally, you will discover that the React Native “bridge” for a
given platform does not yet support host platform APIs or features that you will need.
For instance, being comfortable working with Objective-C enables you to jump in
and add to the React Native “bridge” when necessary, thereby extending React
Native’s support for iOS.
Community support will likely play a large factor in how React Native evolves on new
platforms. Developers who are able to contribute back to the platform by building out
the bridge will be better equipped to explore using React Native on new platforms, as
well as lay the groundwork for its success.
Risks and Drawbacks
The largest risk that comes with using React Native is related to its maturity level. As
a young project, React Native will inevitably contain its share of bugs and unopti‐
mized implementations. This risk is somewhat offset by its community. Facebook,
after all, is using React Native in production, and the community contributions have
been proceeding at a good tempo. Nevertheless, working with bleeding-edge technol‐
ogy does mean that you can expect a few paper cuts along the way.
Similarly, by using React Native, you are relying heavily on a library that is not neces‐
sarily endorsed by the host platform you are working on. Because the Native team
may not be able to coordinate with Apple, for instance, we can imagine that new iOS
releases could require a scramble to get the React Native library up to speed. For most
platforms, however, this should be a relatively minor concern.
The other major drawback is what happens when you encounter a limitation in React
Native. Say that you want to to add support for a host platform API not yet built into
the React Native core library. If you are a developer who is only comfortable in Java‐
script, there is a nontrivial learning curve to add this support yourself. We will
address exactly this scenario later in the book, and I will demonstrate how to expose
Objective-C interfaces to your Javascript code.
16 | Chapter 1: Introduction

23. Summary
React Native has much to offer for any developer, but a lot will depend on your indi‐
vidual situation. If you are already comfortable working with React, the value propo‐
sition of React Native is clear: it gives you a low-investment way to transfer your skills
and write for multiple platforms, without the usual drawbacks of cross-platform
development frameworks. Even for developers who are comfortable building tradi‐
tional native mobile applications, there is a lot of appeal here, too. On the other hand,
if total platform stability is a must for you, React Native might not be the best choice.
That being said, with React Native applications doing quite well in the iOS App Store
already, this is a less risky proposition than you might think. Facebook, at least, is bet‐
ting heavily on the React Native approach to mobile development. Though the main
Facebook mobile applications are still written traditionally, you can see React Native
succeeding in the wild by downloading Facebook’s Groups app for iOS, which fea‐
tures a blend of React Native and Objective-C code; or the Ads Manager for iOS,
which is a 100% React Native application.
Hopefully all of this has left you excited to begin working with React Native! In the
next section, we will tackle the information you will need to know in order to work
with React Native as opposed to React in the browser.
Native VS React for Web
While React Native is very similar to React for the web, it comes with own considera‐
tions, quirks, and behaviors. In this section, we will take a look at some of these dif‐
ferences, in order to set you up for getting your hands dirty with building iOS
applications in the next chapter. Our focus will be on using React Native for iOS, but
the best practices we will be covering can apply equally well to React Native on other
platforms as well.
The React Native Lifecycle
If you are accustomed to working in React, the React lifecycle should be familiar to
you. When React runs in the browser, the render lifecycle begins by mounting your
React components:
Figure 1-4. Mounting components in React
After that, React handles the rendering and re-rendering of your component as nec‐
essary.
Native VS React for Web | 17

24. Figure 1-5. Re-rendering components in React
Understanding the rendering stage in React should be fairly straightforward. The
developer returns HTML markup from a React component’s render method, which
React then renders directly into the page as necessary.
For React Native, the lifecycle is the same, but the rendering process is slightly differ‐
ent, because React Native depends on the bridge. We looked at the bridge briefly ear‐
lier in Figure 1-2. The bridge translates APIs and UI elements from their host
platform underpinnings (in the case of iOS, Objective-C) into interfaces accessible via
Javascript.
The other item worth noting about the React Native lifecycle is that React Native
works off of the main UI thread, so that it can perform the necessary computations
without interfering with the user’s experience. On mobile, there is usually a single UI
thread, and time spent performing computations on the UI thread prevents the user
from interacting with your application. It is important that React Native stay as unob‐
trusive as possible, especially in a resource-constrained environment like mobile.
Working with Views in React Native
When writing in React for web, you render normal HTML elements: <div/>, <p/>,
<span/>, <a/>, and so on. With React Native, all of these elements are replaced by
platform-specific React components. The most basic is the cross-platform <View/>, a
simple and flexible UI element that can be thought of as analogous to the <div/>. On
iOS, the <View/> component renders to a <UIView/>.
Table 1-1. Basic Elements
React React Native
<div/> <View/><span/> <TextView/><li/>, <ul/>`<ListView/><img/> <ImageView/>
Other components are platform-specific. For instance, the <DatePickerIOS /> com‐
ponent (predictably) renders the iOS standard date picker. Here is an excerpt from
18 | Chapter 1: Introduction

25. the UIExplorer sample app, demonstrating an iOS Date Picker. The usage is straight‐
forward, as you would expect from React:
<DatePickerIOS
date={this.state.date}
mode="date"
timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}
/>
This renders to the standard iOS date picker:
Figure 1-6. The iOS Date Picker
Because all of our UI elements are now React components, rather than basic HTML
elements like the <div/>, you will need to explicitly import each component you wish
to use. For instance, we needed to import the <DatePickerIOS /> component like so:
var React = require('react-native');
var {
DatePickerIOS
} = React;
The UIExplorer application, which is bundled into the standard React Native exam‐
ples, allows you to view all of the supported UI elements. I encourage you to examine
the various elements included in the UIExplorer app. It also demonstrates many styl‐
ing options and interactions.
Because these components vary from platform to platform, how you structure your
React components becomes even more important when working in React Native. In
Native VS React for Web | 19

26. React for web, we often have a mix of React components: some manage logic and
their child components, while other components render raw markup. If you want to
reuse code when working in React Native, maintaining a separation between these
types of components becomes critical. A React component that renders a <DatePick
erIOS /> element obviously cannot be reused for Android. However, a component
that encapsulates the associated logic can be reused. Then, the view-component can
be swapped out based on your platform.
Styling Native Views
On the web, we style React components using CSS, just as we would any other HTML
element. Whether you love it or hate it, CSS is a necessary part of the web. React usu‐
ally does not affect the way we write CSS. It does make it easier to use (sane, useful)
inline styles, and to dynamically build class names based on props and state, but
otherwise React is mostly agnostic about how we handle styles on the web.
Non-web platforms have a wide array of approaches to layout and styling. When we
work with React Native, thankfully, we can utilize one standardized approach to styl‐
ing. Part of the bridge between React and the host platform includes the implementa‐
tion of a heavily pruned subset of CSS. This narrow implementation of CSS relies
primarily on flexbox for layout, and focuses on simplicity rather than implementing
the full range of CSS rules. Unlike the web, where CSS support varies across browsers,
React Native is able to enforce consistent support of style rules. Much like the various
UI elements, you can see many examples of supported styles in the UIExplorer appli‐
cation.
React Native also insists on the use of inline styles, which exist as Javascript objects
rather than separate stylesheet files. The React team has advocated for this approach
before in React for web applications. On mobile, this feels considerably more natural.
If you have previously experimented with inline styles in React, the syntax will look
familiar to you:
// Define a style...
var style = {
backgroundColor: 'white',
fontSize: '16px'
};
// ...and then apply it.
var tv = <TextView style={style}> A styled TextView </TextView>;
React Native also provides us with some utilities for creating and extending style
objects that make dealing with inline styles a more manageable process. We will
explore those later.
Does looking at inline styles make you twitch? Coming from a web-based back‐
ground, this is admittedly a break from standard practices.Working with style objects,
20 | Chapter 1: Introduction

27. as opposed to stylesheets, takes some mental adjustments, and changes the way you
need to approach writing styles. However, in the context of React Native, it is a useful
shift. We will be discussing styling best practices and workflow later on. Just try not to
be surprised when you see them in use!
JSX and React Native
In React Native, just as in React, we write our views using JSX, combining markup
and the Javascript that controls it into a single file. JSX met with strong reactions
when React first debuted. For many web developers, the separation of files based on
technologies is a given: you keep your CSS, HTML, and Javascript files separate. The
idea of combining markup, control logic, and even styling into one language can be
confusing.
Of course, the reason for using JSX is that it prioritizes the separation of concerns
over the separation of technologies. In React Native, this is even more strictly
enforced. In a world without the browser, it makes even more sense unify our styles,
markup, and behavior in a single file for each component. Accordingly, your .js files
in React Native are in fact JSX files. If you were using vanilla Javascript when working
with React for web, you will want to transition to JSX syntax for your work in React
Native.
Thinking about host platform APIs
Perhaps the biggest difference between React for web and React Native is the way we
think about host platform APIs. On the web, the issue at hand is often fragmented
and inconsistent adoption of standards; still, most browsers support a common core
of shared features. With React Native, however, platform-specific APIs play a much
larger role in creating an excellent, natural-feeling user experience. There are also
many more options to consider. Mobile APIs include everything from data storage, to
location services, to accessing hardware such as the camera. As React Native expands
to other platforms, we can expect to see other sorts of APIs, too; what would the
interface look like between React Native and a virtual reality headset, for instance?
By default, React Native for iOS includes support for many of the commonly used
iOS features, and React Native can support any asynchronous native API. We will
take a look at many of them throughout this book. The array of options can seem diz‐
zying at first if you are coming from a browser-based background in web develop‐
ment. Happily, React Native makes it straightforward and simple to make use of host
platform APIs, so you can experiment freely. Be sure to think about what feels “right”
for your target platform, and design with natural interactions in mind.
Inevitably, the React Native bridge will not expose all host platform functionality. If
you find yourself in need of an unsupported feature, you have the option of adding it
to React Native yourself. Alternatively, chances are good that someone else has done
Native VS React for Web | 21

28. so already, so be sure to check in with the community to see whether or not support
will be forthcoming.
Also worth noting is that utilizing host platform APIs has implications for code reuse.
React components that need platform-specific functionality will be platform-specific
as well. Isolating and encapsulating those components will bring added flexibility to
your application. Of course, this applies for the web, too: if you plan on sharing code
between React Native and React, keep in mind that things like the DOM do not
actually exist in React Native.
Summary
React Native represents a new and intriguing way of using Javascript to target other
platforms. For a web developer familiar with React, it is a tantalizing opportunity to
get up-and-running with mobile app development with very little overhead. There’s a
lot to like about React Native’s approach, as well as plenty of unknowns to explore.
In order to fully take advantage of React Native, there is a lot to learn. The good news
is that your experience with working with React on the web will give you the founda‐
tion you need to be successful with React Native. As we begin writing iOS apps with
React Native in the next chapter, I think you will be pleasantly surprised by how at
home you feel working on a mobile platform. We will begin by tackling the basics of
getting up and running, and learning how to adjust your React best practices to work
on mobile. By the last chapter, you will be ready to deploy a robust iOS application to
the App Store.
22 | Chapter 1: Introduction

29. CHAPTER 2
Getting Started
In this chapter, we will cover how to set up your local development environment for
working with React Native. Then, we will go through the basics of creating a simple
iOS application, which you will then be able to deploy to your own iOS device.
Though this book uses iOS for the examples, most of the content covered applies
equally well to React Native for other platforms. If you are working with React Native
for Android, or another platform, feel free to skip the environment setup steps. You
can install React Native in accordance with the online documentation and then jump
directly into the React Native code examples.
Setting Up Your Environment
Setting up your development environment will enable you to follow along with the
examples in the book, and will let you write your own applications!
In order to develop for iOS, you will need to purchase or otherwise acquire two
things: a Mac, and an iOS developer’s license. This applies equally to ordinary iOS
development, as well as iOS development using React Native. An iOS developer’s
license is reasonably priced at $99/year. While you do not need to buy one just yet,
without it, you cannot easily deploy your application to a physical device. Nor can
you release your work on the App Store.
You will also need to install Xcode, if you have not done so already. Xcode can be
installed from the Mac App Store. Happily, while you will need to install Xcode and
keep it running, React Native allows you to write code using whichever text editor
you normally prefer for your Javascript projects.
23

30. Discovering Diverse Content Through
Random Scribd Documents

31. Oh istenem, mi jól esik
A harczi zaj után e dal,
Mikéntha bérczi hűs patak füröszt
Égő sebet hullámival.
Dalolj, dalolj, kedves madár,
Eszembe hozzák e dalok,
Hogy nemcsak gyilkos eszköz, katona,
Egyszersmind költő is vagyok.
Eszembe jut dalodrul a
Költészet és a szerelem,
Az a sok jó, mit e két istennő
Tett és még tenni fog velem.
Emlékezet s remény, ez a
Két rózsafa ismét virit
Dalodra, és lehajtja mámoros
Lelkem fölé szép lombjait,
És álmodom, és álmaim
Oly kedvesek, oly édesek…
Te rólad álmodom, hív angyalom,
Kit olyan híven szeretek,
Ki lelkem üdvessége vagy,
Kit istentől azért nyerék,
Hogy megmutassa, hogy nem odafönn,
De lenn a földön van az ég.
Dalolj, pacsírta, hangjaid
Kikeltik a virágokat!
Szivem mily puszta volt, és benne már
Milyen sok szép virág fakad.
(Bethlen.)

32. Péter bátya.
Tíz katona esett a helységre,
Nem volt szükség fogdosó kötélre,
Húsz legény ment maga jó szántából
Zászló alá az eke szarvától.
»Hogy ne mennék örömest, mikor kell!
A ki nem megy, hitvány, gyáva korhely.
Nem királyért hadakozunk mostan,
A hazáért fogunk állni sorban.
Nem királyért, sőt a király ellen,
A kit isten mindörökké verjen!
Verje meg úgy, a mint ő akarta,
Hogy igába jussunk mi s nyomorba.
Te éretted megyünk a csatába,
Nemzetünknek drága szabadsága!
Megyünk húszan tíz helyett, és ha kell
Utánunk még kétszer annyi jön el.«
S összeálltak indulásra készen
Az ujonczok falu közepében,
Körülöttök fiatalok, vének
Gyülekeztek búcsuvétel végett.
Az anyák (ez a természet rende,
Isten őket már igy teremtette,
Ők szegények erről nem tehetnek)
Hát az anyák szörnyen keseregtek.
Sírtak-rítak, mint az őszi felleg,
Fiaiknak hogy elmenni kellett,
Elmenniök, és még oda pedig,

33. A hol a halál vendégeskedik.
A mint mondom, volt sok sírás-rívás,
Hejh hanem úgy csak korán se rítt más,
Egynek se volt oly nedves köténye,
Mint kelmednek, szegény Panna néne.
Hogy ne sírna? három fia vagyon,
Mind a három szép szál legény nagyon,
S mind a három be vagyon sorozva
Katonának s ottan áll a sorba’.
»Hagyd el, anyjok, hagyd el már,« szólt kérve
Péter bátya, Panna néni férje,
»Hagyd el, anyjok, elég ebbül ennyi,
Nem is illik ennyit keseregni.
Nékem is ugy fiaim, mint néked,
Azért még sem siratom ám őket,
Sőt örülök, hogy nevemmel hárman
Lesznek ott a szabadság harczában.
Menjetek el, szeretett cselédim;
Ha megjöttök a háboru végin,
Nagy kedvem lesz… és ha oda vesztek,
Fáj a szívem majd, de nem reped meg.
Szép halál a szabadságért halni,
A hogy én azt el tudom gondolni,
Legszebb halál az a csatatéri,
A hogy azt az én eszem föléri.
Menjetek hát életbe, halálba,
Fegyveritek legyenek megáldva,
Hogy szabadság ragyogjon majd rajtok,
Különben jobb, hogy ha ott maradtok.«

34. Az ujonczok utra kerekedtek,
Jó kedve volt a jó gyerekeknek;
Ugy mentenek a halál utjára,
Mintha mentek volna lakomára.
Péter bátya, hát kendet mi lelte?
Olyat sóhajt, majd kiszáll a lelke,
Néz utána az ujoncz-seregnek,
S íme, íme könnyei peregnek.
E hát vége a sok czifra szónak?
Addig beszélt máshoz biztatólag,
Addig köpte a markát, mig aztán
Tyúkmadár lett a vitéz oroszlán.
Csúfolták az öreget keményen,
Hogy hát ő csak szóval győzte légyen,
De az öreg, bár nagyon is únja,
Egy sziporkát sem felel a gúnyra.
A mit szólott azt csak ugy magában
Mormogta el haza ballagtában:
»Mennek ők és maradni kell nékem!
Itthonn maraszt göthös öregségem.
Szabadságot vesznek drága áron,
S én ne legyek a véres vásáron,
Én itthonn csak kész portékát lessek,
Ne legyek ott, hogy én is fizessek!
Jól esik, hogy megértem ezt a kort,
Hol nemzetem láncz helyett fegyvert hord,
S még is vesztem vón el eddig inkább,
Mint hogy most csak nézzem e szent munkát!
Elvágnám a két kezem, két lábam,
Ha tudnám, hogy nem vágom hiában,

35. Ha helyette más erős új nőne,
Hogy mehetnék majd a harczmezőre!«
(Szalonta.)
Európa csendes, ujra csendes…
Európa csendes, ujra csendes,
Elzúgtak forradalmai…
Szégyen reá! lecsendesűlt és
Szabadságát nem vívta ki.
Magára hagyták, egy magára
A gyáva népek a magyart;
Láncz csörg minden kézen, csupán a
Magyar kezébe cseng a kard.
De hát kétségbe kell-e esnünk,
Hát búsuljunk-e e miatt?
Ellenkezőleg, oh hon, inkább
Ez légyen a mi lelket ad.
Emelje ez föl lelkeinket,
Hogy mi vagyunk a lámpafény,
Mely a midőn a többi alszik,
Ég a sötétség éjjelén.
Ha a mi fényünk nem lobogna
A véghetetlen éjen át,
Azt gondolhatnák fönn az égben,
Hogy elenyészett a világ.
Tekints reánk, tekints szabadság,
Ismerd meg mostan népedet:
Midőn más könnyet sem mer adni,
Mi vérrel áldozunk neked.

36. Vagy kell-e még több, hogy áldásod
Ne érdemetlen szálljon ránk?
E hűtlen korban mi utósó
Egyetlen híveid valánk!
(Debreczen.)
Az erdélyi hadsereg.
Mi ne győznénk? hisz Bem a vezérünk,
A szabadság régi bajnoka!
Bosszuálló fénynyel jár előttünk,
Osztrolenka véres csillaga.
Ott megy ő, az ősz vezér; szakálla
Mint egy fejér zászló lengedez;
A kivívott diadal utáni
Békességnek a jelképe ez.
Ott megy ő, a vén vezér, utána
A hazának ifjusága mi,
Igy kisérik a vén zivatart a
Tengerek szilaj hullámai.
Két nemzet van egyesűlve bennünk,
S mily két nemzet! a lengyel s magyar!
Van-e sors, a mely hatalmasabb, mint
E két nemzet, ha egy czélt akar?
Egy a czélunk: a közös bilincset
Összetörni, melyet hordozánk,
S összetörjük, esküszünk piros, mély
Sebeidre, megcsufolt hazánk!
Küldd elénk, te koronás haramja,
Légionként bérszolgáidat,

37. Hogy számodra innen a pokolba
Holttestökbül épitsünk hidat.
Mi ne győznénk? hisz Bem a vezérünk
A szabadság régi bajnoka!
Bosszuálló fénynyel jár előttünk
Osztrolenka véres csillaga.
(Bánfi-Hunyad.)
Bizony mondom, hogy győz most a magyar…
Bizony mondom, hogy győz most a magyar,
Habár ég s föld ellenkezőt akar!
Azért nem győzött eddig is e hon,
Mert soha sem volt egy akaraton;
Most egy a lélek, egy a szív, a kar…
Mikor győznél, ha most sem, oh magyar?
Egy ember a haza, s ez halni kész,
S ezért, oh népem, ép ezért megélsz,
S dicső lesz élted, boldog és szabad,
A milyen senkié a nap alatt!
S én bátran állom a csaták tűzét,
Tudom, hogy a golyó nekem nem vét,
Tudom, hogy a sors őriz engemet,
Hogy engemet megölni nem lehet,
Mert én leszek, nekem kell lenni, ki
Ha elleninket mind a föld fedi,
Megéneklem majd diadalmadat,
Szabadság, és a szent halottakat,
A kiknek vére volt keresztvized
S halálhörgése bölcsőéneked;
Meg kell, hogy érjem azt a szép napot,
Midőn áldásodat reánk adod,
S mi annyi átokteljes év után

38. Sirunk, mosolygunk az öröm mián,
Midőn, mit eltört lánczunk ád, a nesz
Egy szabad nemzet imádsága lesz!
Meg kell, hogy érjem azt a nagy napot,
A melyért lantom s kardom fáradott!
(Maros-Vásárhely.)
A székelyek.
Nem mondom én: előre székelyek!
Előre mentek úgy is, hős fiúk;
Ottan kiván harczolni mindegyik,
Hol a csata legrémesebben zúg.
Csak nem fajult el még a székely vér!
Minden kis cseppje drágagyöngyöt ér.
Ugy mennek a halál elébe ők,
A mint más ember menyegzőre mén;
Virágokat tűznek kalapjaik
Mellé, s dalolnak a harcz mezején.
Csak nem fajult el még a székely vér!
Minden kis cseppje drágagyöngyöt ér.
Ki merne nékik ellenállani?
Ily bátorságot szívében ki hord?
Mennek, röpűlnek, mint a szél, s üzik
Az ellenséget, mint a szél a port!
Csak nem fajult el még a székely vér,
Minden kis cseppje drágagyöngyöt ér!
(Karánsebes.)

39. Vajda-Hunyadon.
I.

40. Fogadjatok be, ti dicső falak,
Fogadj magadba, híres ősi vár!
Légy üdvezelve… hol a hős lakott,
A költő ottan lelkesedve jár.
Mily hős lakott itt, a nagy Hunyadi!
Mily lelkesűlés éget engemet!
Szivemnek hangos dobbanásai,
Beszéljetek ti ajkaim helyett.
Itten lakott, tán olykor épen itt
Gondolkodék e bástya tetején,
Innen tekintett a jövőbe ő,
A honnan most a multba nézek én.
Itt pihené ki fáradalmait,
Midőn elzúgtak a kemény csaták,
Melyek Konstantinápoly tornyain
A büszke félholdat megingaták.
Jó pihenő hely… csendes szép magány
Mélyen lehajló völgynek zöld ölén…
Itt len a vár; nem éri a vihar
Még a zászlót sem tornya tetején.
El van rejtezve a világ elől
E szent magány; beléje más nem lát,
Csak messziről fehér fejével a
Hegyek nagyapja a vén Retyezát.
II.
Szólott Hunyadvár bámuló gyönyörrel:
»Kit látok? oh kit látok? Hunyadit!
Megjöttél hát, oh hősök hőse, végre,
Kit vártalak négy hosszu századig.
É

41. Én hittem azt, hogy vissza fogsz te jőni,
Ez a hitem volt, mi erőt adott,
Hogy el ne dőljek, hogy viselni bírjam
A négy száz éves gyászt és bánatot.
És megjövél… légy hévvel üdvezelve,
Hosszan várt vendég, óh hős, oh apám!
Csak az fáj most, hogy nem tud sirni a kő…
Örömkönyűimet hogy ontanám!«
Felelt a vendég: »Sajnállak, szegény vár,
Hogy örömedet el kell rontani…
Csalatkozol; nem az jött, a kit vártál,
Az én nevem Bem, és nem Hunyadi.«
Szólt vissza a vár: »Én azzal törődjem,
Mi volt akkor s mi mostan a neved?
A név mulandó, változékony; a mi
Örök, azt nézem én, a szellemet.
Nem a nevedről, hanem szellemedrül
S annak müvéről ismerek reád:
Az vagy, ki voltál, négy száz év előtt s most
Te mentetted meg a magyar hazát!«
(Vajda-Hunyad.)
Ki gondolná, ki mondaná…
Ki gondolná, ki mondaná,
Hogy e hely csatatér?
Hogy néhány rövid hét előtt
Itt folyt el annyi vér?
Itt harczolánk, itt vett körűl
Az ellenség hada,

42. Elől halál, hátul halál,
Ez rémes nap vala!
Akkor, miként a férfigond,
Mogorva volt az ég,
Most, mint a kis gyermek szeme,
Szelíd és tiszta kék.
Akkor, mint aggastyán feje,
Hófejér volt a föld,
Mostan, miként az ifjunak
Reménye, olyan zöld.
A légben akkor itt zugó
Golyók röpűltek el,
A légben most fejem fölött
Pacsírta énekel.
Láttunk itt akkor a sikon
Véres halottakat,
S hol a holtak feküttenek,
Most ott virág fakad.
Ki gondolná, ki mondaná,
Hogy e hely csatatér?
Hogy néhány rövid hét előtt
Itt folyt el annyi vér?
(Szászsebes.)
Föl a szent háborúra!
Itt a próba, az utósó
Nagy próba:
Jön az orosz, jön az orosz,
Itt is van már valóba.

43. Eljött tehát az utósó
Itélet,
De én attól sem magamért,
Sem hazámért nem félek.
Miért félnénk az itélet
Napjátul?
Féljenek ők, kik viselik
Magokat oly galádul,
Kik rá törtek az ártatlan
Magyarra,
Most veri meg az úristen
Mindenható haragja!
Föl hazámnak valamennyi
Lakója,
Ideje, hogy tartozását
Minden ember lerója;
Ki a házból, ki a síkra
Emberek,
Most az egész Magyarország
Legyen egy nagy hadsereg!
Ki is megyünk, szó sincs róla,
Mindnyájan,
Meghalni, vagy győzedelmet
Nyerni a szent csatában.
Szent a csata, nem harczolunk
Királyért:
Király ellen szabadságunk
Istenünk és hazánkért!
Átkos király, érezted hát
Vesztedet,
Az ördögnek, hogy megmentsen,
Eladtad a lelkedet.

44. De hiába volt a vásár
Elhihet’d:
Kit az isten elhagyott, azt
Az ördög nem menti meg.
Sok az orosz, nagy a száma,
Mi haszna?
Több lesz ott a magyar; talán
Száz is jut egy oroszra.
És ha volnánk kevesebben,
Mint azok:
Hála isten, minket hí ugy
A világ, hogy magyarok!
Ne féljetek, gyermekink, ne
Féljetek,
Nem szúr által dárdájával
A vad kozák titeket;
Feleségink, kedvesink, ne
Sírjatok,
Idegenek ölelése
Nem tesz csúfot rajtatok.
S ti apáink, anyáink, szent
Halottak,
Sírotokon ellenség ne
Tapodjon, nem tapodhat;
Inkább veszszen ki nemzetünk
Egy szálig,
S dagadjon föl kifolyt vérünk
Árja az ég boltjáig!
Minden, a mi szent előttünk,
Koczkán van,
Ha a világ támad is meg,
Győznünk kell e csatákban;

45. Ha miljomnak el kell veszni,
Veszszen el!
Ki fogna most fukarkodni
Életével, vérivel?
És te isten, magyarok nagy
Istene,
Légy népeddel, hű népeddel,
Jó népeddel, légy vele!
Tedd hatalmad fiaidnak
Lelkére,
Világdöntő haragodat
Fegyvereink élére!
(Pest.)
Szörnyű idő…
Szörnyű idő, szörnyű idő!
S a szörnyüség mindegyre nő.
Talán az ég
Megesküvék,
Hogy a magyart kiirtja.
Minden tagunkból vérezünk,
Hogy is ne? villog ellenünk
A fél világnak kardja.
És ott elől a háború
Csak a kisebb baj; szomorúbb,
Mi hátul áll,
A döghalál.
Beh kijutott a részed,
Isten csapásiból, o hon,
Folyvást arat határidon
Két kézzel az enyészet.

46. Egy szálig elveszünk-e mi?
Vagy fog maradni valaki,
Leírni e
Vad fekete
Időket a világnak?
S ha lesz ember, ki megmarad,
El tudja e gyászdolgokat
Beszélni, mint valának?
S ha elbeszéli úgy, a mint
Megértük ezeket mi mind:
Akad-e majd,
Ki ennyi bajt
Higyjen, hogy ez történet?
És e beszédet nem veszi
Egy őrült, rémülésteli,
Zavart ész meséjének?
(Mező-Berény.)
Négy nap dörgött az ágyu…
Négy nap dörgött az ágyu
Vizakna s Déva közt,
Ott minden talpalatnyi
Földet vér öntözött!
Fehér volt a világ, szép
Fejér hó este be,
Úgy omlott a piros vér
A fejér hóra le.
Négy hosszu nap csatáztunk
Rettentő vad csatát,
Minőt a messzelátó
Nap csak nagynéha lát.

47. Mindent megtettünk, a mit
Kivánt a becsület…
Tízannyi volt az ellen,
Győznünk nem lehetett.
Szerencse és az isten
Tőlünk elpártola,
Egy pártfogó maradt csak
Velünk: ez Bem vala.
Oh Bem, vitéz vezérem,
Dicső tábornokom!
Lelked nagyságát könnyes
Szemekkel bámulom.
Nincsen szóm elbeszélni
Nagy hősiségedet,
Csak néma áhitattal
Szemléllek tégedet,
S ha volna ember, kit mint
Istent imádanék,
Meghajlanék előtted
Térdem, meghajlanék.
S nekem jutott a vészes
Dicsőség, hogy veled
Járjam be, oh vezérem,
A csatatéreket.
Te melletted lovaglék
A harcz veszélyiben,
A hol az élet pusztul
És a halál terem.
Sokan elhagytanak, te
Rendíthetetlen agg,

48. De úgy-e téged, úgy-e
Én el nem hagytalak?
S lépésid mind halálig
Követni is fogom,
Oh Bem, vitéz vezérem
Dicső tábornokom!
(Debreczen.)
Csatában.
A földön is harag,
Az égen is harag!
Kifolyt piros vér és
Piros napsugarak!
A lemenő nap oly
Vad bíborban ragyog!
Előre, katonák,
Előre, magyarok!
Komoly felhők közül
Bámul reánk a nap,
Rettentő szuronyok
Füstben csillámlanak,
A sűrü lomha füst
Sötéten gomolyog,
Előre, katonák,
Előre, magyarok!
Ropog, hosszan ropog
Csatárok fegyvere,
Ágyúk bömbölnek, hogy
Reng a világ bele;
Te ég, te föld, talán

49. Most összeomlotok!
Előre, katonák,
Előre magyarok!
Szilaj lelkesedés
Foly bennem, mint tüzár,
A vérszag és a füst
Megrészegíte már,
Előre rontok én,
Ha élek, ha halok!
Utánam, katonák,
Utánam, magyarok!
(Medgyes.)
Szeretlek, kedvesem!
Szeretlek, kedvesem,
Szeretlek tégedet,
Szeretem azt a kis
Könnyü termetedet,
Fekete hajadat,
Fejér homlokodat,
Sötét szemeidet,
Piros orczáidat,
Azt az édes ajkat,
Azt a lágy kis kezet,
Melynek érintése
Magában élvezet,
Szeretem lelkednek
Magas röpülését,
Szeretem szivednek
Tengerszem-mélységét,
Szeretlek, ha örülsz
És ha búbánat bánt,

50. Szeretem mosolyod
S könnyeid egyaránt,
Szeretem erényid
Tiszta sugárzását,
Szeretem hibáid
Napfogyatkozását,
Szeretlek, kedvesem,
Szeretlek tégedet,
A mint embernek csak
Szeretnie lehet.
Kivűled rám nézve
Nincs élet, nincs világ,
Te szövődöl minden
Gondolatomon át,
Te vagy érzeményem
Mind alva, mind ébren,
Te hangzol szivemnek
Minden verésében,
Lemondanék minden
Dicsőségrül érted,
S megszereznék érted
Minden dicsőséget,
Nekem nincsen vágyam,
Nincsen akaratom,
Mert a mit te akarsz,
Én is azt akarom,
Nincs az az áldozat
Mely kicsiny ne lenne
Éretted, hogyha te
Örömet lelsz benne,
S nincs csekélység, a mi
Gyötrelmesen nem sért,
Hogyha te fájlalod
Annak veszteségét,
Szeretlek kedvesem,
Szeretlek tégedet,

51. Mint ember még soha,
Soha sem szeretett!
Oly nagyon szeretlek,
Hogy majd bele halok,
Egy személyben minden,
De mindened vagyok,
A ki csak szerethet,
A ki csak él érted:
Férjed, fiad, atyád,
Szeretőd, testvéred,
És egy személyben te
Vagy mindenem nekem:
Lyányom, anyám, húgom,
Szeretőm, hitvesem!
Szeretlek szivemmel,
Szeretlek lelkemmel,
Szeretlek ábrándos
Őrült szerelemmel!…
És ha mindezért jár
Díj avvagy dicséret,
Nem engem illet az,
Egyedűl csak téged,
A dicséretet és
Díjat te érdemled,
Mert tőled tanultam
Én e nagy szerelmet!
(Debreczen.)
Szüleim halálára.
Végre megtörtént a
Rég várt viszontlátás!
Nincs köszönet benne,
Nincsen istenáldás.

52. Láttam jó atyámat… vagy csak koporsóját,
Annak sem látszott ki csak az egyik széle,
Ezt is akkor láttam kinn a temetőben,
Mikor jó anyámat tettük le melléje.
Sem atyám, sem anyám
Nincs többé, nem is lesz,
Kiket szoríthatnék
Dobogó keblemhez,
A kiknek csókolnám még lábok nyomát is,
Mert engemet szivök vérén neveltek fel,
Mert körülöveztek, mint a földet a nap
Lángoló sugári, szent szeretetökkel!
Oh atyám, oh anyám,
Miért távozátok?
Tudom, hogy áldás a
Sír nyugalma rátok,
De mi nektek áldás, az átok én nékem,
Melytül szegény szivem csakhogy nem reped meg!
Ha így bántok velem, ti, kik szerettetek,
Mit várjak azoktul, a kik nem szeretnek?
Itt hagytak, elmentek,
Nem is jőnek vissza!
Omló könnyeimet
Sírjok halma iszsza.
Folyjatok, könnyeim, folyj, te forró patak,
Szivárogj le hideg orczáikra halkan,
Hadd tudják meg rólad: árva gyermeköknek
Elhagyott lelkén mily égő fájdalom van!
De nem, de nem, inkább
Eltávozom innen,
Hogysem könnyem árja
Hozzájok lemenjen;

53. Mentsen isten tőle… édes jó szülőim
Hogyha megéreznék fiuknak keservét,
Szerető szivök a sírban sem pihenne,
Egy bú lenne nékik a hosszú öröklét.
Isten veletek hát…
Csak egyszer még, egyszer
Ölelkezem össze
Sírkeresztetekkel…
Olyan a két ága, mint két ölelő kar,
Mintha apám s anyám nyujtaná ki karját…
Tán fölemelkedtek halotti ágyokból,
Fiokat még egyszer ölelni akarják!
(Pest.)
A honvéd.
Isten után legszebb és a legszentebb név
A honvéd-nevezet!
Hogy ne iparkodnám hát megérdemelni
Ezt a szép, nagy nevet?
Iparkodom teljes szivembül, oh hazám,
Megvédeni téged,
Védni, fölemelni téged, s lesujtani
A te ellenséged!
Sokat lesujtottunk mi már, de meglehet,
Hogy még sok van hátra;
Hadd legyen, mit bánjuk? akárki, akárhány,
Karunk készen várja.
Jőjetek, szabadság hóhérlegényei,
Nem jöttök egyébért,
Csak hogy elvegyétek, a mit érdemeltek,
A véres halálbért.

54. Ti vagytok, zsiványok, kik országunk földét
Kipusztítottátok,
Fekvén rajta három száz esztendeig mint
Nehéz istenátok,
Hanem hiszen ezt a földet ti teszitek
Ujra termékenynyé:
Véreteket iszsza most, mint eddig itta
Saját népe könnyét!
Jőjetek! Ismerjük már egymást; ti futtok,
Mi űzünk titeket,
Űzünk, mint a szélvész a széjjelszaggatott
Rongyos fellegeket.
Jőjetek, hadd szúrjuk szíveiteket a
Szuronyunk hegyére,
Emlékezzetek a más világon is a
Honvédek nevére!
Honvéd vagyok; mikor nevemet kimondom
– Mi tagadás benne? –
Egy kis büszkeségnek ragyogó szikrája
Szökken a szemembe,
Egy vagyok a végre föltámadt magyar nép
Győző seregébül,
Én is segitettem koronát leütni
A király fejérül!
Hejh te király, hol van régi szép sereged,
Hol van régi fényed?
Hejh be tönkre tették a szegény honvédek,
E rongyos legények.
Rongyos vagyok, mint az ágrul szakadt, csakhogy
Mezítláb nem járok,
De több becsületem van még is, mint nektek,
Czifra uraságok.

55. Van bizony én nékem becsületem, de nagy,
Ország-világ előtt,
Még azok előtt is, kit szuronyom leszúrt,
Kit fegyverem lelőtt;
Még az ellenség is a kit csak magasztal
Egy szívvel egy szájjal,
Hogyne becsülné azt tulajdon nemzete,
Tulajdon hazája?
Rajta is leszek, hogy jó hírem-nevemet
Megtartsam halálig,
Vagy ha visszamék majd az otthonvalókhoz,
Elvigyem hazáig.
Az lesz ám az öröm, ha majd visszatérek
Az én enyéimhez,
És ide szorítom rendre valamennyit
Dobogó szivemhez!
Hejh az lesz ám a nap!… és még sem tudom, hogy
Mit szeretnék jobban:
Haza menni-e majd a harcz végén vagy itt
Elesni a hadban?
Társaim arczáról, a kik elhullanak,
Én arról azt látom:
A hazáért halni legnagyobb boldogság
Ezen a világon!
(Pest.)

57. TOLDALÉK.
* * *

58. I.
IFJÚKORI KISÉRLETEK.
1838.
* *
A hűtelenhez.
Esküszegte lyányka! emlékezzél
Arra, a midőn: »ah meg ne vessél« –
Így imádva téged kértelek, –
Légy kegyelmes én irántam, s szíved
Add nekem, ki csak te néked híved
Voltam és leszek, míg létezek.
Akkoron kérő keblemre dűlve,
Szerelem tüzétől fölhevűlve,
Ezt rebegték csalfa ajkaid:
»Hő szívem tiéd csak, drága lélek;
Esküszöm, hogy csak te néked élek;
Szünjenek könnyűid, bánatid.«
Én ez által istenülve lettem,
És keserves sorsom elfeledtem,
Emma, gyönge karjaid között.
Édenek nyilának én előttem,
Nem borúltak fellegek fölöttem,
Tőlem a bú mind elköltözött.
Ámde mily rövid volt boldogságom,

59. Mily korán eltűne mennyországom,
Én, ah, nem gondoltam volna azt!
Estem édenből nagy pusztaságra,
És juték keserves árvaságra,
Marja a bú szívem, és hervaszt.
Hő imádód s kedvelőd elhagytad,
Szívedet te ismét másnak adtad,
Engem elfeledve, csalfa lény!…
Jól van! én lemondok mindenről már,
Engemet kietlen puszta hely vár
Éjszak hó-födözte bús ölén.
Isten veled hát örökre, édes
Tárgya hő szivemnek, ah negédes
Csalfa Emma, isten véled hát!
Majd ha egykor értem, szinte árva,
Eljösz, éjszaknak havát bejárva,
Megleled hű múzsafid porát.
(Selmecz.)
1839.
* *
Szeberényi Lajos emlékkönyvébe.
Kegytelen a végzet; nem hagy sok időig örülni
Minket együttlétünk édeni napjainak,
Ámde az a földnek bármely részére ragadhat,
Érted ezen kebel ég, s lészen örökre hived.
(Selmecz.)

60. 1841.
* *
Lenke sírján.
Ádáz koporsó zordon éjjele!
Mivé tevél te oly sok örömet?
Mivé tevél te annyi szép reményt?
Mely zsenge a szülői szív felett,
Mely egy kéjparadicsomot igért,
Rózsás jövendő boldog karjain;
Kegyetlenűl mind elragadtad ezt,
Csak romja áll még: a keserv, a kin!
Oh a szülők! ha sorsok vészt zudít
Keblökbe dúlni és pusztítani:
Ki fog miként egy égnek angyala
Bút űzve rájok felmosolygani?
Nyugodjatok meg, szerető anya!
S te bús atyának gyászló kebele!
Kedves Lenkétek, ah, nem lészen ő
Temetve itt e sírnak mélyibe.
Hol a teremtő széke tündököl
Felhők felett a csillagezreden:
Tekintsetek fel, egy szelíd sugár
Leng onnan rátok csendes éjeken.
És e sugár az ő szép szelleme!
Az angyalok között ott múlat ő,

61. 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