Создать генератор мемов с помощью ReactJS
В этом уроке мы создадим генератор мемов с использованием 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 // 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 ; } |
Результат: наше приложение готово и работает. Ниже приложение работает отлично.