Samer Buna is a polyglot coder with years of practical experience in designing, implementing, and testing software, including web and mobile applications development, API design, functional programming, optimization, system administration, databases, and scalability. Samer worked in several industries including real estate, government, education, and publications
The GitHub Cards App We've seen simple components, we worked with multiple components, and we've seen how and when to use state and props of a component. However, we haven't really worked with any real data yet. We're going to be doing exactly that in this course module, and we'll use the GitHub public REST API for it. We're going to build a simple GitHub profile card component that displays information about lists of GitHub profiles. There's a form here where the user can type in another GitHub handle and use the Add card to add a new profile to the list of displayed profiles. So we will be learning how to take input from the user here and how to use that input to make calls to an API, the GitHub API for this example. And the goal of this app is to get you comfortable working with data objects, but the other thing about this app is that we're going to use React class components in here. While the React team might eventually decide to phase out class components in favor of stateful functions, although no plans for that yet, but class components have been the norm in React for a long time, and many React projects will continue to use them, as a React developer, you're expected to understand and be comfortable with both function and class components. This is going to be the only example we'll write using the class components in this course. After that, the bigger game application will be entirely written with function components and Hooks, and I am certain that you're going to like working with function components a lot more than class ones, but you still need to learn them both.
Setting up a Development Environment Now that you've learned the basics of the React API, you need to set up a local development environment. You can't just keep using the playground tool. Setting up a development environment is not going to be fun. You need to make many different tools work together. These tools have different APIs, and each tool will need to be configured, and all of these tools have different release cycles, so you might run into problems where versions might not be compatible and won't work together. The whole environment might suddenly stop working after a certain upgrade in the tools, and you'll have to spend some time debugging environment issues. Furthermore, a development environment is different from a production environment, which means what works for you in development might not work in production, so you'll have to set up a production environment locally on your machine as well to test your changes in a simulated environment. And don't forget that you need an official test environment as well. Tracking what needs to be configured for each environment is challenging. We've been rendering React applications to the DOM. That's just one renderer for many. Your React application might need to be server-side rendered as well, and there's also the test renderer, which treats your application a bit differently. These different renderers often need different configurations. Luckily, there are some high-level tools that you can use to escape some of the nightmares of dealing with environments, debugging them, and keeping them up to date. The most popular tool in the React ecosystem is create-react-app. As a beginner, this is a very good first step, so let me show you how to use it.