Tutorial React Tweet
react-tweet es una biblioteca de npm que permite añadir un componente de React en tus aplicaciones creadas con Frameworks de React como Vercel, Vitejs, create-react-app, con el objetivo de incrustar o embeber tweets en tus aplicaciones de React sin sacrificar el rendimiento, y usando una sola línea de código.
Algunos beneficios de este componente:
- 35 veces menos JavaScript del lado del cliente que el Native embed de Twitter
- Soporte para Componentes de Servidor de React
- Incorpora la obtención y almacenamiento en caché de datos
- Funciona con cualquier Framework de React - Next.js, Vite y Create React App
Creación de Proyecto
npx create-next-app nextjs-react-tweet
√ Would you like to use TypeScript? ... Yes
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... Yes
√ Would you like to use `src/` directory? ... Yes
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to customize the default import alias? ... No
Instalación de React Tweet
cd .\nextjs-react-tweet\
npm i react-tweet
Añade lo siguiente en src/page.jsx:
import { Tweet } from 'react-tweet'
export default function Page() {
return <Tweet id="1595623485828927488" />
}
y luego en app/globals.css añade lo siguiente:
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
background: #020202;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
El tweet resultante es generado estáticamente por lo que no se requieren iframes.