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:

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

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.