React.js / CodeSandbox

12月 18, 2021 admin44 No Comments

フロントエンドと呼ばれるWebページの開発でよく使われるReact.jsを、Rapid Web developmentサービスCodeSandboxを使って試してみました。

https://codesandbox.io/

このBlogでは久しぶりのコードを使います。最近はPlayGroundと呼ばれるWebでプログラミングを学習するサイトが多いですが、これに興味をもったのは、本格的な統合開発ツールぽいにもかかわらず使いやすいこと、コード変更と同時にページがすぐ横に表示されること(これが気持ちいい)、保存イコールネットに公開される反応が速いこと、そしてReact.js(他にもあります)が使えることです。

https://decode.red/blog/202112051381/
https://decode.red/net/archives/853
React.jsについては、上記でもとりあげていますが、CodeSandboxを使うと、マークアップランゲージとしての使いやすさが実感できました。
もともとReact.jsのプログラムの記述方法に抵抗がありましたが、HTMLというレイアウトを主役に考えると、扱いやすいく思えます。(自由にタグを定義できるXMLのように、機能を定義したそれぞれのタグを関数のように扱うことが可能)
ここでは、RectとRoateという二つのタグを定義して、プロパティに値与えて、表示してみました。

index.js はメイン処理
index.jsて下記React.js, Rotete.jsをインポートします。

Rect.js (RectとReactを間違えないように・・)

import React from "react";

class Rect extends React.Component {
  constructor(props) {
    super(props);
    this.style = {
      backgroundColor: props.c,
      position: "absolute",
      left: props.x + "px",
      top: props.y + "px",
      width: props.w + "px",
      height: props.h + "px"
    };
  }
  render() {
    return <div style={this.style}></div>;
  }
}
export default Rect;

import React from "react";

class Rect extends React.Component {

constructor(props) {

super(props);

this.style = {

backgroundColor: props.c,

position: "absolute",

left: props.x + "px",

top: props.y + "px",

width: props.w + "px",

height: props.h + "px"

};

}

render() {

return <div style={this.style}></div>;

}

export default Rect;

Rotate.js

import React from "react";

class Rotate extends React.Component {
  constructor(props) {
    super(props);
    this.children = props.children;
    this.str = "rotate(" + props.deg + "deg)";

    this.style = {
      display: "inline-block",
      transform: this.str
    };
  }
  render() {
    return <span style={this.style}>{this.children}</span>;
  }
}
export default Rotate;

import React from "react";

class Rotate extends React.Component {

constructor(props) {

super(props);

this.children = props.children;

this.str = "rotate(" + props.deg + "deg)";

this.style = {

display: "inline-block",

transform: this.str

};

}

render() {

return <span style={this.style}>{this.children}</span>;

}

export default Rotate;

表示結果

文字を回転させるちょっと変わりものも、タグにしてしまえば簡単に使えます。
即席ホームページのように作ってすぐ公開といった使い方ができるのも面白いです。

Category: 未分類

Tags: React.js