As state is being correctly set on every keystroke, the text displayed on the image changes each time we type.ġ0. We can now test the app by typing into the text boxes.
All of this is wrapped in a div and styled with the pre-provided meme class. We then add two tags which display the corresponding text which is also saved in state. Like in the Header component, we render a simple to start with. MemeGenerator needs a constructor() which calls super() and as it will be holding state, we add some empty state to it now. We still need to import React, and since it is going to be a class component, we'll import Component as well (which is a named import). As the MemeGenerator component will be holding data and making calls to an API, it needs to be a class component. Next, we create the MemeGenerator.js file. After creating it, we then export Header. For now, the component should return a simple. Since Header is a component which is only used to display, it should be a functional component. Let's start by creating the Header.js file. The Header will only display elements, while MemeGenerator will call to the API and retain the data in state. Next up, we create the Header and MemeGenerator components. Creating the Header and MemeGenerator components The allows us to check that the app is displaying correctly to the screen. In it, we create a functional component called App which, for now, returns a simple. ReactDOM.render(, document.getElementById('root')) We also import App from its file "./App", which we will create shortly. We then put the App component at the 'root'. To do this, we import React and ReactDOM and use ReactDOM to render a component called App, which we will create later.
Like button meme generator code#
The first thing we need to do is to create the boilerplate code for the app. Creating the boilerplate and rendering an App component Also, this tutorial doesn't use Hooks, but in my upcoming course we'll cover Hooks in depth and get tons of practice using them. Note: You should already be fairly familiar with some of the fundamental concepts of React, like components, state, props, and lifecycle methods. If you ever get confused, you can also follow these steps in the Scrimba course, starting at this lecture.Īnd then if you like my teaching style and are in the mood for a tougher challenge after you complete this tutorial, please check out my upcoming advanced course on Scrimba. So in this article, I'll give you a step-by-step guide to creating the app. The app works by pulling a random meme image from an API and placing your text over the top of it to create your very own, personalized meme.
Like button meme generator generator#
So it's no coincidence that I picked a meme generator app as the capstone project in my free React course on Scrimba. Memes are great - they're such a fun way of describing ideas and opinions.
0 kommentar(er)
