Creando una aplicación CLI con react e ink

Hola amigos de la #nerdytud

En el día de hoy quiero compartirles el paso a paso para la creación de una aplicación de tipo cli generada con react e ink

Crear carpeta de proyecto

mkdir dummy-cli && cd dummy-cli

Crear e instalar dependencias

npx create-ink-app

Probar aplicación

dummy-cli

Inslar axios

npm i axios

Modificación de ui.js

'use strict'
const React = require('react')
const { Box, Newline, Text } = require('ink')
const axios = require('axios')
const { useEffect, useState } = require('react')

const App = ({ name = 'Stranger' }) => {
  const [data, setData] = useState([])

  const fecthData = () => {
    const url = 'https://jsonplaceholder.typicode.com/users'

    const headers = {
      'Content-Type': 'application/json',
    }

    axios
      .get(url, {
        headers,
      })
      .then((res) => {
        setData(res.data)
      })
      .catch((error) => {
        console.error('Error al obtener datos')
      })
  }

  useEffect(() => {
    fecthData()
  }, [])

  return (
    <Box borderStyle="single" padding={1} flexDirection="column">
      <Newline />
      {data.map(({ id, username, email }) => (
        <Box key={id}>
          <Box width="20%">
            <Text color="magentaBright">{id}</Text>
          </Box>
          <Box width="40%">
            <Text>{username}</Text>
          </Box>
          <Box width="40%">
            <Text>{email}</Text>
          </Box>
        </Box>
      ))}
    </Box>
  )
}

module.exports = App

Modificación de cli.js (opcional)

#!/usr/bin/env node
'use strict'
const React = require('react')
const importJsx = require('import-jsx')
const { render } = require('ink')
const meow = require('meow')

const ui = importJsx('./ui')

const cli = meow(`
    Usage
      $ dummy-cli
`)

render(React.createElement(ui, cli.flags))

Testear la aplicación

dummy-cli

dummy-cli --help