How can I create a custom Gutenberg block with React?

<!-- BEGIN COPY / PASTE -->
    // Step 1: Install @wordpress/scripts
    npm install @wordpress/scripts --save-dev

    // Step 2: Create a block.js file
    import { registerBlockType } from '@wordpress/blocks';
    import { RichText } from '@wordpress/block-editor';

    registerBlockType('my-plugin/custom-block', {
      title: 'Custom Block',
      icon: 'smiley',
      category: 'common',
      attributes: {
        content: {
          type: 'string',
          source: 'html',
          selector: 'p',
        },
      },
      edit: ({ attributes, setAttributes }) => {
        return (
          <RichText
            tagName="p"
            value={attributes.content}
            onChange={(content) => setAttributes({ content })}
          />
        );
      },
      save: ({ attributes }) => {
        return <RichText.Content tagName="p" value={attributes.content} />;
      },
    });

    // Step 3: Add build script in package.json
    "scripts": {
      "build": "wp-scripts build",
      "start": "wp-scripts start"
    }
    <!-- END COPY / PASTE -->