How To Convert From .ejs Template to React?

Last Updated : 09 Jul, 2024

Converting from Embedded JavaScript templates (.ejs) to React can significantly enhance the flexibility and interactivity of your web applications. React’s component-based architecture provides a more dynamic way to build user interfaces compared to traditional templating engines like EJS. This article will walk you through the process of converting .ejs templates to React components.

Steps for Creating React Applications:

Initialize a new React project

 npx create-react-app my-app

Running the Application:

npm start

Approach 1: Manual Conversion

In the manual conversion process, we will transform server side EJS template to client side React components.

This steps involves finding EJS templates, creating corresponding react components and then convert EJS syntax to React code. You require deep understanding of EJS and React to translate server-side rendered templates into client-side components.

Identify EJS Templates: Locate all your .ejs files.
Create React Components: Create a new React component for each EJS template.
Replace EJS Syntax: Convert EJS syntax (e.g., <%= data %>) to React syntax ({data}).
Handle Logic: Replace EJS control structures with React state and lifecycle methods.
Test Components: Ensure each component works as expected in isolation.

Dependencies

 "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }

Project Structure

Example: In this example, we will be displaying Dynamic data in React.

JavaScript

// React Component (App.js):

import "./App.css";

function App() {
     const title = "My App Title";
     const user = { name: " Hello, GeekForGeeks!" };
     const items = ["Javascript", "React", "NodeJS"];
  return (
     <div>
         <head>
            <title>{title}</title>
         </head>
         <body>
             <h1>Hello, {user.name}!</h1>
             <ul>
                <li>{ items[0] }</li>
                <li>{ items[1] }</li>
                <li>{ items[2] }</li>
             </ul>
         </body>
     </div>
  );
}

export default App;

JavaScript

// Original EJS Template (index.ejs):

<!DOCTYPE html>
<html>
      <head>
           <title><%= title %></title>
      </head>
     <body>
            <h1>Hello, <%= user.name %>!</h1>
            <ul>
                  <li><%= items[0] %></li>
                 <li><%= items[1] %></li>
                 <li><%= items[2] %></li>
           </ul>
</body>
</html>

Code Explatation

In the EJS template ('index.ejs'), we have created a HTML template to display dynamic data.
In the 'app.js', we achieve the same functionality by defining the data as js variables . The react component then returns JSX that use curly braces to embed this variables into HTML structure.
We have created 3 variables title, name & items with values. Then we have rendered the data in the React components in app.js

Output

displaydatareact — Convert From .ejs Template to React

Using ChatGPT to Convert from EJS to React

In this Guide, we will use AI tools like ChatGPT to convert from EJS server side template to React client side rendering.

Using ChatGPT or any other AI tools to convert EJS to React is an quick way to convert from server-side template to client-side rendering.

Extract the HTML structure and dynamic content from your EJS template.
Request ChatGPT to convert the EJS template to React, specifying how dynamic content should translate into props and state.
Review and integrate the converted JSX, ensuring it aligns with React syntax.
Replace EJS logic with React state management and JSX rendering.

Folder Structure:

ChatGPT: Open openai.chatgpt.com and enter prompt with JSX code.

Example: In this example, we will illustrate how to display a list of items in our application using React.

Code Explanation:

The App component in App.js is a functional component that receives title, user, and items as props. The component efficiently renders a list (<ul>) of items using items.map() to iterate through the items array.
In index.js we have created title, user, items and assigned value and send data to app.js

JavaScript

// App.js

import React from 'react';

const App = ({ title, user, items }) => {
  return (
    <html>
        <head>
           <title>{title}</title>
        </head>
        <body>
            <h1>Hello, { user.name }!</h1>
            <ul>
               {  items.map((item, index) => (
                     <li key={index}>{item}</li>
                  ))
                }
           </ul>
        </body>
     </html>
  );
};

export default App;

JavaScript

// index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

const data = {
    title: "My App Title",
    user: { name: "Hello, GeekForGeeks!" },
    items: [ "Javascript", "React", "NodeJS" ],
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
   <React.StrictMode>
       <App 
           title={ data.title } 
           user= { data.user } 
           items={ data.items } 
       />
   </React.StrictMode>
);

JavaScript

// Original EJS Template (index.ejs):

<!DOCTYPE html>
<html>
   <head>
        <title><%= title %></title>
   </head>
   <body>
         <h1>Hello, <%= user.name %>!</h1>
         <ul>
             <li><%= items[0] %></li>
             <li><%= items[1] %></li>
             <li><%= items[2] %></li>
         </ul>
   </body>
</html>