Õppige reageerima, luues meemigeneraatori

Meemid on suurepärased - nad on nii lõbus viis kirjeldada ideid ja arvamusi. Nii et pole juhus, et valisin Scrimba tasuta Reacti kursusel nurgakiviprojektiks meemigeneraatori rakenduse. Rakendus töötab tõmmates API-st juhusliku meemipildi ja asetades oma teksti selle kohale, et luua oma isikupärastatud meem.

Nii et selles artiklis annan teile üksikasjaliku juhendi rakenduse loomiseks. Kui teil on kunagi segadus, võite järgida neid samme ka Scrimba kursusel, alustades sellest loengust.

Ja kui teile meeldib minu õpetamisstiil ja teil on pärast selle õpetuse lõpetamist raskem väljakutse, vaadake palun minu eelseisvat Scrimba edasijõudnutele mõeldud kursust.

Märkus. Te peaksite juba olema üsna tuttav mõne React'i põhimõistega, nagu komponendid, olek, rekvisiidid ja elutsükli meetodid. Samuti ei kasutata selles õpetuses konksusid, kuid minu eelseisval kursusel käsitleme konksusid põhjalikult ja saame nende kasutamise kohta palju praktikat.

1. Katlaplaadi loomine ja rakenduse komponendi renderdamine

Katla ülesande loomine

Esimene asi, mida peame tegema, on luua rakenduse katlakood. Selleks impordime Reactja ReactDOMkasutame ReactDOMrenderdamiseks komponenti nimega App, mille loome hiljem. Seejärel panime Appkomponendi juurte juurde. Impordime Appka selle failist "./App", mille peagi loome.

// index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(, document.getElementById('root')); 

Seejärel loome oma App.jsfaili. Selles loome funktsionaalse komponendi, mille nimi Appon praegu lihtne

. Seejärel ekspordime selle. The

võimaldab meil kontrollida, kas rakendus kuvatakse ekraanil õigesti.

import React from 'react'; function App() { return 

Hello world!

; } export default App;

Saadud väljund on järgmine:

Renderdatud Hello World

2. Headeri ja MemeGeneratori komponentide loomine

Ülesande Header ja MemeGenerator loomine

Järgmisena loome komponendid Header ja MemeGenerator. Päis kuvab ainult elemente, samal ajal kui MemeGenerator helistab API-le ja säilitab andmed olekus.

Alustame Header.jsfaili loomisega . Kuna päis on komponent, mida kasutatakse ainult kuvamiseks, peaks see olema funktsionaalne komponent. Praegu peaks komponent tagastama lihtsa

. Pärast selle loomist ekspordime päise.

import React from 'react'; function Header() { return 

HEADER

; } export default Header;

Järgmisena loome MemeGenerator.jsfaili. Kuna MemeGeneratorkomponent hoiab andmeid ja helistab API-le, peab see olema klassi komponent. Peame ikkagi Reacti importima ja kuna see saab olema klassi komponent, siis impordime Componentka (see on nimega import).

MemeGenerator vajab constructor()mis kutsub super()ja kuna see on olekus, lisame sellele nüüd tühja oleku. Nagu komponendis Päis, muudame ka lihtsa

alustuseks. Seejärel ekspordime MemeGenerator.

import React, { Component } from 'react'; class MemeGenerator extends Component { constructor() { super(); this.state = {}; //empty state } render() { return 

MEME GENERATOR SECTION

; } } export default MemeGenerator;

Nüüd impordime nii päise kui ka MemeGeneratori App.jsrakenduse komponenti ja loome neist igaühe eksemplari. Komponentide õigeks kuvamiseks mähkime need a-sse .

import React from 'react'; import Header from './Header'; import MemeGenerator from './MemeGenerator'; function App() { return ( ); } export default App; 

3. Päise komponendi täitmine.

To complete the component, we add a trollface image by inserting an tag and setting the src to the image's URL. We then add a

tag with the name of our app and wrap them both in the semantic HTML5 tag.

function Header() { return (  Problem?

Meme Generator

); }

As styling is outside the scope of this course, the CSS styles have already been created and applied to the tag. The result is this:

Renderdatud päis

That said, learners can always play around with the styling and hone their CSS skills by themselves. With the now complete, the rest of the challenge will take place in

4. Initializing state

Riigi ülesande lähtestamine

We now have to initialize state so that it saves a top text, a bottom text and a random image, which is already supplied.

To do this, we build up the empty object we placed in the when we originally built it. We initialize topText and bottomText as empty strings and randomImg as the provided URL.

class MemeGenerator extends Component { constructor() { super(); this.state = { topText: '', bottomText: '', randomImg: '//i.imgflip.com/1bij.jpg' }; } } 

5. Making the API call

API kõneülesande tegemine

Next, we make an API call to the provided URL and save the data returned (which is an array found in response.data.memes) to a new state property called allMemeImgs.

When we need to load data from an endpoint to use in our component, a good place to make the request is the componentDidMount() lifecycle method. As soon as the component mounts, we use the native fetch() function to call to the provided URL.

componentDidMount() { fetch("//api.imgflip.com/get_memes") } 

This returns a promise which we turn into a Javascript object with the .json() method.

componentDidMount() { fetch("//api.imgflip.com/get_memes") .then(response => response.json()) } 

Then we get the response which is useful to us by pulling the memes array from response.data.

componentDidMount() { fetch("//api.imgflip.com/get_memes") .then(response => response.json()) .then(response => { const { memes } = response.data }) } 

Now, we save the results to a new state property called allMemeImgs. To do this, we initialize allMemeImgs as an empty array.

this.state = { topText: '', bottomText: '', randomImg: '//i.imgflip.com/1bij.jpg', allMemeImgs: [] }; 

Now, back in componentDidMount(), we set state. As we are not interested in what the previous state was, we set allMemeImgs to memes.

componentDidMount() { fetch("//api.imgflip.com/get_memes") .then(response => response.json()) .then(response => { const { memes } = response.data this.setState({ allMemeImgs: memes }) }) } 

To ensure that it works, we console.log the first item, which looks something like this:

console.log väljund

Here's an overview of the entire componentDidMount() function.

componentDidMount() { //ensure that data is fetched at the beginning fetch("//api.imgflip.com/get_memes") //call to URL .then(response => response.json()) //turn promise into JS object .then(response => { const { memes } = response.data //pull memes array from response.data console.log(memes[0]) // check data is present this.setState({ allMemeImgs: memes }) // set allMemeImgs state }) } 

6. Creating the input form

We now want to create a form which will eventually allow the user to input the top and bottom texts. We do this with an HTML tag and a simple which says 'Gen'. We style it with the pre-provided CSS.

render() { return ( Gen ) } 

Nupp Renderdatud gen

7. Adding input fields to the form

Sisendväljade ülesande lisamine

Next, it is up to us to add the two input fields (one for the top text and one for the bottom text). The form should be a controlled form, so we will need to add all the attributes needed in order for that to work. We will create the onChange handler later.

We create two input fields which both have the type text and appropriate name attributes (topText and bottomText). Rather than using labels, we use placeholders: 'Top Text' and 'Bottom Text'.

Lastly, in order to make this a controlled form, we set the value as equal to the current value in state with {this.state.topText} and {this.state.bottomText}.

render() { return ( Gen ) } 

8. Creating the onChange handler.

OnChange'i käitleja ülesande loomine

Now, we create the onChange handler, which will update the corresponding state on every change of the input field.

First, we create a handleChange() function which receives an event.

handleChange(event) { } 

Now, we set the onChange of both input fields to equal handleChange.

   Gen  

We need to remember to bind the method in the constructor — a common gotcha for React developers.

constructor() { super() this.state = { topText: "", bottomText: "", randomImg: "//i.imgflip.com/1bij.jpg", allMemeImgs: [] } this.handleChange = this.handleChange.bind(this) } 

To test the new handleChange() function, we add a simple console.log:

handleChange(event) { console.log("Working!") } 

If it is correctly firing, you'll see something like this:

Renderdatud console.log (

Now to fill in the handleChange() function. To do this, we want to pull the name and value properties from event.target so that we can get the name of the state we are supposed to update (topText or bottomText) and the value which is typed into the box.

handleChange(event) { const { name, value } = event.target } 

We will now use these to update state. As we are not interested in what the previous state was, we can just provide an object in which we set the [name] to the value typed into the input field.

handleChange(event) { const {name, value} = event.target this.setState({ [name]: value }) } 

9. Displaying a meme image alongside the top and bottom text

We now want the app to display a meme image alongside the top and bottom text. We insert an tag underneath the and set the randomImg which we initialized as its source by using src={this.state.randomImg}. We then add two

tags which display the corresponding text which is also saved in state. All of this is wrapped in a div and styled with the pre-provided meme class.

{this.state.topText}

{this.state.bottomText}

We can now test the app by typing into the text boxes. As state is being correctly set on every keystroke, the text displayed on the image changes each time we type.

Esitatud näide senistest edusammudest

10. Displaying a random meme image alongside the Top and Bottom text

Juhusliku meemipildi ülesande kuvamine

Now, we need to create a method which displays a meme image which it randomly chooses from our allMemeImgs array when the Gen button is clicked. The property on the chosen image in the array is .url.

We can break this task down into smaller parts.

Firstly, we set the form's onSubmit to equal the name of our new method, which we will call handleSubmit().

We now create the handleSubmit() function above the render() function. We need to preventDefault on the event, otherwise, the method will try to refresh the page.

handleSubmit(event) { event.preventDefault() } 

We also need to bind handleSubmit() in our constructor().

constructor() { super() this.state = { topText: "", bottomText: "", randomImg: "//i.imgflip.com/1bij.jpg", allMemeImgs: [] } this.handleChange = this.handleChange.bind(this) this.handleSubmit = this.handleSubmit.bind(this) } 

Now, we need to get a random number, get the meme from that index and set randomImg to the .url of the random item.

handleSubmit(event) { event.preventDefault() // get a random int (index in the array) // get the meme from that index // set `randomImg` to the `.url` of the random item I grabbed } 

To get a random number, we use Math.floor(Math.random). To make sure that it is one of the indices in our allMemeImgs array, we multiply by the length of the array.

const randNum = Math.floor(Math.random() * this.state.allMemeImgs.length); 

We now set randMemeImg to equal allMemeImgs, with the index of allMemeImgs as the randNum we just got. We then add .url to the end of it.

const randMemeImg = this.state.allMemeImgs[randNum].url; 

Now, all we need to do is update the state by updating the randomImg property with randMemeImg.

this.setState({ randomImg: randMemeImg }); 

Our completed handleSubmit() function looks like this:

handleSubmit(event) { event.preventDefault() const randNum = Math.floor(Math.random() * this.state.allMemeImgs.length) const randMemeImg = this.state.allMemeImgs[randNum].url this.setState({ randomImg: randMemeImg }) } 

Completed Meme Generator

Töötav rakendus

We now have completed the meme generator app, and get a different image every time we hit the Gen button, which is then overlaid with the text we input.

Õppimise edendamiseks võiksime mängida koodiga ja vaadata, kas saame seda paremaks muuta, või proovida pilte hankida teisest API-st. Mõne tõeliselt suure koormusega praktika jaoks võiksime isegi kogu koodi kustutada ja proovida seda uuesti nullist üles ehitada.

Õnnitleme teid juhendaja läbimisel ja kõigi selles projektis kasutatud oskuste õppimisel.

Ja kui olete selleks valmis, vaadake minu eelseisvat edasijõudnutele mõeldud kursust, kuna see viib teid Reactis professionaalsele tasemele!