Puck CMS - ASP.NET Core, Open Source, Cross Platform CMS

# Puck and React

Puck works great with react in headless mode. In the backoffice, you would use Vue to extend Puck or just plain javascript but on the front end you should use React for your templates and websites in general if working headless. As you can read here, it's possible to return all pages as JSON.

From here, you need to work on getting Components in React that use the Viewmodels returned from Puck. For this, you need a Page Factory Component in React;

`
    const PageFactory = (props) => {
    const location = useLocation();
    const [path, setPath] = useState(window.location.pathname);
    const { fetchPage } = props;

//console.log(props.currentPage, "themodel");
    useEffect(() => {
        console.log("setting location",location);
        setPath(location.pathname);
    }, [location]);

useEffect(() => {
        console.log("fetching",path);
        fetchPage(path);

}, [path, fetchPage]);

const getComponent = () => {

//alternative
        switch (props.currentPage?.ViewModel?.Type) {
            case "AddBookList":
                return <AddBookList model={props.currentPage} params={paramDict} />
            case "AddBook":
                return <AddBook model={props.currentPage} params={paramDict} />
            default:
                return <Homepage model={props.currentPage} params={paramDict} />
        }
    }

return getComponent();
}

const mapStateToProps = (state, ownProps) => {

return { currentPage: state.currentPage };
}

export default connect(mapStateToProps, { fetchPage })(PageFactory);

If you study the code above, it's the basic template for lazy loading (or static loading) components (for front end templates) based on Viewmodels returned from Puck. It's the ideal way to work with Puck and React so give it a try.

Using Puck with React