The Road to React Your journey to master React in JavaScript (2023 Edition) (Robin Wieruch) (Z-Library)

The Road to React Your journey to master React in JavaScript Robin Wieruch This book is for sale at http://leanpub.com/the-road-to-learn-react This version was published on 2021-06-01 This is a Leanpub book. Leanpub empowers authors and publishers with the Lean Publishing process. Lean Publishing is the act of publishing an in-progress ebook using lightweight tools and many iterations to get reader feedback, pivot until you have the right book and build traction once you do. © 2016 - 2021 Robin Wieruch

Tweet This Book! Please help Robin Wieruch by spreading the word about this book on Twitter! The suggested tweet for this book is: I am going to learn #ReactJs with The Road to React by @rwieruch Join me on my journey https://roadtoreact.com The suggested hashtag for this book is #ReactJs. Find out what other people are saying about the book by clicking on this link to search for this hashtag on Twitter: #ReactJs

Contents Foreword . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 About the Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 FAQ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Who is this book for? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Fundamentals of React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Hello React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Setting up a React Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Meet the React Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 React JSX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Lists in React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Meet another React Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 React Component Instantiation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 React DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 React Component Definition (Advanced) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 Handler Function in JSX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 React Props . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 React State . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 Callback Handlers in JSX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Lifting State in React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 React Controlled Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Props Handling (Advanced) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 React Side-Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 React Custom Hooks (Advanced) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 React Fragments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 Reusable React Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 React Component Composition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 Imperative React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 Inline Handler in JSX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 React Asynchronous Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94 React Conditional Rendering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 React Advanced State . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100 React Impossible States . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104

CONTENTS Data Fetching with React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 Data Re-Fetching in React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 Memoized Handler in React (Advanced) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 Explicit Data Fetching with React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 Third-Party Libraries in React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 Async/Await in React (Advanced) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 Forms in React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 React’s Legacy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126 React Class Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 React Class Components: State . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130 Imperative React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132 Styling in React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134 CSS in React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 CSS Modules in React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142 Styled Components in React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148 SVGs in React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154 React Maintenance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157 Performance in React (Advanced) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158 TypeScript in React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167 Testing in React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177 React Project Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204 Real World React (Advanced) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209 Sorting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210 Reverse Sort . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216 Remember Last Searches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 Paginated Fetch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229 Deploying a React Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239 Build Process . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240 Deploy to Firebase . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241 Outline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244

Foreword The Road to React teaches the fundamentals of React. You will build a real-world application in plain React without complicated tooling. Everything from project setup to deployment on a server will be explained to you. The book comes with additional referenced reading material and exercises with each chapter. After reading the book, you will be able to build your own applications in React. The material is kept up to date by myself and the community. In the Road to React, I offer a foundation before you dive into the broader React ecosystem. It explains general concepts, patterns, and best practices for a real-world React application. Essentially, you will learn to build your own React application from scratch, with features like pagination, client-side and server-side searching, and advanced interactions like sorting. I hope this book captures my enthusiasm for React and JavaScript, and that it helps you get started with it.

Foreword 2 About the Author I am a German software and web developer dedicated to learning and teaching JavaScript. After obtaining my Master’s Degree in computer science, I gained experience from the startup world where I used JavaScript intensively during both my professional life and spare time. For a few years, I worked closely with an exceptional team of engineers at a company in Berlin, developing large- scale JavaScript applications, which eventually led to a desire to teach others about these topics. During my time as a developer in Berlin, I regularly wrote articles about web development on my website. I received great feedback from people learning from my articles which allowed me to improve my writing and teaching style. Article after article, I grew my ability to teach others. I find it it fulfilling to see students strive by giving them clear objectives and short feedback loops. Currently, I am a self-employed developer helping companies in creating their MVPs, conducting workshops and code audits/reviews, and creating large-scale JavaScript applications. You can find more information about me, ways to support me, and how to work with me on my website¹. ¹https://www.robinwieruch.de/about

Foreword 3 FAQ How to get updates? I have two channels where I share updates about my content. You can subscribe to updates by email² or follow me on Twitter³. Regardless of the channel, my objective is to only share quality content. Once you receive a notification about an update, you can download a new version of the book from my website. Is the learning material up-to-date? Programming books are usually outdated soon after their release, but since this book is self- published, I can update it as needed whenever a new version of something related to this book gets released. Can I get a digital copy of the book if I bought it on Amazon? If you have bought the book on Amazon, youmay have seen that the book is available onmywebsite too. Since I use Amazon as one way to monetize my often free content, I honestly thank you for your support and invite you to sign up for my courses on my website⁴. After creating an account there, write me an email about your purchase with a receipt from Amazon, so that I can unlock the content for you. With an account on my platform, you always have access to the latest version of the book. Why is the print copy so large in size? If you have purchased the print version of the book, make sure to take notes in the book. It was my intention to keep the printed book extra-large, for the sake of giving larger code snippets enough space, but also for giving you enough space to work with it. How can I get help while reading the book? The book has a community of learners who help each other and for people who are reading along. You can join the community to get help or to help others, as helping others may help you internalize your own understanding. Just follow the navigation to my courses on my website⁵, sign up there, and navigate to joining the community. Can I help to improve the content? If you have feedback, shoot me an email and I will consider your suggestions. Don’t expect many replies for bug tracking or troubleshoots though because that’s what’s the community for. What do I do if I encounter a bug? If you encounter any bug in the code, you should find a URL to the current GitHub project at the end of each section. Feel free to open a GitHub issue there. Your help is very much appreciated! ²https://www.getrevue.co/profile/rwieruch ³https://twitter.com/rwieruch ⁴https://www.robinwieruch.de ⁵https://www.robinwieruch.de

Foreword 4 How to support the project? If you find my lessons useful and would like to contribute, seek my website’s about page⁶ for information about how to offer support. It is also very helpful for my readers to spread the word about how my books helped them, so others might discover it as ways to improve their web development skills. Contributing through any of the provided channels gives me the freedom to create in-depth courses, and to continue offering free material on my website. What’s your motivation behind the book? I want to teach about this topic consistently. I often find materials online that don’t receive updates, or only apply to a small part of a topic. Sometimes people struggle to find consistent and up-to-date resources to learn from. I want to provide this consistent and up-to-date learning experience. Also, I hope I can support the less fortunate with my projects by giving them the content for free or by having other impacts⁷. ⁶https://www.robinwieruch.de/about/ ⁷https://www.robinwieruch.de/giving-back-by-learning-react

Foreword 5 Who is this book for? JavaScript Beginners JavaScript beginners with knowledge in fundamental JS, CSS, and HTML: If you just started out with web development, and have a basic grasp of JS, CSS, and HTML, this book should give you everything that’s needed to learn React. However, if you feel there is a gap in your JavaScript knowledge, don’t hesitate to read up on that topic before continuing with the book. You will have lots of references to fundamental JavaScript knowledge in this book though. JavaScript Veterans JavaScript veterans coming from jQuery: If you have used JavaScript with jQuery, MooTools, and Dojo extensively back in the days, the new JavaScript era may seem overwhelming for someone getting back on track with it. However, most of the fundamental knowledge didn’t change, it’s still JavaScript and HTML under the hood, so this book should give you the right start into React. JavaScript Enthusiasts JavaScript enthusiasts with knowledge in other modern SPA frameworks: If you are coming from Angular or Vue, there may be lots of differences in how to write applications with React, however, all these frameworks share the same fundamentals of JavaScript and HTML. After a mindset shift to get comfortable with React, you should be doing just fine adopting React. Non-JavaScript Developers If you are coming from another programming language, you should be more familiar than others with the different aspects of programming. After picking up the fundamentals of JavaScript and HTML, you should have a good time learning React with me. Designers and UI/UX Enthusiasts If your main profession is in design, user interaction, or user experience, don’t hesitate to pick up this book. You may be already quite familiar with HTML and CSS which is a plus. After going through somemore JavaScript fundamentals, you should be good to get through this book. These days UI/UX is moving closer to the implementation details which are often taken care of with React. It would be your perfect asset to know how things work in code. Team Leads, Product Owners, or Product Managers If you are a team lead, product owner or product manager of your development department, this book should give you a good breakdown of all the essential parts of a React application. Every section explains one React concept/pattern/technique to add another feature or to improve the overall architecture. It’s a well-rounded reference guide for React.

Fundamentals of React In this first part of this learning experience, we’ll cover the fundamentals of React, with which we’ll create our first React project. Later we’ll explore new use cases for React by implementing real features like client and server-side searching, remote data fetching, and advanced state management the same as developing an actual web application. By the end, you will have a fully running React application that interacts with real-world data.

Fundamentals of React 7 Hello React Single-page applications (SPA⁸) have become increasingly popular with first-generation SPA frame- works like Angular (by Google), Ember, Knockout, and Backbone. Using these frameworks made it easier to build web applications that advanced beyond vanilla JavaScript and jQuery. React, yet another solution for SPAs, was released by Facebook later in 2013. All of them are used to create web applications in JavaScript. For a moment, let’s go back in time before SPAs existed: In the past, websites and web applications were rendered from the server. A user visits a URL in a browser and requests one HTML file and all its associated HTML, CSS, and JavaScript files from a web server. After some network delay, the user sees the rendered HTML in the browser (client) and starts to interact with it. Every additional page transition (meaning: visiting another URL) would initiate this chain of events again. In this version from the past, essentially everything crucial is done by the server, whereas the client plays a minimal role by just rendering page by page. While barebones HTML and CSS were used to structure the application, just a little bit of JavaScript was thrown into the mix to make interactions (e.g. toggling a dropdown) or advanced styling (e.g. positioning a tooltip) possible. A popular JavaScript library for this kind of work was jQuery. In contrast, modern JavaScript shifted the focus from the server to the client. The most extreme version of it: A user visits a URL and requests one small HTML file and one larger JavaScript file. After some network delay, the user sees the rendered HTML by JavaScript in the browser and starts to interact with it. Every additional page transition wouldn’t request more files from the web server, but would use the initially requested JavaScript to render the new page. Also, every additional interaction by the user is handled on the client too. In this modern version, the server delivers mainly JavaScript across the wire with one minimal HTML file. The HTML file then executes all the linked JavaScript on the client-side to render the entire application with HTML and JavaScript for its interactions. React, among the other SPA solutions, makes this possible. Essentially a SPA is one bulk of JavaScript, which is neatly organized in folders and files, to create a whole application whereas the SPA framework (e.g. React) gives you all the tools to architect it. This JavaScript-focused application is delivered once over the network to your browser when a user visits the URL for your web application. From there, React, or any other SPA framework, takes over for rendering everything in the browser and for dealing with user interactions. With the rise of React, the concept of components became popular. Every component defines its look and feel with HTML, CSS, and JavaScript. Once a component is defined, it can be used in a hierarchy of components for creating an entire application. Even though React has a strong focus on components as a library, the surrounding ecosystem makes it a flexible framework. React has a slim API, a stable yet thriving ecosystem, and a welcoming community. We are happy to welcome you :-) ⁸https://en.wikipedia.org/wiki/Single-page_application

Fundamentals of React 8 Exercises • Read more about how we moved from websites to web applications⁹. • Read more about why I moved from Angular to React¹⁰. • Read more about how to learn a framework¹¹. • Read more about how to learn React¹². • Read more about JavaScript fundamentals needed for React¹³ – without worrying too much about React here – to challenge yourself with several JavaScript features used in React. ⁹https://www.robinwieruch.de/web-applications ¹⁰https://www.robinwieruch.de/reasons-why-i-moved-from-angular-to-react ¹¹https://www.robinwieruch.de/how-to-learn-framework ¹²https://www.robinwieruch.de/learn-react-js ¹³https://www.robinwieruch.de/javascript-fundamentals-react-requirements

Fundamentals of React 9 Requirements To follow this book, you’ll need to be familiar with the basics of web development, i.e how to use HTML, CSS, and JavaScript. It also helps to understandAPIs¹⁴, as theywill be covered in this learning experience. Along with these skills, you’ll need the following tools to code with me while reading this book. Editor and Terminal I have provided a setup guide¹⁵ to get you started with general web development. For this learning experience, you will need a text editor (e.g. Sublime Text) and a command line tool (e.g. iTerm). As an alternative, I recommend using an IDE, for example Visual Studio Code (also called VSCode), for beginners, as it’s an all-in-one solution that provides an advanced editor with an integrated command line tool, and because it’s a popular choice among web developers. If you don’t want to set up the editor/terminal combination or IDE on your local machine, CodeSandbox¹⁶, an online editor, is also a viable alternative. While CodeSandbox is a great tool for sharing code online, a local machine setup is a better tool for learning the different ways to create a web application. Also, if you want to develop applications professionally, a local setup will be required. Throughout this learning experience, I will use the term command line, which will be used synonymously for the terms command line tool, terminal, and integrated terminal. The same applies to the terms editor, text editor, and IDE, depending on what you decided to use for your setup. Optionally, I recommend managing projects onGitHubwhile we conduct the exercises in this book, and I’ve provided a short guide¹⁷ on how to use these tools. Github has excellent version control, so you can see what changes were made if you make a mistake or just want a more direct way to follow along. It’s also a great way to share your code later with other people. Node and NPM Before we can begin, we’ll need to haveNode andNPM¹⁸ installed. Both are used tomanage libraries (node packages) that you will need along the way. These node packages can be libraries or whole frameworks. We’ll install external node packages via npm (node package manager). You can verify node and npm versions in the command line using the node --version and npm -- version commands. If you don’t receive output in the terminal indicating which version is installed, you need to install node and npm: ¹⁴https://www.robinwieruch.de/what-is-an-api-javascript/ ¹⁵https://www.robinwieruch.de/developer-setup ¹⁶https://codesandbox.io/ ¹⁷https://www.robinwieruch.de/git-essential-commands/ ¹⁸https://nodejs.org/en/

Fundamentals of React 10 Command Line node --version *vXX.YY.ZZ npm --version *vXX.YY.ZZ If you have already installed Node and npm, make sure that your installation is the most recent version. If you’re new to npm or need a refresher, this npm crash course¹⁹ I created will get you up to speed. ¹⁹https://www.robinwieruch.de/npm-crash-course

Fundamentals of React 11 Setting up a React Project In the Road to React, we’ll use create-react-app²⁰ to bootstrap your application. It’s an opinionated yet zero-configuration starter kit for React introduced by Facebook in 2016, which is recommended for beginners by 96% of React users²¹. In create-react-app, the tooling and configuration evolve in the background, while the focus remains on the application’s implementation. After installing Node and NPM, use the command line to type the following command in a dedicated folder for your project. We’ll refer to this project as hacker-stories, but you may choose any name you like: Command Line npx create-react-app hacker-stories Navigate into your new folder after the setup has finished: Command Line cd hacker-stories Now we can open the application in an editor or IDE. For Visual Studio Code, you can simply type code . on the command line. The following folder structure, or a variation of it depending on the create-react-app version, should be presented: Project Structure hacker-stories/ --node_modules/ --public/ --src/ ----App.css ----App.js ----App.test.js ----index.css ----index.js ----logo.svg --.gitignore --package-lock.json --package.json --README.md This is a breakdown of the most important folders and files: ²⁰https://github.com/facebook/create-react-app ²¹https://twitter.com/dan_abramov/status/806985854099062785

Fundamentals of React 12 • README.md: The .md extension indicates the file is a markdown file. Markdown is a lightweight markup language with plain text formatting syntax. Many projects come with a README.md file that gives instructions and useful information about the project. When we push projects to platforms like GitHub, theREADME.md file usually displays information about the content contained in its repositories. Because you used create-react-app, your README.md should be the same as the official’s create-react-app GitHub repository²². • node_modules/: This folder contains all node packages that have been installed. Since we used create-react-app, a couple of node modules are already installed. We’ll not touch this folder, since node packages are usually installed and uninstalled with npm via the command line. • package.json: This file shows you a list of node package dependencies and other project configurations. • package-lock.json: This file indicates npm how to break down all node package versions.We’ll not touch this file. • .gitignore: This file displays all files and folders that shouldn’t be added to your git repository when using git, as such files and folders should be located only in your local project. The node_modules/ folder is one example. It is enough to share the package.json file with others, so they can install dependencies on their endwith npm installwithout your entire dependency folder. • public/: This folder holds development files, such as public/index.html. The index file is displayed on localhost:3000 when the app is in development or on a domain that is hosted elsewhere. The default setup handles relating this index.html with all the JavaScript from src/. In the beginning, everything you need is located in the src/ folder. The main focus lies on the src/App.js file which is used to implement React components. It will be used to implement your application, but later you might want to split up your components into multiple files, where each file maintains one or more components on its own. We will arrive at this point eventually. Additionally, you will find a src/App.test.js file for your tests, and a src/index.js as an entry point to the React world. You will get to know both files intimately in later sections. There is also a src/index.css and a src/App.css file to style your overall application and components, which comes with the default style when you open them. You will modify them later as well. After you have learned about the folder and file structure of your React project, let’s go through the available commands to get it started. All your project-specific commands can be found in your package.json under the scripts property. They may look similar to these: ²²https://github.com/facebook/create-react-app

Fundamentals of React 13 package.json { ... }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, ... } These scripts are executed with the npm run <script> command in an IDE-integrated terminal or your standalone command line tool. The run can be omitted for the start and test scripts. The commands are as follows: Command Line # Runs the application in http://localhost:3000 npm start # Runs the tests npm test # Builds the application for production npm run build Another command from the previous npm scripts called eject shouldn’t be used for this learning experience. It’s a one-way operation, because once you eject, you can’t go back. Essentially this command is only there to make all the tooling and configuration from create-react-app accessible if you are not satisfied with the choices or if you want to change something. Here we will keep all the defaults though. Exercises: • Read a bit more through React’s create-react-app documentation²³ and getting started guide²⁴. – Read more about the supported JavaScript features in create-react-app²⁵. • Read more about the folder structure in create-react-app²⁶. ²³https://github.com/facebook/create-react-app ²⁴https://create-react-app.dev/docs/getting-started ²⁵https://create-react-app.dev/docs/supported-browsers-features ²⁶https://create-react-app.dev/docs/folder-structure

Fundamentals of React 14 – Go through all of your React project’s folders and files one by one. • Read more about the scripts in create-react-app²⁷. – Start your React application with npm start on the command line and check it out in the browser. * Exit the command on the command line by pressing Control + C. – Run the npm test script. – Run the npm run build script and verify that a build/ folder was added to your project (you can remove it afterward). Note that the build folder can be used later on to deploy your application²⁸. • Every timewe change something in our code throughout the coming learning experience, make sure to check the output in your browser for getting visual feedback. Use npm start to keep your application running. • Optionally: If you use git and GitHub, add and commit your changes after every section of the book. ²⁷https://create-react-app.dev/docs/available-scripts ²⁸https://www.robinwieruch.de/deploy-applications-digital-ocean/

Fundamentals of React 15 Meet the React Component Every React application is built on the foundation of React components. In this section, you will get to know your first React component which is located in the src/App.js file and which should look similar to the example below. Depending on your create-react-app version, the content of the file might differ slightly: src/App.js import * as React from 'react'; import logo from './logo.svg'; import './App.css'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> </div> ); } export default App; This file will be our focus throughout this tutorial, unless otherwise specified. Let’s start by reducing the component to a more lightweight version for getting you started without too much boilerplate code²⁹. Afterward, start your application with npm start in the command line and check what’s displayed in the browser: ²⁹https://en.wikipedia.org/wiki/Boilerplate_code