23,99 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Fachliteratur
- Sprache: Englisch
Building web applications with maintainable and performant user interfaces is a challenge that many have faced for more than a decade, but no one has risen to this challenge quite like React.js. Today React.js is used by Facebook, Instagram, Khan Academy, and Imperial College London, to name a few. Many new users recognize the benefits of React.js and adopt it in their own projects, forming a fast-growing community. The speed at which React.js has evolved promises a bright future for those who invest in learning it today.
React.js Essentials will take you on a fast-paced journey through building your own maintainable React.js application. Begin by exploring how you can create single and multiple user interface elements. Create stateless and stateful components and make them reactive, learn to interact between your components and lifecycle methods and gauge how to effectively integrate your user interface components with other JavaScript libraries. Delve deep into the core elements of the Flux architecture and learn how to manage your application using stores. Finish by going that extra mile with the Jest test framework, running multiple tests on your application and find solutions to scale it further without complexity.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 211
Veröffentlichungsjahr: 2015
Ähnliche
Table of Contents
React.js Essentials
React.js Essentials
Copyright © 2015 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: August 2015
Production reference: 1250815
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-78355-162-0
www.packtpub.com
Credits
Author
Artemij Fedosejev
Reviewers
Denis Radin
Sander Spies
Konstantin Tarkus
Commissioning Editor
Dipika Gaonkar
Acquisition Editor
Nikhil Karkal
Content Development Editor
Pooja Nair
Technical Editor
Pramod Kumavat
Copy Editor
Rashmi Sawant
Project Coordinator
Bijal Patel
Proofreader
Safis Editing
Indexer
Priya Sane
Graphics
Sheetal Aute
Production Coordinator
Shantanu N. Zagade
Cover Work
Shantanu N. Zagade
Foreword
Are you tired of writing jQuery callback soup? Does your blood boil when you need to write yet another template or configuration in your Angular app? Wondering why your application structure is so complex? If so, React.js is what you've been looking for. The declarative nature of React.js will help you build a UI for large applications with data that changes over time.
As a professional iOS and JavaScript frontend consultant, I always recommend that clients use the best technology available. With the latest push from Facebook, React.js has proven itself to be a solid choice to build maintainable and performant user interfaces that help our clients ship products and move fast. I was excited the moment I heard about React.js Essentials and even more excited about getting my hands on a copy.
Artemij Fedosejev, a veteran web developer and technical lead at a start-up company in London, demonstrates why a declarative programming style and one-way reactive data flow is often the best way to solve real-life programming problems. Whether you're working with consumer-facing applications or university research, React.js helps you build frontend UIs on both small and large scales. You'll never be lost in code again. Learn from Artemij's real-world experience in React.js Essentials, and you'll be creating user interfaces without increasing the complexity of your web application in no time.
This book has everything you need to get started with React.js. It guides you from the first steps down to the intricacies of Jest. The best way to learn is by doing, and throughout this book, you will work on a hands-on React.js project and learn how to build an application that receives and collects the latest photos from Twitter.
Software is constantly evolving and always moving forward. As developers, while practicing our craft, we always reach out to new horizons that stretch and improve our understanding of how great software should be built. Historically, software development and architecture has gone from structured programming to imperative programming. This made way for object-oriented programming (OOP) to become the de facto standard of software development today. Languages such as Java, Ruby, Objective-C, and many others have been built with the OOP paradigm in mind.
However, there was one rebel that embraced functional programming and it has gone down its own evolutionary path, which is JavaScript. React.js is a manifestation of this renewed way of thinking: "UI as a function of state." Facebook has put in a lot of effort into making the reactive approach accessible to us through its library. Unlike other popular frameworks that use templating systems, such as Ember.js and Angular.js, React.js is a UI library that uses a declarative style of programming to describe the UI state. You can think of React.js as the V in the conventional MVC architecture pattern, but it doesn't stop there. Facebook introduced Flux, a complementary application architecture that uses React's composable view components.
The latest approaches to solving programming problems have come full circle and are back to declarative programming. The rise of new paradigms, such as Reactive Extensions (Rx), Futures, and Promises, brings us back to thinking in terms of functions and using a declarative approach instead of OOP's imperative style. React.js incorporates some of these paradigms and React.js Essentials is your first step down this path, and I think you'll like where it takes you!
Alex Bush
Founder and Software Product Engineer at SmartCloud, Inc.
About the Author
Artemij Fedosejev is a technical lead living in London, United Kingdom. He is a self-taught web developer who has been a web developer since the early 2000s. Artemij earned his BSc in computer science from University College Cork, Ireland. He participated in the IGNITE Graduate Business Innovation Programme, where he built and launched a website that received the Most Innovative Project award.
After graduation, Artemij moved to London to help local start-up companies build their products. He worked with JavaScript, Node.js, HTML5, CSS3, and other modern web technologies. After gaining some experience in the start-up industry, Artemij was presented with an opportunity to join Imperial College, London, work on a research and development, project and take leadership in creating frontends for a couple of web applications in the public health space. He played a key role in creating frontend architecture using React.js and Flux for WGSA.net and Microreact.org. Artemij created a number of open source projects such as Snapkite Engine, Snapkite Stream Client, and other projects, which can be found on his GitHub account at https://github.com/fedosejev. He is also the author of the http://react.tips website.
I am deeply grateful to my family, who have always supported me in my efforts. With their love and dedication, I have always been able to focus on learning new things and, now, teaching them to others. Special thanks to Alex Bush for constantly expanding the way I think about software development. Also, this book would have been much harder to write without the support of Dr. David Aanensen and Mirko Menegazzo. And finally, I would like to thank my editors and the wonderful people at Packt Publishing for giving me the opportunity to share my knowledge and experience with other developers around the world.
About the Reviewers
Denis Radin is a frontend engineer working on embedded JavaScript in Liberty Global (Ziggo, UPC). He is passionate about UI experiments and performance optimization. He can be found launching JavaScript into space and the stratosphere in his spare time and believes that this is the sunrise of an interactive revolution. Denis maintains a blog at http://pixelscommander.com.
Konstantin Tarkus is a senior software engineer and technology mentor from St. Petersburg, Russia. He specializes in developing web and cloud applications, regularly contributes to the open source community (see the React Starter Kit and Babel Starter Kit projects on GitHub), and enjoys learning new technologies every day. You can find more information about him and reach out to him at www.codementor.io/koistya.
www.PacktPub.com
Support files, eBooks, discount offers, and more
For support files and downloads related to your book, please visit www.PacktPub.com.
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at <[email protected]> for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.
https://www2.packtpub.com/books/subscription/packtlib
Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can search, access, and read Packt's entire library of books.
Why subscribe?
Free access for Packt account holders
If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view 9 entirely free books. Simply use your login credentials for immediate access.
Preface
Today, the Web is different. The way we build for the Web is different. Faced by the challenges of dealing with unmaintainable imperative code produced by jQuery we had to look for new ways of managing the complexity of modern user interfaces. We needed a new user interface library that would help us build declarative, modular, fast, and scalable frontend applications using JavaScript.
Meet React.js—a JavaScript user interface library developed by Facebook. It brings profound ideas on how to work with the DOM, organize your application's data flow, and think about user interface elements as individual components. And yet, it's only a user interface library that makes no assumptions about the rest of your technology stack.
Combined with Flux, we get a powerful frontend architecture that makes sense not only to experienced developers, but also to those who're just starting their frontend journey.
Dear frontend developers of all experience levels, solving all kind of business challenges, in teams of all sizes with deadlines of all urgency levels... welcome to a better future!
Get ready to be surprised by the simplicity, predictability, and thoughtfulness of React.js.
What this book covers
Chapter 1, Installing Powerful Tools for Your Project, outlines the goal of this book and explains what modern tools you need to install in order to build React applications efficiently. It introduces each tool and provides step-by-step instructions on how to install each of them. Then, it creates a structure for the project that we'll be building in this book.
Chapter 2, Create Your First React Element, explains how to install React and introduces virtual DOM. Then, it explains what React Element is and how to create and render one with native JavaScript syntax. Finally, it introduces the JSX syntax and shows how to create React Elements using JSX.
Chapter 3, Create Your First React Component, introduces React components. It explains the difference between stateless and stateful React components and how to decide which one to use. Then, it guides you through the process of creating both kinds.
Chapter 4, Make Your React Components Reactive, explains how to solve a problem with React and walks you through the process of planning your React application. It creates a React component that encapsulates the entire React application that we build in this book. It explains the relationship between parent and child React components.
Chapter 5, Use Your React Components with Another Library, explores how to use third-party JavaScript libraries with your React components. It introduces React component's lifecycle, demonstrates how to use mounting methods, and creates new React components for our book's project.
Chapter 6, Update Your React Components, introduces React component lifecycle's updating methods. This covers how to use CSS styles in JavaScript. It explains how to validate and set the default component's properties.
Chapter 7, Build Complex React Components, focuses on building more complex React components. It explores the details of how to implement different React components and how to put them together into one coherent and fully functional React application.
Chapter 8, Test Your React Application with Jest, explains the idea of unit testing and how to write and run your unit tests with Jest. It also demonstrates how to test your React components. It discusses test suites, specs, expectations, and matchers.
Chapter 9, Supercharge Your React Architecture with Flux, discusses how to improve the architecture of our React application. It introduces the Flux architecture and explains the role of dispatcher, stores, and action creators.
Chapter 10, Prepare Your React Application for Painless Maintenance with Flux, explains how to decouple concerns in your React application with Flux. It refactors our React application to allow painless maintainability in the future.
What you need for this book
First of all, you need the latest version of a modern web browser, such as Google Chrome or Mozilla Firefox:
Second, you will need to install Git, Node.js, and npm. You will find detailed instructions on how to install and use them in Chapter 1, Installing Powerful Tools for Your Project.
Finally, you will need a code editor. I recommend Sublime Text (http://www.sublimetext.com). Alternatively, you can use Atom (https://atom.io), Brackets (http://brackets.io), Visual Studio Code (https://code.visualstudio.com), or any other editor of your preference.
Who this book is for
This book is intended for frontend developers who want to build scalable and maintainable user interfaces for the Web. Some core knowledge of JavaScript, HTML, and CSS is the only thing you need to know to start benefiting from the revolutionary ideas that React.js brings into the web development world. If you have previous experience with jQuery or Angular.js, then you will benefit from understanding how React.js is different and how to take advantage of integrating different libraries with it.
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.
To send us general feedback, simply e-mail <[email protected]>, and mention the book's title in the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.
Customer support
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Downloading the example code
You can download the example code files from your account at http://www.packtpub.com for all the Packt Publishing books you have purchased. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
For this book, the source code files can be downloaded or forked from the following GitHub repository as well: https://github.com/fedosejev/react-essentials
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.
To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.
Piracy
Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors and our ability to bring you valuable content.
Questions
If you have a problem with any aspect of this book, you can contact us at <[email protected]>, and we will do our best to address the problem. You can also create a new issue on GitHub repository for this book at https://github.com/fedosejev/react-essentials/issues.
Chapter 1. Installing Powerful Tools for Your Project
Here is a great quote by Charles F. Kettering:
My interest is in the future because I am going to spend the rest of my life there.
This brilliant inventor has left software engineers with the single most important piece of advice way before we even started thinking how to write software. Yet, half a century later, we're still figuring out why we end up with spaghetti code or the "spaghetti mental model".
Have you ever been in a situation where you inherit code from a previous developer and spend weeks trying to understand how everything works because no blueprints were made available, and the pseudo-self-explanatory-code became too hard to debug? Better yet, the project keeps growing and so does its complexity. Making breaking changes is dangerous and no one wants to touch that "ugly" legacy code. Rewriting the whole codebase is way too expensive, so the current one is supported by introducing new bug fixes and patches every day. It is a well-known fact that the cost of maintaining software is way higher than the original cost of developing it.
What does it mean to write software for the future, today? I think it boils down to creating a simple mental model that doesn't change, no matter how big your project becomes over time. When the size of your project grows, the complexity always stays the same. This mental model is your blueprint, and once you understand it you will understand how your whole piece of software works.
If you take a look at modern web development, and in particular, the frontend development, you'll notice that we live in exciting times. Internet companies and individual developers are tackling problems of speed and cost of development versus code and user experience quality.
In 2013, Facebook released React—an open source JavaScript library for building user interfaces. You can read more about it at http://facebook.github.io/react/. In early 2015, Tom Occhino from Facebook summarized what makes React so powerful:
React wraps an imperative API with a declarative one. React's real power lies in how it makes you to write code.
Most of you know that a declarative style of programming results in less code. It tells a computer what to do without specifying how, while an imperative style of programming describes how to do it. JavaScript's call to the DOM API is an example of imperative programming. jQuery is another such example.
Facebook used React in production for years, along with Instagram and other companies. It works for small projects too; here is an example of a shopping list built with React: http://fedosejev.github.io/shopping-list-react. I think React is one of the best JavaScript libraries used for building user interfaces that is available for developers today.
My goal is for you to understand the fundamental principles of React. To achieve this, I will introduce you to one React concept at a time, explain it, and show how you can apply it. Step by step we'll build a real-time web application, raise important questions along the way, and discuss solutions that React provides us with.
We will learn about Flux, which implements a unidirectional flow of data. Together with Flux and React, we'll create a predictable and manageable code base that you will be able to expand by adding new features, without scaling its complexity. The mental model of how your web application works will stay the same no matter how many new features you add later on.
As with any new technology, there are things that work very differently from the way that you're used to. React is not an exception. In fact, some of the core concepts of React might look counter-intuitive, thought provoking, or even a step backward. Don't rush to any conclusions. As you would expect, there are very good reasons behind how React works, and these reasons come from experienced Facebook engineers who build and use React in production in business-critical applications. My advice to you is to keep your mind open while learning React, and I believe that, at the end of this book, these new concepts will settle in and make great sense to you.
Please join me in this journey of learning React and following Charles F. Kettering's advice. Let's take care of our future!
Approaching our project
I firmly believe that the best motivation for learning new technology is a project that excites you and that you can't wait to build. As an experienced developer, you've probably already built a number of successful commercial projects that share certain product features, design patterns, and even target audiences. In this book, I want you to build a project that feels like a breath of fresh air. A project which you most likely wouldn't build in your day-to-day work. It has to be a fun endeavor, which not only educates you but also satisfies your curiosity and stretches your imagination. Yet, guessing that you're a busy professional, this project shouldn't be a time consuming, long-term commitment for you either.
Enter Snapterest—a web application that allows you to discover and collect public photos posted on Twitter. Think of it as Pinterest (www.pinterest.com) with the only source of pictures being Twitter. We will implement a fully functional website with the following core functionalities:
