React Classes for HTML Elements for the Impatient

TLDR: Here are some basic example of using React Classes for HTML Components, using a Canvas element to illustrate.

Why Post This?

I found that most blog posts on simple usage of react components didn’t include basic examples of how to use components for HTML elements.

What is the scenario?

This is about updating a Canvas element using React

What files do you use to represent and access the Canvas object?

Two, the regular App.tsx file and a file for the Canvas called MyCanvas.tsx

The following are in the App.tsx file.

What does the `render()` method look like?

  render() {

    return (

      <div className="App">

        <MyCanvas ref={this.reactCanvas} />

      </div>

   …

    );

   ….

  }

How do you declare the class?

class App extends React.Component {

How do you declare the Canvas object?

Not in the React state prototype. As an ordinary object. Prior to the constructor.

  reactCanvas: any;

How do you instantiate the Canvas object?

In the Constructor.

  constructor(props: any) {

    super(props);

      this.reactCanvas = React.createRef();

     …

  }

How do you import the MyCanvas.tsx from the App.tsx file?

With the Following Line for the file and a class in the App.tsx file:

import MyCanvas, {Cell} from "./MyCanvas";

How do you call a method in the React Class file MyCanvas.tsx from the App.tsx file?

let neighborCount: number = this.reactCanvas.current.calculateNeighbourOnCount(cell);

How do you define the Class in the MyCanvas.tsx file?

export default class MyCanvas extends React.Component <any, any> {

    canvas: any = document.getElementById("mycanvas");

How do you refer to the canvas in the MyCanvas.tsx file?

        x -= this.canvas.getBoundingClientRect().left;

How do you do the constructor in the MyCanvas.tsx file?

    constructor(props: any) {

        super(props);

How do you do the `render()` method in the MyCanvas.tsx file?

    render() {

        this.paintCells();

        return (

            <div>

                <canvas

                    // We use the ref attribute to get direct access to the canvas element.

                    ref={(ref) => (this.canvas = ref)}

                    onMouseDown={this.onMouseDown}

                />

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.