Schweitzer Fachinformationen
Wenn es um professionelles Wissen geht, ist Schweitzer Fachinformationen wegweisend. Kunden aus Recht und Beratung sowie Unternehmen, öffentliche Verwaltungen und Bibliotheken erhalten komplette Lösungen zum Beschaffen, Verwalten und Nutzen von digitalen und gedruckten Medien.
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:
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.
About the Author
CHRIS MINNICK is an accomplished author, trainer, and web developer with experience working on web and mobile projects with both small and large companies.
The companion website at www.reactjsfoundations.com provides code listings for each chapter, plus examples and downloads that can be used to test out the various ReactJS techniques in the book.
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 Write Function Components 79
Optimizations and Function Component Shortcuts 80
Managing State in Function Components 83
Differences between Function and Class Components 84
React Component Children 84
this.props.children 85
Manipulating Children 86
React.Children 86
isValidElement 87
cloneElement 87
The Component Lifecycle 89
Mounting 90
constructor() 90
static getDerivedStateFromProps 90
render 90
componentDidMount() 90
Updating 90
shouldComponentUpdate 91
getSnapshotBeforeUpdate 91
componentDidUpdate 92
Unmounting 92
componentWillUnmount 92
Error Handling 92
getDerivedStateFromError 92
componentDidCatch 92
Improving Performance and Avoiding Errors 92
Avoiding Memory Leaks 93
React.PureComponent 96
React.memo 97
React.StrictMode 98
Rendering Components 98
Rendering with ReactDOM 98
Virtual DOM 100
Other Rendering Engines 101
React Native 101
ReactDOMServer 102
React Konsul 103
react-pdf 103
Component Terminology 103
Summary 104
Chapter 5: React Devtools 105
Installation and Getting Started 105
Inspecting Components 107
Working with the Component Tree 108
Searching for Components 110
Using the Search Input Box 110
Using Regular Expressions 110
Filtering Components 112
Selecting Components 114
Editing Component Data in DevTools 114
Working with Additional DevTools Functionality 118
Profiling 119
Summary 121
Chapter 6: React Data Flow 123
One-Way
Data Flow 123
Understanding One-Way
Data Flow 124
Why One-Way
Data Flow? 125
Props 126
Components Receive Props 126
Props Can Be Any Data Type 126
Props Are Read-Only 127
Validating Incoming Props with PropTypes 129
What Is PropTypes? 130
Getting Started with PropTypes 131
What Can PropTypes Validate? 133
Default Props 141
React State 145
What Is state? 146
Initializing state 146
Initializing state in Class Components 146
Initializing State in Function Components 147
The Difference between state and props 149
Updating state 149
Updating a Class Component's state with setState 150
Updating state with Function Components 154
What to Put in State 161
Building the Reminders App 161
What Not to Put in State 168
Where to Put State 168
Lifting State Up 170
About the key Prop 177
Filtering the Reminders 183
Implementing the isComplete Changing Functionality 188
Converting to Class Components 190
Summary 198
Chapter 7: Events 199
How Events Work in React 199
What Is SyntheticEvent? 201
Using Event Listener Attributes 202
The Event Object 203
Supported Events 204
Event Handler Functions 211
Writing Inline Event Handlers 211
Writing Event Handlers in Function Components 212
Writing Event Handlers in Class Components 213
Binding Event Handler Functions 214
Using bind 215
Using Arrow Functions 216
Passing Data to Event Handlers 218
Summary 219
Chapter 8: Forms 221
Forms Have State 221
Controlled Inputs vs. Uncontrolled Inputs 222
Updating a Controlled Input 223
Controlling an Input in a Function Component 224
Controlling an Input in a Class Component 224
Lifting Up Input State 226
Using Uncontrolled Inputs 228
Using Different Form Elements 229
Controlling the Input Element 230
Controlling a textarea 230
Controlling a Select Element 231
Preventing Default Actions 231
Summary 232
Chapter 9: Refs 233
What Refs Are 233
How to Create a Ref in a Class Component 234
How to Create a Ref in a Function Component 234
Using Refs 234
Creating a Callback Ref 236
When to Use Refs 238
When Not to Use Refs 238
Examples 239
Managing Focus 239
Automatically Selecting Text 239
Controlling Media Playback 241
Setting Scroll Position 241
Summary 242
Chapter 10: Styling React 243
The Importance of Styles 243
Importing CSS into the HTML File 244
Using Plain Old CSS in Components 245
Writing Inline Styles 247
JavaScript Style Syntax 248
Why to Use Inline Styles 249
Why Not to Use Inline Styles 249
Improving Inline Styles with Style Modules 249
CSS Modules 250
Naming CSS Module Files 251
Advanced CSS Modules Functionality 252
Global Classes 252
Class Composition 252
CSS-in- JS and Styled Components 253
Summary 255
Chapter 11: Introducing Hooks 257
What Are Hooks? 257
Why Were Hooks Introduced? 257
Rules of Hooks 259
The Built-in Hooks 259
Managing State with useState 260
Setting the Initial State 262
Using the Setter Function 262
Passing a Value to a Setter 263
Passing a Function to a Setter 263
Setter Function Value Comparison 264
Hooking into the Lifecycle with useEffect 264
Using the Default useEffect Behavior 265
Cleaning Up After Effects 265
Customizing useEffect 266
Running Asynchronous Code with useEffect 270
Subscribing to Global Data with useContext 272
Combining Logic and State with useReducer 273
Memoized Callbacks with useCallback 275
Caching Computed Values with useMemo 278
Solving Unnecessary Renders 278
Solving Performance Problems 279
Accessing Children Imperatively with useRef 279
Customizing Exposed Values with useImperativeHandle 280
Updating the DOM Synchronously with useLayoutEffect 281
Writing Custom Hooks 281
Labeling Custom Hooks with useDebugValue 283
Finding and Using Custom Hooks 285
use-http 285
react-fetch-hook 286
axios-hooks 286
react-hook- form 286
@rehooks/local-storage 287
use-local- storage- state 287
Other Fun Hooks 288
Lists of Hooks 288
Summary 288
Chapter 12: Routing 289
What Is Routing? 289
How Routing Works in React 291
Using React Router 293
Installing and Importing react-router- dom 293
The Router Component 294
Selecting a Router 294
Using the Router Component 295
Linking to Routes 296
Internal Linking with Link 296
Internal Navigation with NavLink 298
Automatic Linking with Redirect 302
Creating Routes 302
Restricting Path Matching 304
Using URL Parameters 304
The component Prop 305
Render Props 306
Switching Routes 307
Rendering a Default Route 308
Routing with Redirect 308
Behind the Scenes: location, history, and match 309
The history Object 310
The location Object 313
The match Object 313
React Router Hooks 317
useHistory 317
useLocation 317
useParams 317
useRouteMatch 317
Summary 318
Chapter 13: Error Boundaries 319
The Best Laid Plans 319
What Is an Error Boundary? 320
Implementing an Error Boundary 323
Building Your Own ErrorBoundary Component 323
getDerivedStateFromErrors Is a Static Method 324
getDerivedStateFromErrors Runs During the Render Phase 325
getDerivedStateFromErrors Receives the Error as a Parameter 325
getDerivedStateFromErrors Should Return an Object for Updating State 325
Testing Your Boundary 326
Logging Errors with ComponentDidCatch() 327
Using a Logging Service 328
Resetting the State 333
Installing a Pre-Built ErrorBoundary Component 334
What Can't an Error Boundary Catch? 336
Catching Errors in Error Boundaries with try/catch 336
Catching Errors in Event Handlers with react-error- boundary 337
Summary 338
Chapter 14: Deploying React 339
What Is Deployment? 339
Building an App 339
Running the build Script 340
Examining the build Directory 340
The Built index.html 341
The static Directory 342
asset-manifest. json 342
What's in a Name? 343
How Is a Deployed App Different? 343
Development Mode vs. Production 343
Putting It on the Web 344
Web Server Hosting 344
Node Hosting 345
Deploying with Netlify 345
Enabling Routing with Netlify 347
Enabling Custom Domains and HTTPS 348
Summary 349
Chapter 15: Initialize a React Project from Scratch 351
Building Your Own Toolchain 351
Initializing Your Project 352
The HTML Document 352
The Main JavaScript File 353
The Root Component 353
Running in the Browser 354
How Webpack Works 357
Loaders 358
Plugins 358
Automating Your Build Process 358
Making an HTML Template 359
Development Server and Hot Reloading 360
Testing Tools 360
Installing and Configuring ESLint 360
ESLint Configuration 361
How to Fix Errors 362
Testing with Jest 363
Creating NPM Scripts 364
Structuring Your Source Directory 365
Grouping by File Type 366
Grouping by Features 367
Summary 367
Chapter 16: Fetching and Caching Data 369
Asynchronous Code: It's All About Timing 369
JavaScript Never Sleeps 370
Where to Run Async Code in React 374
Ways to Fetch 376
Getting Data with Fetch 377
Getting Data with Axios 377
Using Web Storage 379
Two Types of Web Storage 379
When to Use Web Storage 380
When Not to Use Web Storage 380
Web Storage Is Synchronous 380
Working with localStorage 381
Storing Data with localStorage 381
Reading Data from localStorage 382
Removing Data from localStorage 384
Summary 385
Chapter 17: Context Api 387
What Is Prop Drilling? 387
How Context API Solves the Problem 388
Creating a Context 388
Creating a Provider 389
Consuming a Context 390
Using Context in a Class Component 390
Using Context in a Function Component 391
Common Use Cases for Context 391
When Not to Use Context 392
Composition as an Alternative to Context 392
Example App: User Preferences 396
Summary 398
Chapter 18: React Portals 399
What Is a Portal? 399
How to Make a Portal 399
Why Not Just Render Multiple Component Trees? 403
Common Use Cases 403
Rendering and Interacting with a Modal Dialog 404
Managing Keyboard Focus with Modals 409
Summary 411
Chapter 19: Accessibility in React 413
Why Is Accessibility Important? 413
Accessibility Basics 414
Web Content Accessibility Guidelines (WCAG) 414
Web Accessibility Initiative -Accessible Rich Internet Applications (WAI-ARIA) 415
Implementing Accessibility in React Components 415
ARIA Attributes in React 416
Semantic HTML 416
Form Accessibility 417
Focus Control in React 418
Skip Links 418
Managing Focus Programmatically 419
Media Queries in React 420
Media Queries in Included CSS 421
Using useMediaQuery 422
Summary 422
Chapter 20: Going Further 425
Testing 425
Mocha 426
Enzyme 426
Chai 427
Assert 427
Expect 428
Should 428
Karma 428
Nightwatch.js 428
Server-Side
Rendering 429
Flux 430
Redux 430
GraphQL 432
Apollo 433
React Native 434
Next.js 434
Gatsby 434
People to Follow 435
Useful Links and Resources 435
Summary 436
Index 437
SINCE ITS CREATION BY FACEBOOK IN 2013, REACTJS has become one of the most popular and widely used front-end user interface libraries on the web. With the creation of React Native in 2015, ReactJS has become one of the most widely used libraries for mobile app development as well.
ReactJS has always been a bit of a moving target. It has gone through several major changes over the years, but through it all, the core principles of React have remained the same.
If you want to learn to develop next-generation cross-platform web and mobile apps using the latest syntax and the latest tools, you've come to the right place. My goal with this book is to save you from the countless hours of trial and error that were my experience with trying to piece together bits of old and new information from the web and books.
Whether you're coming to React as a mobile developer, a web developer, or as any other kind of software developer, this book is for you. If you have experience with ReactJS as it existed in the earlier days (before about version 16), this book is for you too!
In this book, I've attempted not only to give the most up-to-date syntax and patterns for developing ReactJS applications, but also to give enough background and timeless information for it to remain relevant for years to come.
So, welcome to ReactJS.
Thank you for choosing to begin, or continue, your React journey with me. My aim with this book is to provide an up-to-date and thorough explanation of React and the React ecosystem along with hands-on code that will prepare you to quickly start using React productively in the real world.
I'm thrilled to be writing this book at this time for a number of reasons:
Let's take a quick look at each of these points, starting with a little bit about who I am and how I came to React and this book.
I've been a web developer since 1997, and I've been programming in JavaScript since 1998. I've built or managed the building of web applications for some of the world's largest companies over the years. As a web developer, writer, and teacher, I've had to learn and use plenty of languages and JavaScript frameworks. There's a difference between learning something and applying it, and I've been working on projects with React and doing React consulting for several years now.
I've been teaching web development and JavaScript online and in person since 2000, and I've been teaching React since 2015. In the years that I've been teaching React, I've written three weeklong courses designed for in-person delivery, numerous short video courses, and two longer video courses. I've taught React on three continents, and my students have been web developers, Java and C programmers, COBOL programmers, database administrators, network administrators, project managers, graphic designers, and college students.
As I'm writing, the global COVID-19 pandemic has decimated the in-person training industry. While this situation has given me more time at home with the pets, it's also given me time to think deeply about React and about the React book that I wish existed today. This book is the result of my looking at all of the top React books, looking at the current state of how React is being used, and looking at what React is likely to look like in the future.
React is a JavaScript library that was born out of Facebook's need to create scalable and fast user interfaces. Ever since Facebook released it to the world as an open source project, it has been one of the most widely used ways to build dynamic web and mobile applications.
One popular game among JavaScript developers is to think of a noun, add ".js", and search GitHub to find the JavaScript framework with that name. In a time when new JavaScript frameworks and libraries pop up and die off with shocking regularity, React is one of three libraries released since 2010 that have stuck around and gained the kind of developer usage that will guarantee that they will be supported and in widespread use for a long time to come.
React has been able to stick around so long and gain so many users because it's always been a forward-looking framework that's not afraid to make big changes to adapt to new features in JavaScript, new ways of writing user interfaces, and feedback from developers. Over the years, React has gone through several major changes in how the basic unit of a React application, the component, is written. But, amidst all this change, React has stuck to a central paradigm and each major change to React has maintained compatibility with previous versions.
While the end result of all this change is that React has gotten easier to write and more robust over the years, it's also caused a pileup of outdated and often wrong example code and tutorials on the internet and in books. If you've done any research on React prior to buying this book, you've surely noticed this, and you've likely been confused by it. Perhaps you bought this book after having a frustrating experience with learning React online only to learn that you learned about an old version of it.
This book aims to be a solid and complete guide to all of the most important (and some less important) features, concepts, and syntaxes used in React.
This book covers everything you need to know to write high-quality React code. You'll learn about React components using the functional method of writing them as well as the class method. You'll learn about managing the state of your application using several different methods, including with React Hooks and with the setState method. You'll learn how to put components together to make complete and dynamic user interfaces. You'll learn how to fetch data from an external data source and use it in your application. And, you'll learn how to store data in the user's web browser to improve the performance and usability of your application. Speaking of usability, you'll learn about best practices for making your application work on mobile devices as well as on the desktop, and you'll also learn how to make sure that your application will be accessible.
setState
Because React takes advantage of many of the latest and greatest improvements and enhancements to the underlying JavaScript language, I'll be giving you JavaScript lessons throughout the book. Some of the new JavaScript syntax can be a little confusing to those of us who first learned the language in its early days, but I'll provide plenty of simple and real-world examples to explain each new bit of syntax or shortcut.
Although React is a JavaScript library, this is not a book for newcomers to JavaScript or to web programming. I expect that you've had at least some experience with JavaScript. If you're not familiar with the latest additions and revisions to JavaScript, that's not a problem. But, if you're new to JavaScript or to programming in general, I recommend that you learn the basics of programming with JavaScript before you tackle React.
Similarly, this is not a web design book. I assume that you're familiar with HTML and CSS and feel comfortable writing both. I also assume a basic knowledge of how web browsers work and how web pages are rendered in browsers.
Finally, this book is intended to teach the fundamentals of React to anyone who wants to gain the ability to write React applications. Although it does cover many of the most commonly used patterns and conventions in React development, and many of the more advanced topics in React are covered as well, there are many topics that will only be mentioned in passing or that had to be omitted for the sake of space. To cover everything having to do with more advanced React development would require several volumes, which would all need to be updated every couple of months.
Once you understand the fundamentals of React as taught in this book, you'll be more than qualified to explore the vast React online ecosystem and find tutorials, documentation, and example code to continue your React education.
Some of the more advanced topics that are beyond the scope of this book are: unit testing, building mobile applications with React Native, Redux, and isomorphic/universal React. If all that sounds like a bunch of nonsense jargon at this point, you came to the right place! You may not know everything about how to implement all these more advanced things by the end of the book, but you'll certainly know what they are and how to get started with them.
Programming React can feel like assembling a complex piece of furniture from a Swedish furnishing store. There are a lot of parts that don't make much sense individually, but when you follow the instructions and put them together in the right way, the simplicity and beauty of the whole thing may surprise you.
Dateiformat: ePUBKopierschutz: Adobe-DRM (Digital Rights Management)
Systemvoraussetzungen:
Das Dateiformat ePUB ist sehr gut für Romane und Sachbücher geeignet – also für „fließenden” Text ohne komplexes Layout. Bei E-Readern oder Smartphones passt sich der Zeilen- und Seitenumbruch automatisch den kleinen Displays an. Mit Adobe-DRM wird hier ein „harter” Kopierschutz verwendet. Wenn die notwendigen Voraussetzungen nicht vorliegen, können Sie das E-Book leider nicht öffnen. Daher müssen Sie bereits vor dem Download Ihre Lese-Hardware vorbereiten.Bitte beachten Sie: Wir empfehlen Ihnen unbedingt nach Installation der Lese-Software diese mit Ihrer persönlichen Adobe-ID zu autorisieren!
Weitere Informationen finden Sie in unserer E-Book Hilfe.
