Beginning Reactjs Foundations Building User Interfaces With Reactjs (an Approachable Guide)

Quickly learn the most widely used front-end development language with ease and confidence

React JS Foundations: Building User Interfaces with ReactJS - An Approachable Guide walks readers through the fundamental concepts of programming with the explosively popular front-end tool known as React JS.

Written by an accomplished full-stack engineer, speaker, and community organizer, React JS Foundations teaches readers how to understand React and how to begin building applications with it. The book:

• Explains and clarifies technical terminology with relevant and modern examples to assist people new to programming understand the language
• Helps experienced programmers quickly get up to speed with React
• Is stocked throughout with practical and applicable examples of day-to-day React work

Perfect for beginner, intermediate, and advanced programmers alike, React JS Foundations will quickly bring you up to speed on one of the most useful and widely used front-end languages on the web today. You can start building your first application today.

Introduction Xxvii

Chapter 1: Hello, World! 1

React without a Build Toolchain 1

Interactive “Hello, World” with Create React App and JSX 7

Summary 9

Chapter 2: The Foundation of React 11

What’s in a Name? 11

UI Layer 12

Virtual DOM 13

The Philosophy of React 14

Thinking in Components 15

Composition vs. Inheritance 15

React Is Declarative 16

React Is Idiomatic 17

Why Learn React? 17

React vs.... 18

React vs. Angular 18

React vs. Vue 19

What React Is Not 19

React Is Not a Web Server 20

React Is Not a Programming Language 20

React Is Not a Database Server 21

React Is Not a Development Environment 21

React Is Not the Perfect Solution to Every Problem 21

Summary 21

Chapter 3: JSX 23

JSX Is Not HTML 23

What Is JSX? 30

How JSX Works 30

Transpiler . . . Huh? 31

Compilation vs. Transpilation 31

JSX Transform 31

Introducing Babel 31

Eliminating Browser Incompatibilities 33

Syntax Basics of JSX 33

JSX Is JavaScript XML 33

Beware of Reserved Words 33

JSX Uses camelCase 33

Preface Custom Attributes in DOM Elements with data-34

JSX Boolean Attributes 34

Use Curly Braces to Include Literal JavaScript 35

Remember to Use Double Curly Braces with Objects 35

Put Comments in Curly Braces 35

When to Use JavaScript in JSX 36

Conditionals in JSX 36

Conditional Rendering with if/else and Element Variables 36

Conditional Rendering with the && Operator 37

Conditional Rendering with the Conditional Operator 38

Expressions in JSX 38

Using Children in JSX 40

React Fragments 40

Summary 41

Chapter 4: All About Components 43

What Is a Component? 43

Components vs. Elements 44

Components Define Elements 44

Elements Invoke Components 45

Built-in Components 47

HTML Element Components 47

Attributes vs. Props 52

Passing Props 52

Accessing Props 52

Standard HTML Attributes 54

Non-Standard Attributes 56

Custom Attributes 56

User-Defined

Components 56

Types of Components 56

Class Components 57

Stepping through a React Class Component 68

React.Component 68

Importing React.Component 68

The Class Header 69

The Constructor Function 69

Managing State in Class Components 71

The Render Function 73

Creating and Using Props 74

Function Components 76

What Are Function Components? 79

How to Writ