React + Ink CLI Tutorial: How to Create a Browser Command Line Application (2023)

React is a popular front-end JavaScript development library. It is number 1 in terms of knowledge and use according to theJS-Stand 2021 See MoreSurvey Research.

This means that most JavaScript developers probably know or use React.

While React is popular for creating user interfaces (UIs) for web apps, you can also use the core React library for other things. actually theto reactThe library renders the UI on a web page, not React itself. React is more like an engine that can be ported to any environment.

One of the reasons developers love React is its approach to creating user interfaces. You just need to describe how you want the interface to look and the React engine will take care of positioning and any changes to the page.

There are a few libraries that React uses to help developers build other types of apps besides web apps. They include:

• 360 responder: To create 3D virtual reality applications
• responsive desktop: To create desktop applications
• react natively: To create mobile apps
• Shades: To create command-line applications

In this tutorial, we'll explore command-line interfaces. We will also create an app that will show live prices for some selected cryptocurrencies and tokens. To get the token prices, we use theAPI CoinGecko.

A working version of the project can be found.not here GitHub.

TO USE:This article assumes you can use React to build basic front-end web apps. If not, here's onefreeCodeCamp course in React JS. The article also assumes that you can use REST APIs and know basic command line commands, as these are not covered in this article.

Alright, let's get started.

What is a command line interface? (CLI)

A command line interface is a way to interact with a computer through text. It works by typing special commands at a command prompt.

This is how developers used to interact with computersGraphical User Interfaces (GUI)You were created. Command line interfaces are still useful forautomate tasksand software development in general.

what is ink

Shadesis a JavaScript library that brings React to the command line. It helps to develop CLI applications using the concept of component-based UI elements.

With Ink, you can use all of React's features, including class-based components, lifecycle methods, functional components, hooks, etc., to create command-line tools.

ANDShadesThe library also has plugins calleduseful components. These useful components are not built into theShadesLibrary, but they are custom components made by other developers that you can import into an Ink project.

How to install paint

There are two ways to install the paint. They are:

• Manual installation of Ink with Babel
• Use ofCreate ink jobDomain

In this article we use theCreate ink jobto quickly start an ink project.

On the command line, navigate to the folder or directory where you want to host your Ink project and run the following command:

npx create-ink-app cripto-cli

This command will install the files needed to create an Ink project in the folder where we run the command. In our case, the folder and project name are the same (Krypto-Cli).

Create ink jobIt also generates an executable command for our project so that we can run our application by calling its name in the CLI.

With that, Ink 3 is installed (which is the latest version of Ink at the time of this writing) and we can start creating command line applications.

when we run themKrypto-Clicommand, we get this output.

Why do we have this edition? Let's browse the filesCreate ink jobFurnished.

Examine installed Ink files

The structure of the project file looks like this:

What are these files and folders doing?

• node_modules: This folder contains all the necessary packages for our application to work properly. packages includedto reactjShades, but also the dependencies ofto reactjShadesIn case they exist.node modulesalso contains packages that the creators ofShadesI thought it would provide a good developer experience.
• .editor-config: This file helps maintain consistency in your code. Many developers can work with different IDEs on this project. To make sure the coding style is the same you can use.editor-config. You can find more information about itHere.
• .gitatribute: We will use this to set the attributes of our files used by the version control programgit. You can find more informationHere. For this project, we don't need to add or remove anything in this file.
• CLI.js: in this file we useShadesto make our app.
• pacote lock.json- We use this to lock our app's dependencies to a specific version so that others can easily reproduce our project anywhere, anytime.
• Package.json: Contains metadata about our app, including name, version, and dependencies.
• Leame.md: A markdown readme for our project.
• test.js: to write tests in our application. We will not edit this file in our project.
• UI.js: which is equivalent toapplication.jsfor front-end web development with React. It imports and contains all the components our project will have.

a look atPackage.jsonIt shows us the dependencies we installed:

...,"dependencies": { "import-jsx": "^4.0.1", "ink": "^3.2.0", "meow": "^9.0.0", "react": "^ 17.0.2"},...

You may not be familiar withimport-jsxjmaullar. Let's see what they do.

• import-jsx: Use this library to import and transpile JSX files toShades.
• maullar: CLI commands accept arguments.maullarhelp us with the implementationShades.

Stop talking. US construction.

How to create the CLI application

In this tutorial, as I mentioned before, we will create an application that will show the prices of some cryptocurrencies and tokens usingAPI CoinGecko.

How to create the header

Let's import an npm package calledink-big-text. It is one of the "useful components" provided by Ink. We use it to create a large header on the command line.

we will also installcolor gradientto beautify our headboard. It is another "useful component" that supplies the ink.

npm installiere Ink-Big-Text Ink-Gradient

So let's edit ourUI.jswhich in turn should contain all of our components.

// ui.jsconst React = require('react');const Gradient = require('ink-gradient');const BigText = require('ink-big-text');const App = () => (<Gradient name="summer"><BigText text="crypto cli" align='center' font='chrome'/></Gradient>);module.exports = App;

And the code is translated to this wonderful header when executedKrypto-Cli.

How to view our data

To display our data, we need to create acrateElement that organizes it in tabular form.crateworks as a containerflexible screen;On the Internet. You design it as a flexbox element.

Before we extract data from CoinGecko, let's create dummy data for now. A filedata.jsonwithinOriginwill contain our simulated data. You can find the simulated dataHere.

Next, we create a folder calledcomponentswithinOriginFile. We will also create a file calledTabla.jswithincomponentsFile.

The following code goes insideTabla.js:

// Table.jsconst React = require('react');const { useState, useEffect } = React;// Destruição de useState e useEffect de Reactconst { Box, Text, Newline } = require('ink');// Destruição der Komponenten, die für Inkconst benötigt werden cryptoData = require('../data.json');// Tabla abrufen dataconst simulada = () => { const [data, setData] = useState([]); useEffect(()=>{ setData(cryptoData); }); return ( <Box borderStyle='single' padding={2} flexDirection='column'> <Box> <Box width='25%'><Text>COIN</Text></Box> <Box width='25 %'><Text>PRECIO (USD)</Text></Box> <Box width='25%'><Text>CAMBIO DE 24 HORAS</Text></Box> <Box width='25%' > <Text>TODO ALTO</Text></Box> </Box> <Newline/> { data.map(({id, name, current_price, price_change_percentage_24h, ath}) => ( <Box key={id} > <Box width='25%'><Text>{name}</Text></Box> <Box width='25%'><Text>{aktueller_Preis}</Text></Box> <Box width ='25%'><Text>{price_change_percentage_24h}</Text></Box> <Box width='25%'><Text>{ath}</Text></Box> </Box> )) } </Box> )}module.exports = Tabla;

Now we'll go ahead and import the table component into our application.

// ui.jsconst React = require('react');const Gradient = require('ink-gradient');const BigText = require('ink-big-text');const importJsx = require('import-jsx' );const Table = importJsx('./components/Table')const App = () => (<><Gradient name="summer"><BigText text="crypto cli" align='center' font='chrome '/></Gradient><Table/></>);module.exports = App;(tal vez, elimine o 'uso estrito')

RunKrypto-Cliwill give us this:

I like to have some decoration in my CLI application. So let's go ahead and use the colors.Shadestake care of us.

// Table.jsconst React = require('react');const { useState, useEffect } = React;const { Box, Text, Newline } = require('ink');const cryptoData = require('../data. json');const Table = () => { const [Daten, setData] = useState([]); useEffect(()=>{ setData(cryptoData); }) return ( <Box borderStyle='single' padding={2} flexDirection='column'> <Box> <Box width='25%'><Text>COIN </Text></Box> <Box width='25%'><Text>TATSÄCHLICHER PREIS (USD)</Text></Box> <Box width='25%'><Text>CAMBIO DE 24 HORAS< / Text></Box> <Box width='25%'><Text>TODO EL TIEMPO ALTO</Text></Box> </Box> <Newline/> { data.map(({id, name, aktueller_preis, preisänderungsprozentsatz_24h, ath}) => ( <Box key={id}> <Box width='25%'> <Text>{name}</Text> </Box> <Box width='25%'> <Text color='cyan'>{'$' + current_price.toLocaleString()}</Text> </Box> <Box width='25%'> <Text backgroundColor={Math.sign(price_change_percentage_24h)​​ ​< 0 ? 'red ' : 'verde'}> {price_change_percentage_24h.toFixed(2) + '%'} </Text> </Box> <Box width='25%'> <Text color='green'> {' $' + ath .toLocaleString()}</Text> </Box> </Box> )) } </Box> )}module.exports = Tabelle;

To be clear, to add color to text componentsShades, we use the prop (attribute)Cor. To add a background color we use the attributebackground color. We then add logic that checks whether the 24-hour change was negative or positive.

If the change was positive, we guarantee that the background color is green, otherwise the background color is red.

when we walkKrypto-Cli, we have the following output:

And manually negate the second value.24 HOUR CHANGEOVERvalues ​​adata.jsonproduces the following output:

How to get data from CoinGecko API

At this stage, we get real data from the CoinGecko API. These are the steps we must follow:

• Becomeshttps://www.coingecko.com/en/api/documentacion

• Go to the "Currencies" section and click on/currencies/markets

• Click the "Try It Out" button.
• Enter as "usd".vs_currency. write this tooI WENTYour favorite cryptocurrencies and tokens (I used Bitcoin, Litecoin, Matic-Network, Ethereum, Tether, Binancecoin, Solana, Aave, Cardano and Tron). Remember not to add a space when entering Currency IDs.

• Click on the Run button
• Copy the generated link. For me this is the hook I will be using for my API calls. The link depends on the cryptocurrencies or tokens you selected.

https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=bitcoin%2Clitecoin%2Cmatic-network%2Cethereum%2Ctether%2Cbinancecoin%2Csolana%2Caave%2Ccardano%2Ctron&order=market_cap_desc&per_page=100&page=1&sparkline= INCORRECT

Now let's move on to ourTabla.jsand make the API call.

To installAxiosThis is a useful npm library to get the API data.

npm install Axios

and then use itAxiosWe research our data.

const React = require('react')const { useState, useEffect } = React;const { Box, Text, Newline } = require('ink')const axios = require('axios')const url = 'https:// tabla = () => { const [daten, setData] = useState([]) useEffect(()=>{ axios.get(url) .then(response => setData(response.data)) .catch(e = > console.log(e)) },[]) // Daten wiederherstellen und mögliche Fehler erkennen return ( <Box borderStyle='single' padding={2}> { data.length === 0 ? <Box> <Text > Cargando...</Text> </Box> : <Box flexDirection='column'> <Box> <Box width='25%'><Text>COIN</Text></Box> <Box width= ' 25%'><Text>PRECIO ATUAL (USD)</Text></Box> <Box width='25%'><Text>CAMBIO DE 24 HORAS</Text></Box> <Box width=' 25% '><Text>TODO EL TIEMPO ALTO</Text></Box> </Box> <Newline/> { data.map(({id, name, current_price, price_change_percentage_24h, ath}) => ( < Box key={id}> <Box width='25%'> <Text>{name}</Text> </Box> <Box width='25%'> <Text color='cyan'>{'$ ' + current_price.toLocaleString()}</Text> </Box> <Box width= '25%'> <Text backgroundColor={Math.sign(price_change_percentage_24h) ​​​​​​​< 0 ? 'rojo' : 'verde'}> {price_change_percentage_24h.toFixed(2) + '%'} </Text> </Box> <Box width='25%'> <Text color='green'>{'$' + ath.toLocaleString()}</Text> </Box> </Box> )) } </Box> } </Box> )}module.exports = Tabelle;

And with the coins we selected, we should see the following output (most values ​​may be different as the crypto market is volatile):

Diploma

In this tutorial, we learned how to create a command line application using React and Ink.

We also use CoinGecko and Axios API to get our data.

Ink offers more components and you can combine them in different ways to create really useful command line utilities.

Thanks for reading and see you soon.