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.
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.
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.
Hi and welcome to this guide where we will be developing our first component. This component is our mad lib form component.
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.
Hi and welcome back to the react course. In this guide, we will be introducing instance properties, props, and state.
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.
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.
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.
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.
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.
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.
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.
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.
So welcome back to this part two of this deep dive on react prop state and a number of other topics.
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.
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.
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.
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.
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.
devCamp does not support ancient browsers.
Install a modern version for best experience.