31,19 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
A light but powerful way to build dynamic real-time applications using ReactJS
About This Book
- Learn how to develop powerful JavaScript applications using ReactJS
- Integrate a React-based app with an external API (Facebook login) while using React components, with the Facebook developer app
- Implement the Reactive paradigm to build stateless and asynchronous apps with React
Who This Book Is For
This book is for any front-end web or mobile-app developer who wants to learn ReactJS. Knowledge of basic JavaScript will give you a good head start with the book.
What You Will Learn
- Understand the ReactJS basics through an overview
- Install and create your first React component
- Refactor the ReactJS component using JSX
- Integrate your React application with the Facebook login and Graph API, then fetch data from your liked pages in Facebook and display them in a browser
- Handle UI elements events with React, respond to users input, and create stateful components
- Use some core lifecycle events for integration and find out about ES6 syntaxes in the React world
- Understand the FLUX architecture and create an application using FLUX with React
- Make a component more reusable with mixins and validation helpers and structure your components properly
- Explore techniques to test your ReactJS code
- Deploy your code using webpack and Gulp
In Detail
ReactJS, popularly known as the V (view) of the MVC architecture, was developed by the Facebook and Instagram developers. It follows a unidirectional data flow, virtual DOM, and DOM difference that are generously leveraged in order to increase the performance of the UI.
Getting Started with React will help you implement the Reactive paradigm to build stateless and asynchronous apps with React. We will begin with an overview of ReactJS and its evolution over the years, followed by building a simple React component. We will then build the same react component with JSX syntax to demystify its usage. You will see how to configure the Facebook Graph API, get your likes list, and render it using React.
Following this, we will break the UI into components and you'll learn how to establish communication between them and respond to users input/events in order to have the UI reflect their state. You'll also get to grips with the ES6 syntaxes.
Moving ahead, we will delve into the FLUX and its architecture, which is used to build client-side web applications and complements React's composable view components by utilizing a unidirectional data flow. Towards the end, you'll find out how to make your components reusable, and test and deploy them into a production environment. Finally, we'll briefly touch on other topics such as React on the server side, Redux and some advanced concepts.
Style and approach
The book follows a step-by-step, practical, tutorial approach with examples that explain the key concepts of ReactJS. Each topic is sequentially explained and contextually placed to give sufficient details of ReactJS.
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 188
Veröffentlichungsjahr: 2016
Ähnliche
Table of Contents
Getting Started with React
Getting Started 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: 1250416
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-78355-057-9
www.packtpub.com
Credits
Authors
Doel Sengupta
Manu Singhal
Danillo Corvalan
Reviewer
Ilan Filonenko
Commissioning Editor
Sarah Crofton
Acquisition Editor
Rahul Nair
Content Development Editor
Samantha Gonsalves
Technical Editor
Mohit Hassija
Copy Editor
Dipti Mankame
Project Coordinator
Sanchita Mandal
Proofreader
Safis Editing
Indexer
Priya Sane
Graphics
Kirk D'Penha
Production Coordinator
Shantanu N. Zagade
Cover Work
Shantanu N. Zagade
About the Authors
Doel Sengupta is a software programmer and is working in the industry for over 7 years, as a DevOps engineer and as a developer building enterprise level Web and mobile applications using RubyonRails and Rhomobile, Chef. Currently she is exploring the Javascript ecosystem. She has been a speaker in Ruby conferences. She finds interest in life sciences and has publications of her work in customised human joint prostheses design using Ansys & Mimics. She is an avid blogger (www.doels.net) writing about her technical and not-so-technical passions like culinary, photography, films. Follow her on twitter @doelsengupta.
Manu Singhal has been a programmer for 8 years and loves to code on Ruby and React. These days, he is busy cofounding a startup in e-commerce. In earlier roles, he has developed many enterprise and consumer based web/mobile applications and has also been a speaker at Ruby Conferences in India and the USA. He never misses a chance to play tennis and go hiking.
He has worked with Tata Consultancy Services and McKinsey & Company as a software developer and an architect.
He has contributed in books on Rhomobile and RubyMotion by Packt earlier.
Acknowledgments
We want to extend our heartfelt thanks to our family members and friends for their tireless support and belief. Our special thanks goes to Patrick Shaughnessy, Rohan Daxini and Kiprosh team, Abhishek Nalwaya, Akshat Paul, Naveen Rawat for taking out time to review the book. We also like to extend our gratitude to the ReactJS vibrant and ever enthusiastic online community, without which the vigorous task of writing such a book won't have been possible.
Thanks to the entire Packt publishing house especially Rahul Nair and team who helped in editing, proof reading and reviewing the book. As the famous saying goes "The journey is the reward", the very experience of writing this book is such a tremendous experience for us.
Danillo Corvalan is a software engineer who is passionate about software patterns and practices. He has a keen interest in the rapidly changing world of software development. He is quite insistent about the need of fast and reliable frameworks. He is originally from Brazil, now living in Amsterdam, the Netherlands. He loves biking a lot.
In Brazil, he worked on applications for the general public and lawyers, at the Court of Justice in his hometown city, Cuiabá/MT. Then, he moved to Florianópolis/SC, and worked at Bravi Software for developing hybrid and responsive web apps for education. Now, in Amsterdam, he is working at Vigour.io and helping to develop live multiscreen and responsive apps. From the web client-side perspective, in general, he has been in touch with technologies, such as vanilla JavaScript, jQuery, Backbone, and ReactJS.
For the past 5 years, Danillo has also worked with open source platforms and JavaScript on the server side (Node.js). He has played with React Native in order to develop native mobile applications with ReactJS.
About the Reviewers
Ilan is currently an undergraduate studying computer science in the College of Engineering at Cornell University. His interests in computer science stemmed from his early work in biophysics where he proposed a schematic that could potentially be used to synthetically create a proton transport Complex I and a virtual representation of the mitochondrion that can now function as the framework to synthesize a real biological system. Throughout his high school education and early years of college, he built various computational models and full-stack applications that showcased his expertise across a wide range of technologies from Mathematica to Ruby on Rails. In his first year of college, he cofounded and led the engineering team for four start-ups that have primarily disrupted their respective industries—MusicTech: Tunetap, MedTech: saund, FinTech: TheSimpleGroup, and FoodTech: Macrofuel. To this day, he contributes to these ventures as a project manager and continues to lead the backend engineering initiative for two Cornell engineering project teams. In addition to his academics and entrepreneurial endeavors, he works as a part-time software engineer for the R&D division at Bloomberg L.P., where he spent two summers researching and optimizing their distributed systems platform for large-scale data analytics.
www.PacktPub.com
eBooks, discount offers, and more
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?
Preface
Learning ReactJS is a light but powerful way to build fantastic UI components! This book will help you develop robust, reusable, and fast user interfaces with ReactJS. This book will ensure a smooth and seamless transition to the ReactJS ecosystem. The books is full of hands on real applications. From setup to implementation, testing, and deployment: discover the new frontier of front-end web development. ReactJS, popularly known as V of MVC architecture, is developed by the Facebook and Instagram developers. We will take a deep dive on the ReactJS world and explore the unidirectional data flow, virtual DOM, DOM difference, which ReactJS leverages in order to increase the performance of the UI. You will learn the key concepts of ReactJS in a step-by-step process. You will also learn ES6 syntaxes used in ReactJS for the future browsers, with the transpiling techniques to be used in order to support it in current browsers.
You will not only learn to apply and implement ReactJS concepts but also know how you can test JS-based applications and deploy them. In addition to this, you will also be developing a full-fledged application using Flux architecture. You will also learn about Redux, which lets you understand how you can manipulate the data in ReactJS applications easily, by introducing some limitations on the updates. With ample codes covering the concepts and their theoretical explanations coupled with screenshots of the application, you will gain a deep understanding of ReactJS.
What this book covers
Chapter 1, Getting Started with ReactJS, is a brief overview of React about where to download and how to make it work on your web page. It will demonstrate how to create your first React component.
Chapter 2, Exploring JSX and the ReactJS Anatomy, will show the same simple react component, created in the first chapter, built with the JSX syntax. It'll explain the purpose of JSX and demystify its usage. It will compare some older template techniques to JSX and try to clarify some common questions about it.
Chapter 3, Working with Properties, will make you start developing your own app. It will use Facebook Open Graph API. This will cover how to configure it, get your friends' list, and render it using React. After this, we're going to break UI into small components.
Chapter 4, Stateful Components and Events, covers components that have state, practices to communicate between them, and how to respond to 'users' input/events in order to have UI reflect this state. This chapter also covers how the state changes your React UI performance with the Virtual DOM.
Chapter 5, Component Life cycle and Newer ECMAScript in React, explores what is the life cycle of such a React component. Furthermore, we will also dig into the future ECMA Script syntaxes and few changes that the React community also used from version 0.13.0. For this, we will review some ES6 and ES7 features within the react library.
Chapter 6, Reacting with Flux, will explain the flux architecture, which is used to build client-side web applications. It complements React's composable view components by using a unidirectional data flow. There is an in-depth explanation of all the components of the FLUX architecture (view, stores, action, and dispatchers).
Chapter 7, Making Your Component Reusable, will cover React good practices and patterns. This includes practices to develop reusable components, how to structure your components hierarchically to a better data flow and how to validate your components behavior.
Chapter 8, Testing React components, will show how to test your React code as this has never been so easy in React. To do so, we're going to unit test our app developed so far.
Chapter 9, Preparing Your Code for Deployment, tells us that React comes with a transformer for JSX that works on the fly. This should never be deployed in production though. This chapter will talk you through the ways of building those files offline using node libs, such as Webpack and Gulp.
Chapter 10, What's Next, explains some other advanced concepts, such as react-router, react-ajax, hot-reloading, redux, isomorphic apps, and so on.
What you need for this book
The basic requirement is NodeJS followed by the installation of npm packages, like react, react-tools, express etc. Complete list chapter-wise is given below:
Chapter number
Software required (With version)
1
Nodejs 4.2.4
ReactJS:
JSXTransformer :
Install Python or httpster for serving webserver
Chrome / Mozilla ReactJS addon/extension for browser JS tool
2
npm install react-tools
3
Open-Graph JavaScript SDK: https://developers.facebook.com/docs/javascript
5
ReactJS version 0.13.0 or above
JSXTransformer (0.13.3)
8
Npm install -g -d chai mocha jest-cli babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-2 react-addons-test-utils
9
npm install -g webpack browserify
npm install --save-dev gulp gulp-concat gulp-uglify gulp-react gulp-html-replace
npm install --save-dev vinyl-source-stream browserify watchify reactify gulp-streamify
10
npm install express
npm install react-redux
Who this book is for
Whether you are new to the JS world or an experienced JS developer, this book will ensure to glide you seamlessly in the ReactJS ecosystem. You will not only know and implement the ReactJS concepts but also learn how can you test JS-based applications and deploy them. In addition to these, you will also be introduced to Flux and build applications based on Flux Application Architecture, which is not a full-fledged framework but an architecture. You will also learn about Redux, which lets you understand how you can easily manipulate the data in ReactJS applications, by introducing some limitations on the updates. With ample codes covering the concepts explained theoretically and screenshots of the application, you will have a simple yet deep understanding of ReactJS.
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:
Downloading the color images of this book
We also provide you with a PDF file that has color images of the screenshots/diagrams used in this book. The color images will help you better understand the changes in the output. You can download this file from https://www.packtpub.com/sites/default/files/downloads/GettingStartedwithReact_ColorImages.pdf.
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 ReactJS
In this chapter, we are going to look at an overview of ReactJS—what it is and some highlights on what this powerful and flexible library does. We'll also learn how to download and make it work in a small application. In this chapter, we will cover the following topics:
Introducing ReactJS
ReactJS is a JavaScript library, created by Facebook and Instagram, in order to build user interfaces (UIs) that can respond to users' input events along with creating and maintaining states. States are used to maintain changes to components, which will be covered in detail in later chapters. The page loads faster by comparing only the changed and the updated part of the web page (we will cover Virtual DOM (Document Object Model) in more detail in Chapter 4, Stateful Components and Events). React provides a one-way data flow that reduces complexity compared with a traditional data-binding system, which facilitates creating reusable and encapsulated components. We will also explore React data flow in Stateful Components and Events chapter and how to make your UI components more reusable in Chapter 7, Making Your Components Reusable.
ReactJS is not just another JavaScript library though many developers consider it to be the V of the MVC application. It drives you through building reusable components, rethinking your UI and best practices. Nowadays, performance and portability are vital to build user interfaces, mainly due to the large use of Internet-accessible devices and the fast-paced developmental phases of the projects. This can result in complex frontend code. The need for using a library that helps your code to grow in both performance and quality is really important; otherwise, you just end up writing big HTML files with UI logic everywhere that takes ages to modify and can compromise code quality. ReactJS encourages the best practices shown here:
ReactJS is a library that takes care of the UI (Views) differently from a framework. Let's say we are building a Single Page Application (SPA) and
