The background,

I have an old computer without a graphical interface. A few days ago, my website crashed, but I didn’t know.

The solution is also simple, with many tools for remote monitoring of service status. Today, another approach is introduced. Use React to write command line tools.

React can also write command line? Yes, it can write hardware as well as command lines. But today we’re not going to talk about hardware, just the command line.

2. Technology stack

1, the react

2, axios

3, the react – cli – the renderer

4, chalk

5, Babel – preset – react – app

Two, all the code

Since the code is relatively simple, paste the entire code:

import ReactCLI, { Section } from "react-cli-renderer";
import React from "react";
import chalk from "chalk";
const axios = require('axios');

class MyReactCLIApp extends React.Component {
  state = {
    status: 0
  };

  componentDidMount() {
    setInterval(()=>{
      axios.get('http://localhost:3000')
      .then((response) => {
        // console.log(response);
        this.setState({ status: response.status })
      })
      .catch((error) => {
          if (error.response) {
            this.setState({ status: error.response.status })
          }else{ this.setState({ status: -1 }) } }); }}, 1000)render() {
    return (
      <Section border={{ horizontal: "-", vertical: "|" }} align="center"<Section horizontal> <Section align="center">
            {this.state.status == 0 ? chalk.blue("Low") : "" "} <br /> {this.state.status == 200? chalk.green("Low") : "" "} 200 normal <br /> {this.state.status == 500? chalk.red("Low") : "" "} 500 error <br /> {this.state.status == -1? chalk.red("Low") : "" "} connection timeout </Section> </Section> </Section>); } } ReactCLI(<MyReactCLIApp />);Copy the code

Third, the final effect

I recorded the two terminals together, not on an old computer. The top is to monitor the status and the bottom is to start a web service.

You can actually monitor remote addresses.

React can be written on the command line.

All code at: github.com/reactbook/r…

Fourth, reference, and expansion

1, reference

1) stackoverflow.com/questions/3…

2) reactjs.org/docs/add-re…

2. What else can you do?

1) Can do command line weather forecast.

2) Can do remote control terminal character animation.