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.
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.
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 |
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.
In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.
Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "Once Sublime editor is installed, go to the installed directory, and you can open Sublime from the terminal by running subl in the directory that your are in and you will open the files of the current directory in sublime."
A block of code is set as follows:
<!DOCTYPE html> <html> <head> <script src="fb-react-0.12.2.js"></script> </head> <body> <div id="root"></div> </body> </html>
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
function loadUserAndLikes () {
FB.api('/me', function (userResponse) {
React.render(<UserDetails userDetails={userResponse} />, document.getElementById('user'));
var fields = { fields: 'category,name,picture.type(normal)' };
FB.api('/me/likes', fields, function (likesResponse) {
React.render(<UserLikesList list={likesResponse.data} />, document.getElementById('main'));
});
});
}Any command-line input or output is written as follows:
sudo npm install jest-cli –save-dev
New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: " I've experienced using Atom on a MacOS X Yosemite is that the font quality looks poorer than that in Sublime Text. If you face it, you just need to uncheck the Use Hardware Acceleration option in Atom's settings.."
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 <feedback@packtpub.com>, 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.
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.
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:
Log in or register to our website using your e-mail address and password.
Hover the mouse pointer on the SUPPORT tab at the top.
Click on Code Downloads & Errata.
Enter the name of the book in the Search box.
Select the book for which you're looking to download the code files.
Choose from the drop-down menu where you purchased this book from.
Click on Code Download.
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
WinRAR / 7-Zip for Windows
Zipeg / iZip / UnRarX for Mac
7-Zip / PeaZip for Linux
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.
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 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 <copyright@packtpub.com> with a link to the suspected pirated material.
We appreciate your help in protecting our authors and our ability to bring you valuable content.
If you have a problem with any aspect of this book, you can contact us at <questions@packtpub.com>, and we will do our best to address the problem.
