DOCSLIB.ORG

Mastering Ext JS

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Mastering Ext JS Mastering Ext JS Learn how to build powerful and professional applications by mastering the Ext JS framework Loiane Groner BIRMINGHAM - MUMBAI Mastering Ext JS Copyright © 2013 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 author, 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: July 2013 Production Reference: 1010713 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK.. ISBN 978-1-78216-400-5 www.packtpub.com Cover Image by Asher Wishkerman ([email protected]) Credits Author Project Coordinator Loiane Groner Hardik Patel Reviewers Proofreader Aafrin Chris Smith Vincenzo Ampolo Yiyu Jia Indexer Hemangini Bari Joel Watson Graphics Acquisition Editor Abhinash Sahu Edward Gordon Production Coordinator Lead Technical Editor Shantanu Zagade Anila Vincent Cover Work Technical Editors Shantanu Zagade Arvind Koul Worrell Lewis Vaibhav Pawar Amit Ramadas About the Author Loiane Groner lives in São Paulo, Brazil and has over eight years of software development experience. While at university, she demonstrated great interest in IT. She worked as an assistant teacher for two and a half years, teaching algorithms, data structures, and computing theory. She represented her university at the ACM International Collegiate Programming Contest – Brazilian Finals (South America Regionals) and also worked as Student Delegate of SBC (Brazilian Computing Society) for two years. She won a merit award in her senior year for being one of the top three students with better GPAs in the Computer Science department and also graduated with honors. She has worked at multinational companies such as IBM. Her areas of expertise include Java SE, Java EE, and also Sencha technologies (Ext JS and Sencha Touch). She is now working as Software Development Manager at a financial institution, where she manages overseas solutions. She also works as an independent Sencha consultant and coach. Loiane is also the author of Ext JS 4 First Look and Sencha Architect App Development, Packt Publishing. She is passionate about Sencha and Java, and is the leader of CampinasJUG/SouJava Campinas (Campinas Java Users Group) and coordinator of ESJUG (Espirito Santo Java Users Group) , both Brazilian JUGs. She also contributes to the software development community through her blogs: http://loianegroner.com (English) and http://loiane.com (Portuguese-BR), where she writes about IT careers, Ext JS, Sencha Touch, Sencha Architect, Java, and general development notes and also publishes screencasts. If you want to keep in touch, you can find Loiane on Facebook (https://www.facebook.com/loianegroner) and Twitter (@loiane). Acknowledgement I would like to thank my parents for giving me education, guidance, and advice, through all these years, and helping me be a better human being and professional. A very special thank you to my husband, for being patient and supportive and giving me encouragement. Also a big thanks to my friends and readers for all the support. About the Reviewers Aafrin is a self-taught programmer who has a cyber security and digital forensic background. He has been actively developing and prototyping web applications since 2003. He codes in various programming languages including C++, Java, PHP, ASP, VB, VB.net, and has also worked with frameworks such as EXTJS, CakePHP, CodeIgniter, and Yii. In his free time, he blogs at www.aafrin.com and researches on the computer security/computer forensic field. Vincenzo Ampolo has a Master's degree in Computer Systems Engineering at Politecnico di Milano, Italy. He has been a freelancer for over six years. His passion for technology started when he was nine, when he assembled his first computer. By 12 he learned the BASIC language. At 15 he learned C, then Python and Javascript. He is a free software evangelist and has been using the GNU/Linux system from the age of 14. He created the first usermode bootsplash system for Linux systems when he was 17. He moved to the silicon valley a year ago. He is a philanthropist and believes in the power of software communities and has helped in organizing many FOSS-related conferences such as Linux day and the Ubuntu release party. To all the people who believed in me. Yiyu Jia has been developing web applications since 1996. He worked as a technical leader and solution architect on various projects with Java and PHP as the major backend languages. He also has professional experience on interactive TV, middleware, and home gateway projects. He is especially interested in designing multichannel web applications. He is also the main founder of the novel data mining research topic—Promotional Subspace Mining (PSM), which aims at finding out useful information from subspaces on a very large data set. He is now working on Big Data technologies. He can be reached at his blog and website. They are http://yiyujia.blogspot. com and http://www.idatamining.org respectively. Joel Watson is a web enthusiast, working for the past eight years in website design and development. He loves exploring web technologies of all sorts, and particularly enjoys creating web experiences that leverage the newest features of HTML5 and its related technologies. When he's not coding, Joel enjoys spending time with his wife and two daughters, playing guitar, and watching cheesy sci-fi and anime. www.PacktPub.com Support files, eBooks, discount offers and more You might want to visit www.PacktPub.com for support files and downloads related to your book. 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. http://PacktLib.PacktPub.com Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can access, read and search across Packt's entire library of books. Why Subscribe? • Fully searchable across every book published by Packt • Copy and paste, print and bookmark content • On demand and accessible via web browser 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 nine entirely free books. Simply use your login credentials for immediate access. Table of Contents Preface 1 Chapter 1: Getting Started 7 Installing the required software 8 Presenting the application and its capabilities 10 The splash screen 10 The login screen 11 The main screen 11 User control management 13 MySQL table management 13 Content management control 14 The e-mail client module 16 Creating the structure of the application using MVC 17 A quick word about MVC 17 Creating the application 18 Creating the loading page 25 Summary 32 Chapter 2: The Login Page 33 The Login screen 33 Creating the Login screen 34 Client-side validations 38 Creating custom VTypes 40 Adding the toolbar with buttons 40 Running the code 42 Using itemId versus id – Ext.Cmp is bad! 43 Creating the login controller 44 Adding the controller to app.js 45 Listening to the button click event 46 Cancel button listener implementation 51 Table of Contents Submit button listener implementation 52 Creating the User and Groups tables 56 Handling the login page on the server 57 Connecting to the database 57 login.php 58 Handling the return of the server – logged in or not? 60 Success versus failure 60 Enhancing the Login screen 64 Applying a loading mask on the form while authenticating 65 Form submit on Enter 65 The Caps Lock warning message 66 Summary 71 Chapter 3: Logout and Multilingual 73 The base of the application 74 The logout capability 78 Refactoring the login and logout code 79 Handling the logout capability on the server 82 The client-side activity monitor 82 The multilingual capability 84 Creating the change language component 84 Creating the translation files 87 Applying the translation on the application's components 88 HTML5 local storage 89 Handling the language change in real-time 90 Locale – translating Ext JS 93 Summary 94 Chapter 4: Advanced Dynamic Menu 95 Creating the dynamic menu 96 The database model – groups, menus, and permissions 97 Creating the menu models – hasMany association 99 Creating the store – loading the menu from the server 102 Handling the dynamic menu on the server 102 Creating the menu with Accordion panel and Tree panel 106 Replacing the central container on the viewport 107 Creating the menu controller-side 108 Rendering
Load more

Recommended publications
  • Sencha Touch and Ext JS Developer Description
    Sencha Touch and Ext JS Developer Description: Health Outcomes Worldwide (HOW), a diverse and rapidly growing Canadian company seeks a motivated developer to work with an agile virtual team creating cutting-edge web and mobile applications for use by healthcare professionals. HOW provides solutions used by nurses in healthcare environments across Canada. The mobile application is a hybrid HTML5 (Sencha Touch)/Cordova solution designed for tablet devices (iOS and Android). Plans for a revamped browser-based solution (using ExtJS 5) are also in development. The selected developer will play an integral role in both mobile and desktop solution design and development using Sencha tools. The ideal candidate will have: • 4+ years of extensive experience with Sencha Ext JS framework and 2+ experience with Sencha Touch framework. • In-depth knowledge of javascript. • Experience building iOS, Android, Windows and Blackberry apps with PhoneGap/ Cordova platform. • Solid knowledge of HTML5, CSS3, EcmaScript 6 and their integration in a standards-based fashion with each other. • Proficiency with the DOM and asynchronous event programming model. • Experience with cross-platform (PC/Mac, desktop, laptop, tablet) and cross-browser (IE, Firefox, Chrome, Safari) development. • Experience with AJAX, JSON and RESTful web services. • Server-side development with ASP.NET WebForms, ASP.NET MVC and Node.js. • Database design and programming using MS SQL Server and SQLite. • Familiarity with Design Patterns, particularly Model-View-Controller (MVC). • Experience with mobile development and Touch interfaces. • Solid understanding and experience with Agile software development methodologies. Qualified, interested parties should submit a resume to [email protected].
    [Show full text]
  • 85324630.Pdf
    About NetTantra NetTantra is a creative technology and design company based out of India, US and UK. We provide web based solutions and mobile solutions to various industries like manufacturing, consulting, education. We have expertise in various sectors of the web including an array of server-side languages, OpenSource CMS/Blog frameworks, Linux/UNIX system administration, production server backup and recovery solutions, cloud infrastructure set-up and much more. Our expertise in providing WordPress based solutions has been acclaimed by many of our clients and the OpenSource community. We also provide cloud based solutions like migrating existing applications and building cloud applications for public or private cloud setups. We are known among our clients for on-time delivery and extraordinary quality of service. In mobile based solutions, we have expertise in developing native applications for iOS and Android platforms. We also develop cross-platform mobile applications using Sencha Touch and jQuery Mobile frameworks. 2 of 14 pages Why Hire Us ✔ Technology ◦ We have expertise in the most cutting edge tools and technologies used in the industry with special focus on OpenSource Technologies ◦ We pay special attention to web and network security for all projects ◦ Our team follows highly optimized project delivery life cycles and processes ✔ Cost ◦ We offer the best price to quality ratio ✔ Infrastructure ◦ Advanced workstations ◦ Cutting edge computing and network systems ◦ Power packed online servers ◦ Smart communications systems ◦ Conference halls, CBT and video learning facilities ◦ High-speed uninterrupted Internet connection ✔ Quality of Service ◦ Guaranteed client satisfaction ◦ Real-time customer support with the least turn-around in the industry ◦ Pre-sales technical and business related support to partners and agencies ✔ Ethics and Principles ◦ We ensure confidentiality in all our dealings.
    [Show full text]
  • ODOT Default Web Application Architecture
    The Ohio Department of Transportation (ODOT) Division of Information Technology ODOT Default Web Application Architecture Filename:ODOT Web Application Architecture.doc Version: 8.0 Author: Michael Jordan Last Modified: 11/16/2017 Project Site: Document Summary: Prepared by the ODOT Division of Information Technology (DoIT) [Document Header] Contents 1 Introduction ......................................................................................................................... 3 1.1 About This Document ..................................................................................................... 3 1.2 Document Location ......................................................................................................... 3 2 Architecture ......................................................................................................................... 4 2.1 A Layered Approach ....................................................................................................... 4 2.1.1 User Interface Layer ............................................................................................... 4 2.1.2 Domain Layer ......................................................................................................... 4 2.1.3 Service Layer .......................................................................................................... 5 3 Technologies ....................................................................................................................... 6 3.1 Microsoft .NET Platform.................................................................................................
    [Show full text]
  • THE FUTURE of SCREENS from James Stanton a Little Bit About Me
    THE FUTURE OF SCREENS From james stanton A little bit about me. Hi I am James (Mckenzie) Stanton Thinker / Designer / Engineer / Director / Executive / Artist / Human / Practitioner / Gardner / Builder / and much more... Born in Essex, United Kingdom and survived a few hair raising moments and learnt digital from the ground up. Ok enough of the pleasantries I have been working in the design field since 1999 from the Falmouth School of Art and onwards to the RCA, and many companies. Ok. less about me and more about what I have seen… Today we are going to cover - SCREENS CONCEPTS - DIGITAL TRANSFORMATION - WHY ASSETS LIBRARIES - CODE LIBRARIES - COST EFFECTIVE SOLUTION FOR IMPLEMENTATION I know, I know, I know. That's all good and well, but what does this all mean to a company like mine? We are about to see a massive change in consumer behavior so let's get ready. DIGITAL TRANSFORMATION AS A USP Getting this correct will change your company forever. DIGITAL TRANSFORMATION USP-01 Digital transformation (DT) – the use of technology to radically improve performance or reach of enterprises – is becoming a hot topic for companies across the globe. VERY DIGITAL CHANGING NOT VERY DIGITAL DIGITAL TRANSFORMATION USP-02 Companies face common pressures from customers, employees and competitors to begin or speed up their digital transformation. However they are transforming at different paces with different results. VERY DIGITAL CHANGING NOT VERY DIGITAL DIGITAL TRANSFORMATION USP-03 Successful digital transformation comes not from implementing new technologies but from transforming your organisation to take advantage of the possibilities that new technologies provide.
    [Show full text]
  • The Snap Framework: a Web Toolkit for Haskell
    The Functional Web The Snap Framework A Web Toolkit for Haskell Gregory Collins • Google Switzerland Doug Beardsley • Karamaan Group askell is an advanced functional pro- the same inputs, always produce the same out- gramming language. The product of more put. This property means that you almost always H than 20 years of research, it enables rapid decompose a Haskell program into smaller con- development of robust, concise, and fast soft- stituent parts that you can test independently. ware. Haskell supports integration with other Haskell’s ecosystem also includes many power- languages and has loads of built-in concurrency, ful testing and code-coverage tools. parallelism primitives, and rich libraries. With Haskell also comes out of the box with a set its state-of-the-art testing tools and an active of easy-to-use primitives for parallel and con- community, Haskell makes it easier to produce current programming and for performance pro- flexible, maintainable, high-quality software. filing and tuning. Applications built with GHC The most popular Haskell implementation is enjoy solid multicore performance and can han- the Glasgow Haskell Compiler (GHC), a high- dle hundreds of thousands of concurrent net- performance optimizing native-code compiler. work connections. We’ve been delighted to find Here, we look at Snap, a Web-development that Haskell really shines for Web programming. framework for Haskell. Snap combines many other Web-development environments’ best fea- What’s Snap? tures: writing Web code in an expressive high- Snap offers programmers a simple, expressive level language, a rapid development cycle, fast Web programming interface at roughly the same performance for native code, and easy deploy- level of abstraction as Java servlets.
    [Show full text]
  • Analysing the Use of Outdated Javascript Libraries on the Web
    Updated in September 2017: Require valid versions for library detection throughout the paper. The vulnerability analysis already did so and remains identical. Modifications in Tables I, III and IV; Figures 4 and 7; Sections III-B, IV-B, IV-C, IV-F and IV-H. Additionally, highlight Ember’s security practices in Section V. Thou Shalt Not Depend on Me: Analysing the Use of Outdated JavaScript Libraries on the Web Tobias Lauinger, Abdelberi Chaabane, Sajjad Arshad, William Robertson, Christo Wilson and Engin Kirda Northeastern University {toby, 3abdou, arshad, wkr, cbw, ek}@ccs.neu.edu Abstract—Web developers routinely rely on third-party Java- scripts or HTML into vulnerable websites via a crafted tag. As Script libraries such as jQuery to enhance the functionality of a result, it is of the utmost importance for websites to manage their sites. However, if not properly maintained, such dependen- library dependencies and, in particular, to update vulnerable cies can create attack vectors allowing a site to be compromised. libraries in a timely fashion. In this paper, we conduct the first comprehensive study of To date, security research has addressed a wide range of client-side JavaScript library usage and the resulting security client-side security issues in websites, including validation [30] implications across the Web. Using data from over 133 k websites, we show that 37 % of them include at least one library with a and XSS ([17], [36]), cross-site request forgery [4], and session known vulnerability; the time lag behind the newest release of fixation [34]. However, the use of vulnerable JavaScript libraries a library is measured in the order of years.
    [Show full text]
  • Cross-Platform Mobile Application for the Cothority
    Cross-Platform Mobile Application for the Cothority Vincent Petri & Cedric Maire School of Computer and Communication Sciences Decentralized and Distributed Systems Lab Semester Project January 2018 Responsible Supervisor Prof. Bryan Ford Linus Gasser EPFL / DeDiS EPFL / DeDiS 2 Acknowledgements We would like to express our special thanks to Linus Gasser who gave us the opportunity to do this very interesting project related to the collec- tive authority (Cothority) framework developed by the DeDiS laboratory at EPFL. We would like to thank him for the valuable help he gave us whenever we needed and for the knowledge he provided to us throughout the semester. Secondly, we would also like to thank our parents and friends who helped us through the hard times of finalising the project within the limited time frame. 3 1 Abstract The Cothority2 framework has been developed and maintained by the DeDiS laboratory at EPFL. This project provides a framework for develop- ing, analysing, and deploying decentralised and distributed cryptographic protocols. A set of servers that runs these protocols and communicates among each other is referred to as a collective authority, or cothority, and the individual servers are called cothority servers or conodes. A cothority that executes decentralised protocols could be used for collective signing, threshold signing, or the generation of public-randomness, to name only a few options. The highest level of abstraction can be created by protocols like the collective signature (CoSi) protocol, the random numbers (Rand- Hound) protocol, or the communication (Messaging) protocol used by the conodes to exchange data. Then come the services, which rely on these pro- tocols.
    [Show full text]
  • The Effect of Ajax on Performance and Usability in Web Environments
    The effect of Ajax on performance and usability in web environments Y.D.C.N. op ’t Roodt, BICT Date of acceptance: August 31st, 2006 One Year Master Course Software Engineering Thesis Supervisor: Dr. Jurgen Vinju Internship Supervisor: Ir. Koen Kam Company or Institute: Hyves (Startphone Limited) Availability: public domain Universiteit van Amsterdam, Hogeschool van Amsterdam, Vrije Universiteit 2 This page intentionally left blank 3 Table of contents 1 Foreword ................................................................................................... 6 2 Motivation ................................................................................................. 7 2.1 Tasks and sources................................................................................ 7 2.2 Research question ............................................................................... 9 3 Research method ..................................................................................... 10 3.1 On implementation........................................................................... 11 4 Background and context of Ajax .............................................................. 12 4.1 Background....................................................................................... 12 4.2 Rich Internet Applications ................................................................ 12 4.3 JavaScript.......................................................................................... 13 4.4 The XMLHttpRequest object..........................................................
    [Show full text]
  • Web Development Frameworks Ruby on Rails VS Google Web Toolkit
    Bachelor thesis Web Development Frameworks Ruby on Rails VS Google Web Toolkit Author: Carlos Gallardo Adrián Extremera Supervisor: Welf Löwe Semester: Spring 2011 Course code: 2DV00E SE-391 82 Kalmar / SE-351 95 Växjö Tel +46 (0)772-28 80 00 [email protected] Lnu.se/dfm Abstract Web programming is getting more and more important every day and as a consequence, many new tools are created in order to help developers design and construct applications quicker, easier and better structured. Apart from different IDEs and Technologies, nowadays Web Frameworks are gaining popularity amongst users since they offer a large range of methods, classes, etc. that allow programmers to create and maintain solid Web systems. This research focuses on two different Web Frameworks: Ruby on Rails and Google Web Toolkit and within this document we will examine some of the most important differences between them during a Web development. Keywords web frameworks, Ruby, Rails, Model-View-Controller, web programming, Java, Google Web Toolkit, web development, code lines i List of Figures Figure 2.1. mraible - History of Web Frameworks....................................................4 Figure 2.2. Java BluePrints - MVC Pattern..............................................................6 Figure 2.3. Libros Web - MVC Architecture.............................................................7 Figure 2.4. Ruby on Rails - Logo.............................................................................8 Figure 2.5. Windaroo Consulting Inc - Ruby on Rails Structure.............................10
    [Show full text]
  • CS 683 Emerging Technologies Fall Semester, 2006 Doc 23 Rails 7 AJAX Nov 16, 2006
    CS 683 Emerging Technologies Fall Semester, 2006 Doc 23 Rails 7 AJAX Nov 16, 2006 Copyright ©, All rights reserved. 2006 SDSU & Roger Whitney, 5500 Campanile Drive, San Diego, CA 92182-7700 USA. OpenContent (http:// www.opencontent.org/opl.shtml) license defines the copyright on this document. References script.aculo.us, Common Ajax Javascript library, http://script.aculo.us/ Surveying open-source AJAX toolkits, Peter Wayner, Inforworld, July 31, 2006, http://www.infoworld.com/article/ 06/07/31/31FEajax_1.html Proprietary AJAX toolkits: The other side of the coin, Peter Wayner, Inforworld, July 31, 2006, http://www.infoworld.com/ infoworld/article/06/07/31/31FEajaxsb_1.html Ajax/DHTML Library Scorecard:How Cross Platform Are They? Musings from Mars ,March 4th, 2006, http:// www.musingsfrommars.org/2006/03/ajax-dhtml-library-scorecard.html Wikipedia, http://en.wikipedia.org/wiki/Main_Page Agile Web Development with Rails 2nd Ed Bl.16 October 25, Thomas & Hanson, The Pragmatic Bookshelf, PDF Rails API, http://api.rubyonrails.org/ Some Ajax Reading Why Ajax Sucks (Most of the Time) Jacob Nielson http://www.usabilityviews.com/ajaxsucks.html Ajax SWik http://swik.net/Ajax Ajax Mistakes How to use XMLHttpRequest Places to use Ajax 2 Web Browsers suck for developing applications HTML is very limited as UI Delay in response from server 3 Reducing Suckiness CSS Javascript XMLHttpRequest 4 Cascading Style Sheets - CSS stylesheet language that describes layout of HTML & XML Provides HTML better control over layout body { background-color: #fff;
    [Show full text]
  • Marian Edu, Acorn IT About Me
    Chatbots & OpenEdge Marian Edu, Acorn IT About me Working with Progress since 1998 4GL & OO, AppServer Architecture & Integration Java, .NET node.js, javascript, typescript angular, nativescript Chatbots & OpenEdge acorn.ro Chatbot A chatbot is a computer program or an artificial intelligence which conducts a conversation via auditory or textual methods. Such programs are often designed to convincingly simulate how a human would behave as a conversational partner, thereby passing the Turing test. Wikipedia Chatbots & OpenEdge acorn.ro Chatbot & AI Natural Processing Language. Semantic vs. Linguistic Model Keyword matching. Don’t really need to pass the Turing test. Chatbots & OpenEdge acorn.ro Usage Virtual Assistants. Messaging Apps. Organisation Apps/Websites. Chatbots & OpenEdge acorn.ro Use Cases Customer Support. e-Commerce. Marketing, news, finance, etc... Chatbots & OpenEdge acorn.ro Skip Theory Assistants Alexa Skills Kit Actions on Google Messaging Integration. OpenEdge Integration. Chatbots & OpenEdge acorn.ro Assistants Understanding User Input NPL, AI, Intents, Workflow IBM Watson Assistant Amazon Alexa Google Assistant Chatbots & OpenEdge acorn.ro Assistants REST Services (PAAS – subscription) JSON payload Intent/Workflow definition (designer) API’s Chatbots & OpenEdge acorn.ro Smart Speakers Speech Recognition Amazon – Echo, Echo dot, Echo Plus, Echo Spot, Echo Auto… Google – Google Home, Mini, Max Facebook – Portal (Alexa) Chatbots & OpenEdge acorn.ro Amazon Alexa Alexa Console – Skills and Intents Fulfilment
    [Show full text]
  • Reactjs Table of Contents
    React #reactjs Table of Contents About 1 Chapter 1: Getting started with React 2 Remarks 2 Versions 2 Examples 3 Installation or Setup 3 Hello World Component 4 Hello World 5 What is ReactJS? 7 Hello World with Stateless Functions 7 For example: 8 Create React App 9 Installation 9 Configuration 9 Alternatives 9 Absolute Basics of Creating Reusable Components 10 Components and Props 10 Chapter 2: Communicate Between Components 12 Examples 12 Communication between Stateless Functional Components 12 Chapter 3: Communication Between Components 15 Remarks 15 Examples 15 Parent to Child Components 15 Child to Parent Components 16 Not-related Components 16 Chapter 4: Components 18 Remarks 18 Examples 18 Basic Component 18 Nesting Components 19 1. Nesting without using children 20 Pros 20 Cons 20 Good if 20 2. Nesting using children 20 Pros 21 Cons 21 Good if 21 3. Nesting using props 21 Pros 22 Cons 22 Good if 22 Creating Components 22 Basic Structure 22 Stateless Functional Components 23 Stateful Components 23 Higher Order Components 24 setState pitfalls 25 Props 27 Component states - Dynamic user-interface 28 Variations of Stateless Functional Components 29 Chapter 5: Forms and User Input 31 Examples 31 Controlled Components 31 Uncontrolled Components 31 Chapter 6: Higher Order Components 33 Introduction 33 Remarks 33 Examples 33 Simple Higher Order Component 33 Higher Order Component that checks for authentication 34 Chapter 7: How and why to use keys in React 36 Introduction 36 Remarks 36 Examples 36 Basic Example 36 Chapter 8: How to setup a basic webpack, react and babel environment 38 Remarks 38 Examples 39 How to build a pipeline for a customized "Hello world" with images.
    [Show full text]