Welcome to Bootcamp AI

Why React

Mastering React begins with learning your fundamentals, and this can pose a bit of a challenge, because while the modularity of the React ecosystem makes it really powerful for building applications, there is a great deal to learn. So we’ll break everything down, and enable you to learn the foundational parts of the React ecosystem that are necessary to build production-ready apps. As this is a project-based course, you’re going to start building right away. This gives you an opportunity to get your hands dirty with React, and start mastering the skills you’ll need. Plus, every project you build is reviewed by an expert Project Reviewer, and their detailed feedback will be instrumental in helping you to advance.

Rendering UI with React

State Management

Render UI with External Data

Managing App Location with React Router

MyReads A Book Tracking App

Why Redux

Redux excels at state management, and in this course, you’ll learn how Redux and React work together to make your application’s state bulletproof. As with the previous course, this is hand-on curriculum, and building projects is what it’s all about. Here, you’ll leverage React with Redux to build “Would You Rather”, a popular party game.

Redux At Its Core

React Redux

Architect A Redux Store

Redux Middleware


Up and Running with React Native

React vs React Native

Styling Layout


Native Features

Mobile Flashcards

Congratulations! What’s Next

02. What is Composition


From Wikipedia, Composition is:

to combine simple functions to build more complicated ones

Let’s take a look at how we can build up complex functions just by combining simple ones together.

How Composition Works

Benefits of Composition

Because the concept of composition is such a large part of what makes React awesome and incredible to work with, let’s dig into it a little bit. Remember that composition is just combining simple functions together to create complex functions. This is the key recipe: composition is built from simple functions!

Consider the following getProfileLink() function:

function getProfileLink (username) {
return 'https://github.com/' + username

This function is ridiculously simple, isn’t it? It’s just one line! Similarly, the getProfilePic function is also just a single line:

function getProfilePic (username) {
return 'https://github.com/' + username + '.png?size=200'

These are definitely simple functions, so to compose them, we’d just combine them together inside another function:

function getProfileData (username) {
return {
pic: getProfilePic(username),
link: getProfileLink(username)

Now we could have written getProfileData without composition by providing the data directly:

function getProfileData (username) {
return {
pic: 'https://github.com/' + username + '.png?size=200',
link: 'https://github.com/' + username

There’s nothing technically wrong with this at all; this is entirely accurate JavaScript code. But this isn’t composition. There are also a couple of potential issues with this version that isn’t using composition. If the user’s link to GitHub is needed somewhere else, then duplicate code would be needed. A good function should follow the “DOT” rule:

Do One Thing

This function is doing a couple of different (however minor) things; it’s creating two different URLs, storing them as properties on an object, and then returning that object. In the composed version, each function just does one thing:

  • getProfileLink – just builds up a string of the user’s GitHub profile link
  • getProfilePic – just builds up a string the user’s GitHub profile picture
  • getProfileData – returns a new object

React & Composition

React makes use of the power of composition, heavily! React builds up pieces of a UI using components. Let’s take a look at some pseudo code for an example. Here are three different components:

<Page />
<Article />
<Sidebar />

Now let’s take these simple components, combine them together, and create a more complex component (aka, composition in action!):

<Article />
<Sidebar />

Now the Page component has the Article and Sidebar components inside. This is just like the earlier example where getProfileData had getProfileLink and getProfilePic inside it.

We’ll dig into components soon, but just know that composition plays a huge part in building React components.

Composition Recap

Composition occurs when simple functions are combined together to create more complex functions. Think of each function as a single building block that does one thing (DOT). When you combine these simple functions together to form a more complex function, this is composition.

Further Research