Welcome to React! In this module you'll write your first React app, and learn how to build apps using React's JSX syntax. We're intentionally starting simple, with hard-coded data and no "state" to worry about. After working through these lessons you'll understand enough of React's fundamental concepts to be able to build static apps, just as you would with plain HTML.

The first thing we'll do is get a project set up and put some text on the screen. You'll also learn how JSX is similar to HTML, and how to render dynamic context.

Before you begin, make sure you have Node and NPM installed (Yarn works too, if you have it). We'll be using the `create-react-app` command to create our app. Since you'll be creating a lot of apps throughout this workshop, I suggest installing the command on your system with `npm install -g create-react-app`.

Write Your First React App: Hello World!

The HTML-looking syntax that React uses is called "JSX" and it's actually compiled to plain JavaScript function calls before the browser ever sees the code. In this lesson we'll demystify JSX, learn how `React.createElement` works, and take a look at how the behind-the-scenes compiled version of a React app.

How JSX Compiles to Plain JavaScript

Although JSX looks a lot like HTML, it has a few key differences. In this lesson we'll see some of the features and syntax that set JSX apart from HTML, and learn to avoid a few "gotchas" that might trip you up.

Differences Between JSX and HTML

One of the best skills you can learn for React is how to break down a big problem ("build this whole app") into individual components. In the next few lessons we'll be building a Tweet component, and in this one, we're going to start off with a sketch of the finished product and break it down into components that we can build.

Sketch Before Building: a "Tweet" Component

From the sketch in the previous lesson, we know which components we need to create. In this lesson we'll write the code and get our Tweet component displayed on the screen. To focus on one thing at a time (always a good idea!), we'll use static hardcoded values for now.

Build a Tweet Component with Hardcoded Data

Your components can display dynamic data using what React calls "props". In this lesson we'll convert the static Tweet component with embedded hard-coded data into a reusable component that accepts its data as a prop.

Make Components Dynamic with Props

Having multiple components defined in a single file is nice for learning, but it quickly gets messy and hard to maintain. In this lesson you'll learn how to split up components into files — one file per component — and how to use those components in other files.

Split up a React App into Component Files

We're going to switch gears here and build a new app: a GitHub repository's file listing page. We'll get to see a few new techniques in this app, but first, we need to decide on the components to build. In this lesson we'll sketch out what the app will look like and break down the sketch into components.

Sketch Before Building: the GitHub File List

Drawing upon the list of components we created from the sketch, in this lesson we'll build the GitHub file list app. You'll learn how to render lists of components with `map`, why the `key` prop is important, and how to use React's Fragment syntax to render components without wrapper elements.

Build the GitHub File List app

One of React's more powerful (and underused) features is the children prop. In this lesson we'll learn a few ways to use children to pass dynamic content to components, along with how to give a component "slots" that can accept more than one piece of content.

Use React Children to render dynamic content

React's one-way data flow makes it easy to pass data one level down, but beyond that, it can become tedious to write pass data deeply through a tree of components. In some cases, you can avoid prop drilling by using the "slots" pattern to pass entire components as children. In this lesson you'll learn one way to refactor an app to use props as "slots" to pass dynamic content into components.

The "Slots" Pattern for Passing Multiple Children to a Component

React comes with a feature called PropTypes that let you define which props your components need, along with their types. It's a nice way of bringing some type information to your React apps without having to rewrite them in TypeScript. In this lesson you'll learn how to specify PropTypes for your components, and whether each prop is required or optional.

Validate data with PropTypes

Now that you have a functioning React app, it's time to share it with the world! In this lesson you'll learn how to build a production-ready version of your app and deploy it (free!) to the real live internet. It's quick and easy, and a great way to publish portfolio pieces.

Easing into React: An Introduction

Instructor

Course Content