ReactJS Become a professional in web app development By Todd Abel Copyright©2016 Todd Abel All Rights Reserved Copyright © 2016 by Todd Abel. All rights reserved. No part of this publication may be reproduced, distributed, or transmitted in any form or by any means, including photocopying, recording, or other electronic or mechanical methods, without the prior written permission of the author, except in the case of brief quotations embodied in critical reviews and certain other noncommercial uses permitted by copyright law. Table of Contents Introduction Chapter 1- Handling of Complex States Chapter 2- Creating a Scrollable Table In React Chapter 3- Rendering on the Server-Side Chapter 4- Creating a Chrome Extension Chapter 5- Data Visualization in React.js Chapter 6- Showing Exceptions Chapter 7- Testing React Components Chapter 8- Building a Sliding Menu Chapter 9- Creating a Dropdown Chapter 10- React JS and Flux Architecture Conclusion Disclaimer While all attempts have been made to verify the information provided in this book, the author does assume any responsibility for errors, omissions, or contrary interpretations of the subject matter contained within. The information provided in this book is for educational and entertainment purposes only. The reader is responsible for his or her own actions and the author does not accept any responsibilities for any liabilities or damages, real or perceived, resulting from the use of this information. The trademarks that are used are without any consent, and the publication of the trademark is without permission or backing by the trademark owner. All trademarks and brands within this book are for clarifying purposes only and are the owned by the owners themselves, not affiliated with this document. Introduction React is a very useful component when creating web applications. This book is an excellent guide for you to learn this JavaScript library, whether you are a beginner or an expert. Chapter 1- Handling of Complex States Consider a situation in which you have some projects displayed on a table. After clicking on any of the displayed projects, you should get a model which will make it possible for you to change the data of the model. let t = new Baobab({ projects: [{ id: 0, title: ‘projectname’ }, { id: 1, title: ‘bar’ }], selectedProject: null }); Consider the situation in which the user clicks on a project and then the data for the project is triggered: import Baobab from ‘./t.js’; let actions = { selectProject(index) { t.set(‘selectedProject’, t.get(‘projects’)[index]); } }; export default actions; Note that the project has been referenced as the first project in the projects array. This is a problem which might get us into trouble. This is because any change made to an object or an array will change the reference on the Baobab. With the Baobab, one can easily determine whether an object has changed or not. A clone can be created so as to solve this problem. This is shown below: let Baobab = new Baobab ({ projects: [{ id: 0,