This time, we would like to run the React Email sample, which allows you to create emails with React / TypeScript.
What is React Email?
When creating HTML emails, the basic steps are to write HTML, use a tool, or use an HTML email design tool that comes with an email delivery tool. In this article, we will introduce React Email, a tool for writing beautiful HTML emails with TypeScript.
We will start with a sample on the Web site. Open the following page and you will see an email regarding Amazon reviews.
The email itself is written in TypeScript and appears as follows when the code is referenced
As for the actual React components, a variety of components are available, including buttons. Please refer to the website to see what kind of components are available.
The mechanism is that you can create an email by arranging the components as shown in the sample.
Running samples at your fingertips
Now I would like to actually run the sample. Execute the commands listed on the top page.
Note: React Email 2.0.0 does not work on Windows.PowerShell
npx create-email@latestThe results of the execution are as follows
The folder is now complete. cd react-email-starter opens the folder and the folder structure looks like this
To make it work locally, execute the following commands in order.
PowerShell
npm install
npm run dev
The site will launch and the following screen will appear when you access the site.
Click on the filename included on the left to see a preview of that mail.
The file you put under the "emails" folder is displayed on the left side, and when you click on it, the HTML email is displayed using that code.
Summary
In this article, we will just check what React Email is all about and lightly run a sample. In the next article, we will add it to the Next.js site and see how it works. In the next article, we will add it to the Next.js site and check its operation.