# Running React code in an XBlock

**URL:** <https://discuss.openedx.org/t/running-react-code-in-an-xblock/8532>\
**Category:** Development\
**Tags:** how-to, devstack\
**Created:** [October 18, 2022, 8:41pm UTC](https://discuss.openedx.org/t/running-react-code-in-an-xblock/8532 "2022-10-18T20:41:52Z")\
**Posts on this page:** 1\
**Showing post:** 8

<div class="post-metadata">

**Author:** ![braden](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/braden/32/46_2.png) [@braden](https://discuss.openedx.org/u/braden)\
**Post date:** [December 5, 2024, 10:40pm UTC](https://discuss.openedx.org/t/running-react-code-in-an-xblock/8532/8 "2024-12-05T22:40:35Z")

</div>

Hey folks, I got time this week to put together a proof of concept that shows how to use React in an XBlock: [GitHub - open-craft/xblock-react: An example of a React-based XBlock (React student\_view, React studio\_view, react-intl)](https://github.com/open-craft/xblock-react)

It’s based on [the XBlock cookiecutter](https://github.com/openedx/edx-cookiecutters/tree/master/cookiecutter-xblock) (which, sadly, turned out to be broken). It works, integrates with Tutor, uses React 18 for both `student_view` and `studio_view` , is compatible with the new Studio unit MFE page, is fully type-safe (TypeScript), and uses `react-intl` for i18n. It does _not_ support Paragon (as its SCSS is not available and I found that Paragon has a bunch of bugs that make it unsuitable).

 ![Screenshot 2024-12-05 at 2.39.05 PM](https://us1.discourse-cdn.com/flex020/uploads/openedx/original/2X/3/33da110be1a59bcc43ac990af52af2a522714185.png)

I plan to apply some of these changes to the cookiecutter template if they’re well received.

---

_[View the full topic](https://discuss.openedx.org/t/running-react-code-in-an-xblock/8532)._