React.js Tutorial Book React is definitely one of the hardest things I had to learn from the pool of JavaScript libraries. In part, it is because it assumes knowledge of so many other things associated with professional web development. Namely, Node.js, NPM, mastery of babel command line tools, EcmaScript (5 and 6,) JSX and possibly WebPack. This book also makes an assumption. That you're completely new to React programming. It creates a challenge for me as the author, because it's my responsibility to speak about React in a way that is still meaningful, without overwhelming you with large blocks of code that look complicated and hard to follow. Having said this, my strategy for the presentation format of this book follows a simple pattern of mixing explanations with simple code examples. Primarily, this book is a narrative designed to gradually delve into understanding the React library. I'll just put it out there right now that this book alone will not be enough to become an expert React programmer. No publication about React can claim this, due to sheer scope of principles you need to understand in order to get going and start writing real applications with React. Then there is also syntactical differences between EcmaScript 5, 6 and soon 7. For this reason React may turn out to be one of the most unusual learning experiences you have ever had when it comes to JavaScript. But breaking through the hard parts is worth the battle. And I hope this book will prove to be practical in accomplishing this task. Written and edited by Greg Sidelnikov [email protected] Table of Contents A Note From the Author2 Main Roadblocks to Learning React4 Good Reasons for Learning React6 Reactive Programming8 Main Principles of Reactive Programming9 Gems and Working in the Mine12 The Essentials14 Special Props21 PropTypes22 Class Component Options23 Component Instances25 Properties25 Methods26 Gem 1 - React Components26 Gem 2 - Render Method28 Gem 3 - Virtual DOM and Bandwidth Salvation30 Gem 4 - Two Distinct Ways of Initializing a React Class32 Gem 5 - States & Life Cycles35 Gem 6 - Component Mounting39 Gem 7 - Node.js & NPM43 Gem 8 - JSX Walkthrough45 Lesson 1 - Writing Your First React Component49 JSX53 Props57 Function Purity58 Functional Components60 A Wolf in Sheep's Clothing62 Native Babel vs JavaScript Babel63 NPM63 Transpiling Source Code64 Lesson 2 - Nested Components65 Parent with a Single Child66 Parents with Multiple Children68 Lesson 3 - Handling Component Events69 Method 1 - getInitialState70 Method 2 - componentDidMount71 Method 3 - componentWillUnmount72 Example of a Complete React Application73 Creating Search List74 React Application74 EcmaScript 6 The var and let keywords77 The new const keyword82 Destructuring assignment83 For-of loop83 The Map object84 Arrow Functions84 What are Arrow Functions in JavaScript?90 Immediately Invoked Arrow Functions (IIAF)94 Backtick (``) Template Strings95 `string text`;95 `string text`;95 New Array methods96 A Note From the Author Welcome to the introduction chapter of my book. This is React Gems a book by Greg Sidelnikov. That's me, the author! First, thank you for showing interest in React Gems. This tutorial book was self published by myself through my JavaScript web development newsletter. It will walk you step by step through the process of setting up a development environment and learning Reactive programming from start to finish. As of 2017, what I call "reactive" programming has become an alternative way of thinking about web applications. It provides software patterns that make your web app extremely responsive to user input and generally feel faster to the end- user (people who are using your application.) When I was studying React it took me about 3 weeks for something to occur to me. React is unlike any other JavaScript library I have ever programmed with. It assumes a lot of previous knowledge. Because of this I had to write this book a certain way, that gradually delves into the process of understanding it. Studying React is not about just memorizing a few methods here and there and using them as you wish. React itself is built on software principles that usually become known only to professional software engineers who have worked in the industry for a long time. This creates a challenge for authors like me who are trying to explain React to JavaScript newcomers. I chose to solve this problem by adopting a more fluid style of explanations that border between discussions and source code and that make an attempt to create balance between both. I didn't want to show long React programs and write a few comments explaining what each line does. That would only complicate the learning process. Instead, I broke down the narrative of the book into components (no pun intended!) that deal with real problems you will be faced with when studying React for the first time. Programming with React library is a lot more than just learning about and using React objects, components, states, props and methods. The entire book is dedicated to explanations of what those are. Have you ever heard of props or states in other libraries? States… probably, you did. But not so much props (React's way of referring to "properties" of an object, which are in fact arguments/parameters passed to React objects. It's a mystery of why they decided to call this props. Because even what they represent comes from HTML attributes, not properties.) React makes understanding both (props and states) explicit requirements. They're almost like sub-features that you absolutely must master in order to become a versatile React library programmer. It's the quirky details like these that requires previous experience with JavaScript, without which (and explanations of which) it would be much more difficult to learn React programming. Thankfully I am aware of this and the book is written with all of this in mind. At times React assumes knowledge of software principles not inherent to React library itself. The passages of this book will gradually uncover them throughout the book as well. This book is not a list of object names, methods and functions with side explanations of what they do. You can look them up on Facebook's official React documentation page including long lists and explanations of every single method. Rather, the book will deal with the gradual learning process and understanding of the said principles involved in React programming. Before we begin I'd like to show you some of the things I discovered that. Below you will see a list of the hardest things about learning React followed by most important reasons why you would want to learn it. Main Roadblocks to Learning React Here, I'm going to make an attempt to speak of the commonplace difficulties faced with learning React library from scratch. These are the ones that make learning React not as intuitive as other far straightforward libraries you're already used to. I'll try to do it without making React come off as a bad choice, because… all in all, this is indeed a book about how to advance as a React programmer. However, if we at least briefly talk about the hard parts now, it will make it easier to sink in later on as we move forward. 1. New Design Pattern. New, and in many cases unfamiliar. If you're coming to React from traditional pre-2015 JavaScript world of programming, it might take time to adjust to modular and declarative design adopted by React library. Sure, if you've ever worked on a large JavaScript application you might have already dealt with long lists of .js files and treated them as separate modules. But for large majority of programmers this isn't true. React requires that we use modular design for maximum application management efficiency. 2. JSX language throws a lot of people off. It's like writing HTML inside JavaScript and at first it looks nothing short of bizarre, if you're encountering it for the first time ever: For example: var divblocks = <div> <div>Another nested tag</div> </div>; Like wait, what? Are you seeing what I'm seeing? We have just relentlessly typed HTML into a JavaScript statement, without quotes surrounding the HTML, and even have separated them using line breaks... and still got away with it. JSX processor, which processes XML as if it's HTML and turns it into a valid JavaScript statement we can toss around does all the dirty work for us behind the scenes. In reality, this type of code is "transpiled" from XML (that looks like HTML) to EcmaScript 5, so browsers can understand it. This means the actual code the browsers sees will not even look this way. This is just for us, while we're programming our app. But… we can write the code in this format without a hitch. How it is used is discussed throughout the book. But basically, this format is interchangeable with React component structure. What essentially you have just created is actually a valid React component pattern. For this reason, JSX is often used with React as a supplementary library. You can create the same statement we've seen in example above, by writing it using React methods. Using JSX is not a requirement, and you can get away without it. However without it React programming becomes sort of like eating a pizza without cheese. The two work together to provide a tasty experience, even if it takes trial and error and time to learn how to bake the pie. 3. Babel & Transpiling code from EcmaScript 6 to an earlier version (ES5) is a bit of an overhead and seems like an unnecessary thing to do as well. Because eventually browsers like Chrome and Safari will have full support for ES6 and this process will become automatic anyway. Babel allows us to write this code: import someClass from "someClass.js" And this will grab someClass class definition from the file someClass.js, where it is defined. As of this writing, Chrome, Firefox and none of the other browsers support ES6 import keyword. However, babel allows us to start learning and writing ES6 code even now, before official support is even rolled out in the modern browser. Until then it will just "transpile" it back to ES5, behind the scenes, so that the code can actually run in any browser today. The good news is that installing babel plugins forces you to learn how to use the command line tools. Something traditional JavaScript developers are usually unfamiliar with. Which, I think the skill you should be learning anyway. Using command line is a "must-have" skill in professional software development environment (outside of personal projects in some arbitrary folder on your Desktop). And... it's one of those extra steps that might potentially prevent delving directly into Reactive programming, if not taken. As much of a hassle as it may be.