ktyr report

blueMessage.jsx

export const blueMessage = (props) => {
    console.log(props);
    const contentStyle = {
        color : props.color,
        fontSize : "20px"
    };
    return <p style={contentStyle}>{props.message}</p>
};

　
App.jsx

import { blueMessage } from "./components/blueMessage";
export const App = () => {
    const onClickButton = () => {
        alert();
    };
    const contentStyle = {
        color : "blue",
        fontSize : "20px"
    };
    return (
        <>
        <h2 style={{ color:"red" }}>Hello</h2>
        <p style={contentStyle}>World</p>
        <blueMessage color="green" message="Great" />
        <blueMessage color="red" message="Bad" />
        <button onClick={onClickButton}>button</button>
        </>
    );
}

　
childrenを使う場合
blueMessage.jsx

export const blueMessage = (props) => {
    console.log(props);
    const contentStyle = {
        color : props.color,
        fontSize : "20px"
    };
    return <p style={contentStyle}>{props.children}</p>
};

　
App.jsx

import { blueMessage } from "./components/blueMessage";
export const App = () => {
    const onClickButton = () => {
        alert();
    };
    const contentStyle = {
        color : "blue",
        fontSize : "20px"
    };
    return (
        <>
        <h2 style={{ color:"red" }}>Hello</h2>
        <p style={contentStyle}>World</p>
        <blueMessage color="green">Great</blueMessage>
        <blueMessage color="red">Bad</blueMessage>
        <button onClick={onClickButton}>button</button>
        </>
    );
}

通常

{{ $post->body }}

　
改行する場合

{!! nl2br(e($post->body)) !!}

e関数：HTMLエスケープを行うためのヘルパーメソッド

ブログ記事内やページ内で特定の記述をした部分を特定のhtmlへ変換する機能。

https://github.com/culturekings/shopify-shortcodes
のshortcode-render.liquidとshortcode.liquidをassetsフォルダへ配置

　
templates/article.liquid の記事部分を下記へ書き換える

{% include 'shortcode' load:article.content %}

　
記事編集で下記コードを入力する。xxxxの部分は商品ハンドル

[product_in_blog handle="xxxx"]

　
「product_in_blog」という名称のショートコードを作成する時は、「shortcode-product_in_blog.liquid」というファイルを作成する。

　
引数「handle」を設定する場合、「shortcode-product_in_blog.liquid」で値を取得する処理は下記。

{%- capture product_handle -%}{%- include 'shortcode-render' render:'handle' default:'' -%}{%- endcapture -%}

App.jsx

export const App = () => {
    const onClickButton = () => {
        alert();
    };
    const contentStyle = {
        color : "blue",
        fontSize : "20px"
    };
    return (
        <>
        <h2 style={{ color:"red" }}>Hello</h2>
        <p style={contentStyle}>World</p>
        <button onClick={onClickButton}>button</button>
        </>
    );
}

マイグレーションファイル作成

sail artisan make:migration filename --table=tablename

　
マイグレーション

sail artisan migrate

App.jsx

export const App = () => {
    return (
        <>
            <h2>Hello</h2>
            <p>World</p>
        </>
    );
}

　
index.js

import ReactDOM from "react-dom";
import { App } from "./App";
ReactDOM.render(<App />,document.getElementById("root"));

    {%- assign current = 'now' | date: '%s' -%}
    {%- assign published_at = tmp_product.published_at | date:'%s' -%}
    {%- assign gap = current | minus:published_at -%}
    {%- if gap < xxxx -%}
    //NEWアイコン
    {%- endif -%}

import ReactDOM from "react-dom";
import { Fragment } from "react";
const App = () => {
    return (
        <Fragment>
            <h2>Hello</h2>
            <p>World</p>
        </Fragment>
    );
}
ReactDOM.render(<App />,document.getElementById("root"));

　
省略できる

import ReactDOM from "react-dom";
const App = () => {
    return (
        <>
            <h2>Hello</h2>
            <p>World</p>
        </>
    );
}
ReactDOM.render(<App />,document.getElementById("root"));

docker-compose.ymlにphpMyAdmin追記

    phpmyadmin:
        image: phpmyadmin/phpmyadmin
        links:
            - mysql:mysql
        ports:
            - 8080:80
        environment:
            MYSQL_USERNAME: '${DB_USERNAME}'
            MYSQL_ROOT_PASSWORD: '${DB_PASSWORD}'
            PMA_HOST: mysql
        networks:
            - sail