How to build React Frontend with Umbraco

To integrate React with Umbraco, you can create a modern front-end with React while still leveraging Umbraco's powerful content management features on the backend. Here’s a step-by-step guide to help you build an Umbraco site using React for the frontend:

Steps to Build Umbraco with React

1. Set Up Umbraco (Backend CMS)

Install Umbraco: Install Umbraco either through Visual Studio or as a standalone app using the Umbraco installation guide.
- Using Visual Studio:
```
  dotnet new umbraco --name MyProject --friendly-name "My Umbraco Project"
```
- Complete the initial Umbraco setup by configuring the database and creating the first content node.

2. Set Up React (Frontend)

Create a React App: Use create-react-app to set up the front end.

  npx create-react-app umbraco-react-frontend
  cd umbraco-react-frontend

3. Expose Umbraco Content via API

Install Umbraco REST API: You need to expose Umbraco's content so that your React app can consume it. Umbraco provides two primary methods:
- Umbraco Heartcore: A headless CMS option with built-in APIs. (Paid service)
- Umbraco Content Delivery API: Available for self-hosted or cloud-hosted Umbraco installations. If your version of Umbraco doesn't have a built-in API, you can install the Umbraco REST API package:
```
  Install-Package Umbraco.RestApi
```
- Alternatively, create custom API controllers in Umbraco to return the content you want in JSON format.

4. Fetch Content in React via API

Once you have the API set up, use React to fetch content from Umbraco using fetch or Axios.

Example React component to fetch content:

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const HomePage = () => {
  const [content, setContent] = useState(null);

  useEffect(() => {
    // Replace with the Umbraco API endpoint
    axios.get('http://localhost:8080/umbraco/api/content')
      .then(response => setContent(response.data))
      .catch(error => console.error("Error fetching content:", error));
  }, []);

  return (
    <div>
      <h1>Umbraco React Integration</h1>
      {content && <p>{content.title}</p>}
    </div>
  );
};

export default HomePage;

5. Serve React App and Umbraco

Host React App Separately: Build your React app and host it on a separate server (or as a static site on a CDN), and use Umbraco purely as a headless CMS.
```
  npm run build
```
Single Server Setup: Alternatively, you can host both Umbraco and React on the same server. You can achieve this by serving the React app's static files through Umbraco.

6. Routing Between React and Umbraco

Use React Router for client-side navigation within your React app. Any content served from Umbraco can be fetched and injected into the React components dynamically.
For example, you could create a custom API route in Umbraco to return all pages, then render them in React based on the URL structure.

7. Deploy the Application

Deploy Umbraco to your server or the cloud (e.g., Azure, AWS).
Deploy React: Build and host your React app, either on the same server as Umbraco (using reverse proxy configurations) or on platforms like Vercel, Netlify, or any other static site host.

Summary of Key Steps:

Umbraco Setup: Install Umbraco and set up content nodes.
React Setup: Create a React frontend app with create-react-app.
API Integration: Expose Umbraco content through APIs.
React Integration: Fetch Umbraco content using fetch or Axios.
Deployment: Host React and Umbraco, either separately or on the same server.

This approach leverages Umbraco as a headless CMS, with React handling all front-end rendering, providing you with flexibility and scalability.