Создать генератор мемов с помощью ReactJS

Опубликовано: 6 Декабря, 2021

В этом уроке мы создадим генератор мемов с использованием ReactJS. В генераторе мемов у нас есть два текстовых поля, в которые мы вводим первый текст и последний текст. После написания текста, когда мы нажимаем кнопку Gen , создается мем с изображением и написанным на нем текстом.

В этом приложении React у нас есть только один компонент: MemeGenerator. MemeGenerator содержит метод визуализации , который возвращает регулируемую форму, форма содержит два поля ввода и одну кнопку Gen. Когда компонент MemeGenerator отображается на экране, метод componentDidMount () активируется, выполняет вызов API и сохраняет полученные данные в массиве. Когда пользователь заполняет поле ввода и нажимает кнопку Gen , форма отправляется, а переменной состояния randomImg присваивается случайный URL-адрес изображения. Изображение отображается на экране вместе с текстом.

Предпосылка: Предпосылки для этого проекта:

Реагировать
Функциональные и классовые компоненты
Реагировать на AJAX и API
ES6

Начало работы с React: наше приложение React содержит два компонента: компонент App и компонент MemeGenerator.

Index.js:

Javascript

import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
 
ReactDOM.render(<App />, document.getElementById("root"))

App.js : компонент приложения отображает один компонент MemeGenerator.

Javascript

 import React from 'react' ;
 import MemeGenerator from './MemeGenerator'
 function App() {
    return (
        <div className= "App" >
            <MemeGenerator />
        </div>
    );
 }
 export App; default 

MemeGenerator.js: единственный компонент в нашем приложении - это компонент MemeGenerator. Он содержит четыре переменных состояния, и изначально все они установлены как пустая строка или пустой массив. Когда компонент монтируется на экране, выполняется вызов API, и полученные данные преобразуются в JSON и сохраняются в переменной состояния allMemeImgs [] . Компонент MemeGenerator отображает управляемую форму на экране, и когда пользователь вводит ввод, вызывается метод handleChange, а переменные состояния topText и bottomText сохраняют текст, введенный пользователем. Когда пользователь нажимает кнопку Gen , вызывается метод handleSubmit, и случайный URL-адрес изображения сохраняется в переменной randomImg. Когда randomImg получает значение, на экране отображается мем.

Ниже приведен полный код нашего компонента MemeGenerator.

Javascript

 // Import React (Mandatory Step).
 import React from "react" ;
 // MemeGenerator component to generate a meme
 class MemeGenerator extends React.Component {
  state = {
    topText: "" ,
    bottomText: "" ,
    allMemeImgs: [],
    randomImg: ""
  };
  // componentDidMount() method to fetch
  // images from the API
  componentDidMount() {
    
    // Fetching data from the API
    fetch( " https://api.imgflip.com/get_memes " )
      // Converting the promise recieved into JSON
      .then(response => response.json())
      .then(content =>
          // Updating state variables
        this .setState({
          allMemeImgs: content.data.memes
        })
      );
  }
  // Method to change the value of input fields
  handleChange = event => {
    // Destructuring the event. target object
    const { name, value } = event.target;
    
    // Updating the state variable
    this .setState({
      [name]: value
    });
  };
  // Method to submit from and create meme
  handleSubmit = event => {
    event.preventDefault();
    const { allMemeImgs } = this .state;
    const rand =
      allMemeImgs[Math.floor(Math.random()
      * allMemeImgs.length)].url;
    this .setState({
      randomImg: rand
    });
  };
  render() {
    return (
      <div>
        // Controlled form
        <form className= "meme-form" onSubmit={ this .handleSubmit}>
          // Input field to get First text
          <input
            placeholder= "Enter Text"
            type= "text"
            value={ this .state.topText}
            name= "topText"
            onChange={ this .handleChange}
          />
          // Input field to get Lsst text
          <input
            placeholder= "Enter Text"
            type= "text"
            value={ this .state.bottomText}
            name= "bottomText"
            onChange={ this .handleChange}
          />
          // Button to generate meme
          <button>Generate</button>
        </form>
        <br />
        <div className= "meme" >
          // Only show the below elements when the image is ready to be displayed
          { this .state.randomImg === "" ? "" :
            <img src={ this .state.randomImg} alt= "meme" />}
          { this .state.randomImg === "" ? "" :
            <h2 className= "top" >{ this .state.topText}</h2>}
          { this .state.randomImg === "" ? "" :
            <h2 className= "bottom" >{ this .state.bottomText}</h2>}
        </div>
      </div>
    );
  }
 }
 export MemeGenerator; default 

App.css: как сделать так, чтобы topText и lastText были выровнены в соответствии с изображением. Следующий CSS можно использовать для выравнивания текста.

CSS

 .meme {
  position : relative ;
  width : 59% ;
  margin : auto ;
 }
 .meme > img {
  width : 100% ;
 }
 .meme > h 2 {
  position : absolute ;
  width : 80% ;
  text-align : center ;
  left : 50% ;
  transform: translateX( -50% );
  margin : 15px 0 ;
  padding : 0 5px ;
  font-family : impact, sans-serif ;
  font-size : 1em ;
  text-transform : uppercase ;
  color : white ;
  letter-spacing : 1px ;
  text-shadow : 2px 2px 0 #000 ;
 }
 .meme > . bottom {
  bottom : 0 ;
 }
 .meme > . top {
  top : 0 ;
 }
 form {
  padding-top : 25px ;
  text-align : center ;
 }

Результат: наше приложение готово и работает. Ниже приложение работает отлично.

JavaScript React-js

Создать генератор мемов с помощью ReactJS

Javascript

Javascript

Javascript

CSS

РЕКОМЕНДУЕМЫЕ СТАТЬИ