Beginning ReactJS Foundations Building User Interfaces with ReactJS
eBook - ePub

Beginning ReactJS Foundations Building User Interfaces with ReactJS

An Approachable Guide

  1. English
  2. ePUB (mobile friendly)
  3. Available on iOS & Android
eBook - ePub

Beginning ReactJS Foundations Building User Interfaces with ReactJS

An Approachable Guide

About this book

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.

Frequently asked questions

Yes, you can cancel anytime from the Subscription tab in your account settings on the Perlego website. Your subscription will stay active until the end of your current billing period. Learn how to cancel your subscription.
No, books cannot be downloaded as external files, such as PDFs, for use outside of Perlego. However, you can download books within the Perlego app for offline reading on mobile or tablet. Learn more here.
Perlego offers two plans: Essential and Complete
  • Essential is ideal for learners and professionals who enjoy exploring a wide range of subjects. Access the Essential Library with 800,000+ trusted titles and best-sellers across business, personal growth, and the humanities. Includes unlimited reading time and Standard Read Aloud voice.
  • Complete: Perfect for advanced learners and researchers needing full, unrestricted access. Unlock 1.4M+ books across hundreds of subjects, including academic and specialized titles. The Complete Plan also includes advanced features like Premium Read Aloud and Research Assistant.
Both plans are available with monthly, semester, or annual billing cycles.
We are an online textbook subscription service, where you can get access to an entire online library for less than the price of a single book per month. With over 1 million books across 1000+ topics, we’ve got you covered! Learn more here.
Look out for the read-aloud symbol on your next book to see if you can listen to it. The read-aloud tool reads text aloud for you, highlighting the text as it is being read. You can pause it, speed it up and slow it down. Learn more here.
Yes! You can use the Perlego app on both iOS or Android devices to read anytime, anywhere — even offline. Perfect for commutes or when you’re on the go.
Please note we cannot support devices running on iOS 13 and Android 7 or earlier. Learn more about using the app.
Yes, you can access Beginning ReactJS Foundations Building User Interfaces with ReactJS by Chris Minnick in PDF and/or ePUB format, as well as other popular books in Design & Programming in JavaScript. We have over one million books available in our catalogue for you to explore.

Information

Publisher
Wiley
Year
2022
Print ISBN
9781119685548
eBook ISBN
9781119685586
Edition
1
Topic
Design
Subtopic
Programming in JavaScript

1
Hello, World!

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:
  • How to use React without a toolchain.
  • How to write your first React application.
  • How to make and modify a React application built with Create React App.

REACT WITHOUT A BUILD TOOLCHAIN

Most React application development uses a build toolchain (such as the one created by Create React App) running in Node.js as its foundation. It is possible, however, to include React in an existing website or to build a website that makes use of React by just importing a couple of scripts into a web page. You can even use React code alongside JavaScript code written using another library or framework.
Follow these steps to make an HTML page and to add React to it:
  1. Create a new folder in your Documents folder and open it in Visual Studio Code.
  2. Open the Command Palette (Command+Shift+P on MacOS or Control+Shift+P on Windows) and run the File: New File command, or select File ➪ New File from the top menu.
  3. Save your new file as index.html.
  4. Type ! followed by the Tab key to generate an HTML template using emmet. If you prefer, you can also type the following code into your new blank file: 
    <!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Hello, React!</title> </head> <body>   </body> </html>
  5. Between the <body> and </body> tags, create an empty div element and give it an id attribute with the value of app. This is where you're going to tell React to render its output. In the React world, we call this the container element. The actual id value doesn't matter here, but app is a simple, easy to remember, and meaningful value that is very commonly used.
    NOTE You can put a React container element anywhere inside the body element of a web page.
  6. Go to https://reactjs.org/docs/cdn-links.html in your browser and find the script tags for including React and ReactDOM from a content delivery network (CDN), as shown in Figure 1-1.
  7. Copy both script tags and paste them right before the </body> tag in index.html.
    NOTE The reason these must go at the end of the body of your web page is that they can make changes to your web page. Because of the way JavaScript loads and then executes immediately after it loads, the browser will show an error message if your React code is loaded and executed before the container element is loaded.
    The first script, react.development.js, is the actual React library that handles the rendering of React components, the flow of data between components, responding to events, and all of the func...

Table of contents

  1. COVER
  2. TABLE OF CONTENTS
  3. TITLE PAGE
  4. INTRODUCTION
  5. 1 Hello, World!
  6. 2 The Foundation of React
  7. 3 JSX
  8. 4 All About Components
  9. 5 React DevTools
  10. 6 React Data Flow
  11. 7 Events
  12. 8 Forms
  13. 9 Refs
  14. 10 Styling React
  15. 11 Introducing Hooks
  16. 12 Routing
  17. 13 Error Boundaries
  18. 14 Deploying React
  19. 15 Initialize a React Project from Scratch
  20. 16 Fetching and Caching Data
  21. 17 Context API
  22. 18 React Portals
  23. 19 Accessibility in React
  24. 20 Going Further
  25. INDEX
  26. COPYRIGHT
  27. DEDICATION
  28. ABOUT THE AUTHOR
  29. ABOUT THE TECHNICAL EDITOR
  30. ACKNOWLEDGMENTS
  31. END USER LICENSE AGREEMENT