ReactJs - Getting Started

This course covers the basics of React.js and prepares the student to start developing web applications with the library. React.js is a an open-source JavaScript library for creating user interfaces with a focus on the UI that's abstracted from the DOM, and a one-way reactive data flow. The course will explain using an example web application how to use React.js. The application will be a simple in-browser, math skills kids' game.

Learn the basics of React.js, and build an in-browser, math skills kids' game from scratch with it.

Course Overview

Course Overview1m

Introduction

Introduction7m

Your First Component11m

Reusable Components7m

Summary3m

Working with Data

Introduction1m

Build a Github Card Component8m

Taking Input from the User10m

Summary1m

Building the Game Interface

Introduction2m

The Main Game Component1m

The Stars, Button, and Answer Frames4m

Random Number of Stars1m

The Numbers Frame2m

Summary0m

Numbers Selection

Introduction0m

The State of Selected Numbers4m

Selecting a Number4m

Changing The Answer1m

Enhancing the UI1m

Summary0m

Game State

Introduction0m

Verifying an Answer3m

Accepting an Answer3m

Redraws3m

The Done Status2m

Winning and Losing the Game6m

Summary2m

Course Overview

Hello everyone, my name is Samer Buna, and welcome to this Getting Started with React. js course from Pluralsight. I love all things React. I use React and its ecosystem exclusively for all of my official and fun projects. React helps me be fast and productive. This course is a beginner-level course on React, but you need to be comfortable with JavaScript itself to benefit most from the course. I mostly write code in this course, and you should too. Learning to code is mostly a practical experience. Try to do and redo the examples I'll present in this course and try to expand their scope and challenge yourself with every piece of knowledge that you learn. All the code we write in this course will work with a modern environment for JavaScript and any React version beyond 15. Some of the topics that we will cover in this course include: React design concepts, components and their benefits, JSX and events handlers, working with data and APIs, taking input from the user, communicating between components, and React's one-way flow of data. By the end of this course, you should be comfortable working with React function and class components, manage an application state in React, and be able to build simple React applications from scratch. I hope you'll join me on this journey to learn the basics of the excellent React. js library in this Getting Started course, at Pluralsight.

Working with Data

We've seen simple components, we've worked with multiple components, and we've seen how and when to use state and properties of components. However, we haven't really worked with any real data yet, so we're going to be doing exactly that in this module, and we'll use the GitHub public REST API for it. We're going to build a simple GitHub card component that displays information about a GitHub user. Once we have a card component, we're going to explore how to render multiple cards for different users and have that driven from an array of objects. Then we'll add a simple input form to add a new GitHub card to the UI for a username that we read from the input using the GitHub API. Before we begin, if you don't have the react-devtools extension installed already, find it now and add it to your browser. It adds a tab in your Dev Tools console, which gives us a screen that is super helpful. It allows us to inspect and interact with the React application. You can actually go to any site that uses React and see how they structure their components here with this tool. For example, the netflix. com app can be inspected here, you can see their components and you can see every component's props and state, you can even change the state of any component directly here. For example, let's see what would happen if we change this showDisclosure state element to true. React re-rendered this component and showed a component that was not previously part of the app. Familiarize yourself with this react-devtools extension. It's going to be your best friend when you start writing React applications.

Numbers Selection

We're going to implement the numbers selection in this module, which is the core of how a user would start playing the game. They're going to see the random numbers of stars, and select one or more numbers that would sum up to that number of stars, and they will do that by clicking on the circles in the bottom Numbers component. When a player selects a number, we want that number to show up in the Answer component, and we want it to be disabled in the Numbers component so that the player can't select it again. When they accept an answer, we will reset this Answer component. We will be managing a state of selected numbers for that, and we're going to write a function to add a number to that state, and also remove a number from that state. This state element is going to be a regular array, and resetting that is as easy as reinitializing it with an empty array.

Game State

We're going to finish the game in this module, and to do so we need a few important features. We need a way for the users to check an answer, accept an answer, and figure out if there are no more possible solutions left. We're going to also implement a way for the player to redraw the numbers of random stars, and we'll see how many redraws we should give the players. The final component that we want to add to the game is the one that would display the done status, and give the players a way to play again.