React Project One: Build a Madlib Game


Not CompletedMadlib Project Overview

Hi, welcome to the react portion of the Python React. J.S. course and in this module we will be building out the Bottega Mad Libs application which you see here on the screen.

Not CompletedMadlib Project Creation and Version Control Implementation

Hi and welcome to this guide where we will be setting up our react project with the dev camp js project builder node module. Once we generate our project we will place it under version control and make our first commit.

Not CompletedHow to Style the Header in the Madlib Project

Now that we have a project under source control and up and running in the browser we will start building our Mad Libs react app. This video will cover the header for our application a somewhat brief explanation of what JSX is and how JSX works.

Not CompletedIntroduction to React Form Components and State Management

Hi and welcome to this guide where we will be developing our first component. This component is our mad lib form component.

Not CompletedReact Rendering and Inputs

Hi and welcome to this guide. In the last guide we introduced components and we created our first component which was the mad lib form component.

Not CompletedOverview of Properties and State in React JS

Hi and welcome back to the react course. In this guide, we will be introducing instance properties, props, and state.

Not CompletedBuilding the Form Component and Input Styles

Welcome back to the react course where we're building out the Bottega Mad Libs App and the last time we were introduced to the concept of props and state.

Not CompletedGuide to Using Functional Components in React

Welcome back to the react course where we are building out the Bottega Mad Lib app and in the last guide we added a whole bunch of styles to our mad lib form component and we also styled our inputs and in this guide we will be introducing functional components and we will be using one to render out our inputs from now on.

Not CompletedConnecting Form Data to the Madlib Generation Process

Welcome back to the react course where we are building out the Bottega Mad Libs App in the last guide we introduced functional components and we greatly reduced the amount of code in our file by first creating a functional component and then mapping over an array of input data with load action creating multiple instances of that component. That component is our input component and this guide we will be going over HTML forms and the generate mad lib button as well as styling the mad lib button.

Not CompletedHow to Clear State in React

Welcome back to the react course where we're building out the Bottega Mad Lib App. In the last guide, we introduced forms and we threw in our generate mad lib button and we talked a bit about state. How to handle the state of the form whether or not it's completed.

Not CompletedBuilding the Content Component in React

Hi and welcome back to the react course where we are building out the Bottega Mad Libs App. In the last guide, we implemented our clear button and we made it so it resets our application state our component state.

Not CompletedHow to Show and Hide Content in a React Application

Welcome back to the react course where we are building out the Bottega Mad Libs App. In the last guide, we built out the content component you see here. We also made it so whenever we type in one of these inputs that it automatically maps over to our content component and we made it so when we hit clear it goes away. In this guide, we're going to make it so when we hit generate our content component shows and when we hit clear it goes away.

Not CompletedFinalizing Component Styles for the Madlib Application

Hi and welcome back to the reactor course where we're building out of the Bottega Madlibs App. In the last guide we built out the styles for our content component and we also built in the functionality to show an hide our content component based on whether or not the form is completed.

Not CompletedDeep Dive: Props, State, and this - Part 1

Great job in working through your very first React project! You learned quite a few things but what I know, at least when I'm trying to learn a new subject especially something that's very challenging, is that many times I may have gone through something like following a tutorial like you just did and even though all the necessary concepts were covered sometimes it takes me personally a few times of going over those topics for them to really make sense and to solidify in my mind.

Not CompletedDeep Dive: Props, State, and this - Part 2

So welcome back to this part two of this deep dive on react prop state and a number of other topics.

Not CompletedMadlib React Project: App Overview

Hi and welcome to the react course. In this guide, I'm going to be going over the first application we're going to build throughout this course.

Not CompletedMadlib React Project: Generating the Application and Setting Up Git

All right, so now that we have a general idea of how the application works and we know the technologies we'll be using and learning in this application, let's go ahead and generate or project.

Not CompletedReact Guide: How to Write a Functional Component to Render a Header

Welcome back to the Mad Lib application we're building. In this guide, we are going to get started with our app now that we have it set up.

Not CompletedIntroduction to React Class Components

Hey there, and welcome back to the course. In the last guide, we set up our header component in the functional format using a functional component. In this guide, we're going to go over class components and build out the card component here.

Not CompletedAdding Card Styles to Understand the Card Component

Hi and welcome back to the React course. In the last guide, we talked about class components. We made the card component, and we created a functional component that we can render an input in with our card component.

Unsupported Browser

devCamp does not support ancient browsers.
Install a modern version for best experience.