Quickly learn the most widely used front-end development language with ease and confidence. This book will walk you through the fundamental concepts of programming with the explosively popular front-end tool known as React JS. 

Beginning ReactJS Foundations Building User Interfaces with ReactJS

Beginning ReactJS Foundations Building User Interfaces with ReactJS: AN APPROACHABLE GUIDE

Preface

Since the beginning of time, the first program anyone learns to build in any new programming language is a program that displays the words “Hello, World.” Of course, the words here aren't important, and I would encourage you to choose any words you like to replace this cliché phrase. The point of this chapter is to quickly build up your understanding of how React works by using a simple and inconsequential program. But, don't be deceived—the foundational tools and techniques that you learn about in this chapter are essential to learning React. If you only read one chapter of this book, this would be the one. In this chapter, you'll learn:

Hello, World!

React is a JavaScript library for creating interactive user interfaces using components. It was created by Facebook in 2011 for use on Facebook’s newsfeed and on Instagram. In 2013, the first version of React was released to the public as open source software. Today, it's used by many of the largest websites and mobile apps, including Facebook, Instagram, Netflix, Reddit, Dropbox, Airbnb, and thousands of others.

The Foundation of React

Newcomers to React often remark on how it appears that React breaks one of the cardinal rules of web development, which is to not mix your programming logic with your HTML. This chapter explains where this misperception about React comes from and introduces JSX, which gives us an easy, HTML-like syntax for composing React components. In this chapter, you'll learn:

Up until now, we've mostly been talking about the tools that make React development possible, including your development environment, Node.js, ReactDOM, JavaScript modules, and JSX. Now it's time to dig deeply into the heart of what makes React tick: the component. In this chapter, you'll learn:

All About Components

React applications can get rather large and complex. With a large tree of components and subcomponents and all of their props and state and events, having a way to easily see what's going on inside each component, as well as to be able to filter out the noise and focus on just the components that you're interested in, becomes essential to debugging problems. React DevTools can also show you where performance issues exist in your code. In this chapter, you'll learn:

React DevTools

Data, and moving data between the different parts of an application, is a critical piece of any interactive user interface. In this chapter, you'll learn:

React Data Flow

Events, and the functions that run in response to events, are what make React reactive. In this chapter, you'll learn:

Events

HTML form elements are what make it possible for web applications to gather user input. React has built-in HTML DOM components that create native HTML form elements. The built-in React components that create HTML form elements behave somewhat differently from native HTML form elements in some important ways, however. In this chapter, you'll learn:

Forms

Refs are one of the most-often debated and controversial topics in React. Hundreds of blog posts and articles on the web will caution you to avoid refs. The official documentation for React even says (several times, in fact) that you should avoid using them, except in particular situations.

Refs

How to style React components, and React user interfaces in general, can be a polarizing topic. There are many ways to handle style in React, and you're likely to see several of them used side-by-side on most React projects.

Styling React

React Hooks give function components access to much of the functionality of React that was previously only available with class components. Hooks also give developers a simpler syntax for using state, performing tasks in response to lifecycle events, and reusing code.

Introducing Hooks

Until now, every user interface example you've seen in this book has only had a single screen and everything the application can do is displayed at once. In the real world, apps have multiple modes, tabs, and screens. The ability to change from an app's main screen to a settings screen, for example, makes it possible for user interfaces to do more while not overwhelming the user with complexity and clutter.

Routing

Even if it were possible to write perfect code, the nature of interactive web applications guarantees that once in a while something is going to break. Error boundaries will help you ensure that when something goes wrong, it won't result in the user seeing a crashed user interface.

Error Boundaries

Now that you know how to build a React UI, implement routing, catch and log errors, and several methods for fixing performance problems, you're ready to move beyond the confines of your local development machine and make your app available to its audience. In software and web development, we call this step deployment.

Deploying React

Using a pre-built build toolchain, such as Create React App, is convenient and allows React programmers to focus on the most important job at hand—programming with React. However, there are times when you'll need to customize your toolchain or adjust settings in one of the tools that make up Create React App. Knowing what tools make up your toolchain and learning how to install and configure each of them and wire them together will give you a head start.

Initialize a React Project from Scratch

It's possible to build great user interfaces that are self-contained and don't need to interact with the outside world (such as many games, calculators, and utilities). But, most web apps have a need to receive and store data.

Fetching and Caching Data

The primary way to pass data from parent components to child components in React is through props. However, in some cases props can be tedious to use and can lead to code that's more difficult to read and maintain. The Context API was created for these cases.

Context API

ReactDOM.render renders a React application in a single DOM node in a web page. But it may be a big document outside that node, and there are times when your application may need access to that larger world. React Portals provide you with a way to access and control DOM nodes beyond the root in which it’s rendered.

React Portals

Accessibility (also known as a11y , because all those letters between the a and the y are too hard to type) means that websites and web applications are designed and built in such a way so that people with disabilities can use them. The qualities that make a user interface built with React accessible are no different from those that make any web user interface accessible, but the way in which accessibility is implemented differs in some instances.

Accessibility in React

I've covered a lot of material in this book, but your React learning journey is just beginning. The React ecosystem is giant, active, and growing. What this means is that developers are constantly creating new tools to use with React and improving existing ones.

Going Further

A Abramov, Dan (React developer community), 435 accessibility also known as a 1 1 y, 413 basics of, 414–415 form accessibility, 417–418 implementing of in React components, 415–422 why is it important, 413–414 addEventListener , 200 AJAX (Asynchronous JavaScript and XML), 290 AMD (Asynchronous Module Definition), 25 Angular ( angular.io ), 18 animation events, 211 Apollo, 433–434 App component adding methods and binding them to, 191–192 converted App component, 193–195 copying and modifying of JSX in, 191 initializing state in, 190 listing for, 407 rendering NavBar inside of, 87 static version of, 163 apply function, 67 apps building of, 339–343 Clicker app, 381, 383, 384 example of, 396–398 inspecting of with Portal in Chrome Developer Tools, 402 inspecting of with Portal in React Developer Tool, 403 putting it on the web, 344–349 running built app from filesystem, 342 what's in a name, 343 working React app, 357 ARIA attributes, 416 array changing of with spread, 158 copying of with spread, 158–159 passing an empty array to only run useEffect on mount, 268 array.map function, 53 arrow functions, 39, 216–217 assertions, writing of with Chai, 427–428 asset-manifest-json , 342–343 async , 372 asynchronous code described, 369–370 where to run in React, 374–377 Asynchronous JavaScript and XML (AJAX), 290 Asynchronous Module Definition (AMD), 25 asynchronous tasks, 371 attributes ARIA attributes, 416 component attribute, 305–306 custom attributes, 56 exact attribute, 301–303, 304 non-standard attributes, 56 vs. props, 52–56 React as supporting many HTML attributes, 55 renaming of, 54 render attribute, 306–307 some as behaving differently, 55 standard HTML attributes, 54–56 as using camelCase, 54 using event listener attributes, 202 await , 372 Axios, getting data with, 377–379 axios-hooks , 286 

Community Questions