39,59 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
Get up and running with ReactJS by developing five cutting-edge and responsive projects
About This Book
- Create pragmatic real-world applications while learning React and its modern developer tools
- Build sustainable user interfaces by transforming data into components of UI
- Learn how to generate reusable ReactJS components effectively
Who This Book Is For
If you are a web developer and wish to learn ReactJS from scratch, then this book is tailor-made for you. Good understanding of Javascript, HTML, and CSS is expected.
What You Will Learn
- Create, reuse, and compose React components using JSX
- Share data between various React components and techniques for data flow within a React app
- Handle user interactions with the help of event handlers and dynamic components
- Set up and use various next generation ES2015/ES6 features with React
- Understand the performance and immutability features of React using React add-ons
- Learn the techniques of Animation in React
- Use data stores to store model-related data and information
- Create a flux-based React application by using Reflux library
In Detail
ReactJS is an open-source JavaScript library that brings the power of reactive programming to web applications and sites. It aims to address the challenges encountered in developing single-page applications, and is intended to help developers build large, easily scalable and changing web apps.
Starting with a project on Open Library API, you will be introduced to React and JSX before moving on to learning about the life cycle of a React component. In the second project, building a multi-step wizard form, you will learn about composite dynamic components and perform DOM actions. You will also learn about building a fast search engine by exploring server-side rendering in the third project on a search engine application. Next, you will build a simple frontpage for an e-commerce app in the fourth project by using data models and React add-ons. In the final project you will develop a complete social media tracker by using the flux way of defining React apps and know about the best practices and use cases with the help of ES6 and redux.
By the end of this book, you will not only have a good understanding of ReactJS but will also have built your very own responsive frontend applications from scratch.
Style and approach
An easy-to-follow program to learn ReactJS with the help of real world projects. Each topic is explained within the context of a project and provides plenty of tips and tricks for using ReactJS.
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 239
Veröffentlichungsjahr: 2016
Ähnliche
Table of Contents
ReactJS by Example - Building Modern Web Applications with React
ReactJS by Example - Building Modern Web Applications with React
Copyright © 2016 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 authors, 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: April 2016
Production reference: 1110416
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-78528-964-4
www.packtpub.com
Credits
Authors
Vipul A M
Prathamesh Sonpatki
Reviewers
Muhammad Arslan
Pawel Czekaj
Matt Goldspink
Commissioning Editor
Dipika Gaonkar
Acquisition Editor
Larissa Pinto
Content Development Editor
Mamata Walkar
Technical Editor
Bharat Patil
Copy Editor
Vibha Shukla
Project Coordinator
Kinjal Bari
Proofreader
Safis Editing
Indexer
Monica Ajmera Mehta
Graphics
Disha Haria
Production Coordinator
Arvindkumar Gupta
Cover Work
Arvindkumar Gupta
About the Authors
Vipul A M is Director at BigBinary. He is part of Rails Issues Team, and helps triaging issues. His spare time is spent exploring and contributing to many Open Source ruby projects, when not dabbling with React JS.
Vipul loves Ruby's vibrant community and helps in building PuneRb, is the founder of and runs RubyIndia Community Newsletter and RubyIndia Podcast, and organizes Deccan Ruby Conference in Pune.
He can be found @vipulnsward on twitter and on his site http://vipulnsward.com.
Prathamesh Sonpatki is Director at BigBinary. He builds web applications using Ruby on Rails and ReactJS. He loves learning new programming languages and contributing to open source.
He can be found @_cha1tanya on twitter.
About the Reviewers
Muhammad Arslan has been working in different roles: Senior IT-Developer, IT-Consultant, TechLead and Architect. He has vast experience of frontend and backend technologies and agile development. He has two master's degrees in Software Engineering and E-commerce. He has done his master's thesis in Usability and User Experience. He is also Oracle Certified Professional, Java Programmer (OCPJP).
He is currently working in biggest Nordic bank Nordea as Senior IT-Developer. He has previously worked in Digital River World Payments on bank gateway/iso connections and designed user interfaces. He worked in Accedo on SmartTV applications and application management products as well.
You can follow him on Twitter @arslan_mecom or you can check out his blog http://www.jhear.com/.
I would like to thank my mother, father (late), and my better half, for their continuous support for making me successful in my career.
Pawel Czekaj has a bachelor's degree in computer science. He is a web developer with strong backend (PHP, Java, MySQL, and Unix system) and frontend (AngularJS, Backbone, React.js, and jQuery) experience. He loves JavaScript, React.js, and Angular.js. Previously, he worked as a senior full stack web developer. Currently, he is working as a frontend developer for Cognifide and Toptal. You can contact him at http://yadue.eu.
Matt Goldspink is currently the lead engineer at Vlocity, Inc., based in San Francisco, working on their mobile and web platforms. Prior to this, he has held various roles at startups, banks, and also spent time as a technology trainer. Matt was the lead developer and architect for the award-winning mobile web platform for one of the world's leading investment banks.
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
ReactJS is an open source JavaScript library that intends to bring aspects of reactive programming to web applications and sites. It aims to address the challenges encountered in developing single-page applications. React's core principles are declarative code, efficiency, flexibility, and improved developer experience.
What better way of learning a new technology than diving deep into it while working on something? This book will guide you with the help of different projects, each focusing on the specific features of React in your journey of mastering React. We will cover everything from JSX, add-ons, performance, and Redux.
Let the journey commence!
What this book covers
Chapter 1, Getting Started with React, covers the basics of ReactJS by building a simple app with static data. We will study top-level API of React and its basic building blocks.
Chapter 2, JSX in Depth, does a deep dive into JSX and how to use it with React. We will also look at a few gotchas that need to be considered while working with JSX.
Chapter 3, Data Flow and Life Cycle Events, focuses on data flow between React components and complete life cycle of a component.
Chapter 4, Composite Dynamic Components and Forms, shows how to build composite dynamic components using React with more focus on forms while building a form wizard application.
Chapter 5, Mixins and the DOM, covers mixins, refs, and how React interacts with DOM.
Chapter 6, React on the Server, uses React on the server side to render HTML and learn more about what server-side rendering brings to the table by building a search application based on Open Library Books API.
Chapter 7, React Addons, continues to use the search application and enhances it with various add-ons provided with React. We will study the use cases of these add-ons.
Chapter 8, Performance of React Apps, discusses everything about the performance of the React app by going deep into how React renders the content and helps in making our apps faster.
Chapter 9, React Router and Data Models, helps in building a Pinterest-style application and discusses routing using react-router. We will also discuss how various data models can be used with React, including Backbone models.
Chapter 10, Animation, focuses on making our Pinterest app more interactive with animations and how to use them effectively with React.
Chapter 11, React Tools, takes a step back and discusses various tools that we will use in our journey while working with React. We will study the tools such as Babel, ESLint, React dev tools, and Webpack.
Chapter 12, Flux, explains how to build a social media-tracker application while using the Flux architecture. We will discuss the need for the Flux architecture and what it brings to the table.
Chapter 13, Redux and React, covers using Redux—a popular state management library—to enhance the social media-tracker application further in order to use Redux-based state management.
What you need for this book
You will need to have a modern web browser, such as Chrome or Firefox, to run the examples from the book. You will also need to have Node.js—https://nodejs.org/en/—installed with the npm package manager set up. Additional setup instructions can be found at https://github.com/bigbinary/reactjs-by-example.
Who this book is for
If you are a web developer and wish to learn ReactJS from scratch, then this book is tailor-made for you. Good understanding of JavaScript, HTML, and CSS is expected.
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 for this book from your account at http://www.packtpub.com. 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.
You can download the code files by following these steps:
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
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.
Chapter 1. Getting Started with React
Web development has seen a huge advent of Single Page Application (SPA) in the past couple of years. Early development was simple—reload a complete page to perform a change in the display or perform a user action. The problem with this was a huge round-trip time for the complete request to reach the web server and back to the client.
Then came AJAX, which sent a request to the server, and could update parts of the page without reloading the current page. Moving in the same direction, we saw the emergence of the SPAs.
Wrapping up the heavy frontend content and delivering it to the client browser just once, while maintaining a small channel for communication with the server based on any event; this is usually complemented by thin API on the web server.
The growth in such apps has been complemented by JavaScript libraries and frameworks such as Ext JS, KnockoutJS, BackboneJS, AngularJS, EmberJS, and more recently, React and Polymer.
Let's take a look at how React fits in this ecosystem and get introduced to it in this chapter.
In this chapter, we will cover the following topics:
What is React?
ReactJS tries to solve the problem from the View layer. It can very well be defined and used as the V in any of the MVC frameworks. It's not opinionated about how it should be used. It creates abstract representations of views. It breaks down parts of the view in the Components. These components encompass both the logic to handle the display of view and the view itself. It can contain data that it uses to render the state of the app.
To avoid complexity of interactions and subsequent render processing required, React does a full render of the application. It maintains a simple flow of work.
React is founded on the idea that DOM manipulation is an expensive operation and should be minimized. It also recognizes that optimizing DOM manipulation by hand will result in a lot of boilerplate code, which is error-prone, boring, and repetitive.
React solves this by giving the developer a virtual DOM to render to instead of the actual DOM. It finds difference between the real DOM and virtual DOM and conducts the minimum number of DOM operations required to achieve the new state.
React is also declarative. When the data changes, React conceptually hits the refresh button and knows to only update the changed parts.
This simple flow of data, coupled with dead simple display logic, makes development with ReactJS straightforward and simple to understand.
Who uses React? If you've used any of the services such as Facebook, Instagram, Netflix, Alibaba, Yahoo, E-Bay, Khan-Academy, AirBnB, Sony, and Atlassian, you've already come across and used React on the Web.
In just under a year, React has seen adoption from major Internet companies in their core products.
In its first-ever conference, React also announced the development of React Native. React Native allows the development of mobile applications using React. It transpiles React code to the native application code, such as Objective-C for iOS applications.
At the time of writing this, Facebook already uses React Native in its Groups and Ads Manager app.
In this book, we will be following a conversation between two developers, Mike and Shawn. Mike is a senior developer at Adequate Consulting and Shawn has just joined the company. Mike will be mentoring Shawn and conducting pair programming with him.
When Shawn meets Mike and ReactJS
It's a bright day at Adequate Consulting. Its' also Shawn's first day at the company. Shawn had joined Adequate to work on its amazing products and also because it uses and develops exciting new technologies.
After onboarding the company, Shelly, the CTO, introduced Shawn to Mike. Mike, a senior developer at Adequate, is a jolly man, who loves exploring new things.
"So Shawn, here's Mike", said Shelly. "He'll be mentoring you as well as pairing with you on development. We follow pair programming, so expect a lot of it with him. He's an excellent help."
With that, Shelly took leave.
"Hey Shawn!" Mike began, "are you all set to begin?"
"Yeah, all set! So what are we working on?"
"Well we are about to start working on an app using https://openlibrary.org/. Open Library is collection of the world's classic literature. It's an open, editable library catalog for all the books. It's an initiative under https://archive.org/ and lists free book titles. We need to build an app to display the most recent changes in the record by Open Library. You can call this the Activities page. Many people contribute to Open Library. We want to display the changes made by these users to the books, addition of new books, edits, and so on, as shown in the following screenshot:
"Oh nice! What are we using to build it?"
"Open Library provides us with a neat REST API that we can consume to fetch the data. We are just going to build a simple page that displays the fetched data and format it for display. I've been experimenting and using ReactJS for this. Have you used it before?"
"Nope. However, I have heard about it. Isn't it the one from Facebook and Instagram?"
"That's right. It's an amazing way to define our UI. As the app isn't going to have much of logic on the server or perform any display, it is an easy option to use it."
"As you've not used it before, let me provide you a quick introduction."
"Have you tried services such as JSBin and JSFiddle before?"
"No, but I have seen them."
"Cool. We'll be using one of these, therefore, we don't need anything set up on our machines to start with."
"Let's try on your machine", Mike instructed. "Fire up http://jsbin.com/?html,output"
"You should see something similar to the tabs and panes to code on and their output in adjacent pane."
"Go ahead and make sure that the HTML, JavaScript, and Output tabs are clicked and you can see three frames for them so that we are able to edit HTML and JS and see the corresponding output."
"That's nice."
"Yeah, good thing about this is that you don't need to perform any setups. Did you notice the Auto-run JS option? Make sure its selected. This option causes JSBin to reload our code and see its output so that we don't need to keep saying Run with JS to execute and see its output."
"Ok."
Requiring React library
"Alright then! Let's begin. Go ahead and change the title of the page, to say, React JS Example. Next, we need to set up and we require the React library in our file."
"React's homepage is located at http://facebook.github.io/react/. Here, we'll also locate the downloads available for us so that we can include them in our project. There are different ways to include and use the library.
We can make use of bower or install via npm. We can also just include it as an individual download, directly available from the fb.me domain. There are development versions that are full version of the library as well as production version which is its minified version. There is also its version of add-on. We'll take a look at this later though."
"Let's start by using the development version, which is the unminified version of the React source. Add the following to the file header:"
"Done".
"Awesome, let's see how this looks."
Back to work
"That's good to start, Shawn. Let's move back to the task of building our app using Open Library's Recent changes API now. We already have a basic prototype ready without using ReactJS."
"We will be slowly replacing parts of it using ReactJS."
"This is how the information is displayed right now, using server-side logic, as follows:"
"First task that we have is to display the information retrieved from the Open Library Recent Changes API in a table using ReactJS similar to how it's displayed right now using server-side."
"We will be fetching the data from the Open Library API similar to the following:"
