lorisleiva

Integrating the Metaplex JS SDK with React apps

• 4️⃣ Create React App 4 (using Webpack 4)
• 5️⃣ Create React App 5 (using Webpack 5)
• ⚡️ React with Vite

Create React App 4 (using Webpack 4)

Steps to install a CRA 4 app from scratch using the SDK:

lorisleiva

// resources/js/models/Model.js

export default class Model {
    constructor (attributes = {}) {
        this.fill(attributes)
    }

    static make (attributes = {}) {
        return Array.isArray(attributes)
            ? attributes.map(nested => new this(nested))

lorisleiva

<script setup>
import { ref, toRefs, computed } from 'vue'
import { useWorkspace } from '@/composables'
import TweetFormUpdate from './TweetFormUpdate'

const props = defineProps({
    tweet: Object,
})

const { tweet } = toRefs(props)

lorisleiva

export default {
    props: {
        stripe: {
            type: String,
            required: true,
        },
        options: {
            type: Object,
            required: true,
        }

lorisleiva

Step 1: configure Webpack aliases

// webpack.mix.js

const mix = require('laravel-mix')
const path = require('path')

// ...

lorisleiva

import { watchEffect } from "vue"

export const useAutoresizeTextarea = (element) => {
    const resizeTextarea = () => {
        element.value.style.height = 'auto'
        element.value.style.height = element.value.scrollHeight + 'px'
    }

    watchEffect(onInvalidate => {
        if (! element.value) return

lorisleiva

<?php

abstract class Node {}

class Calculator extends Node {
    public function __construct(public array $statements){}
}

class Add extends Node {
    public function __construct(public Node $left, public Node $right){}

lorisleiva

<?php

namespace Tests;

use Tests\Authenticated;
use Illuminate\Support\Facades\Auth;
use Illuminate\Foundation\Testing\RefreshDatabase;

class ArticleUpdateTest extends TestCase
{

lorisleiva

<?xml version="1.0" encoding="UTF-8"?>
<ruleset name="Laravel">
    <description>The default PHP Code Style of my Laravel projects.</description>

    <!-- Files to include. -->
    <file>app</file>
    <file>config</file>
    <file>routes</file>
    <file>tests</file>