Direflow - Integration of React with WordPress

What is Direflow?

Direflow is a framework that supports React way to write components. When you develop an application using direflow, the final package that you get is a web component.

Why Direflow?

There are other open source frameworks available for web component development but then they come with their own set of DSL (Domain Specific Language) which has a certain learning cost. In addition, if your stack is React then they lack of best practices needed for this particular stack.

You can also think of using ready made plugins available in WordPress but then sometimes you need the flexibility to create custom widgets with your own styles, logic and flow, that's when Direflow will come to your help.

What is a Web Component?

It is basically encapsulation of HTML, CSS and JavaScript based logic. It does not rely on specific JS-frameworks and rather leverages native technologies provided by modern browsers. Reading this article will give you more information on web components.

---

Direflow - Setup

The basic structure of direflow setup looks like below. It is a JavaScript structure. If you choose TypeScript, it would have additional files and the extension will be .ts

Important commands to create an application

1. npm i -g direflow-cli
2. direflow create
3. cd
4. npm install
5. npm start

Refer direflow.io for more information to create an application.

Once you create the application and build it, go to WordPress's root directory and create a new folder called "apps" and create a subfolder for your component and paste the build file (.js) in it.

If you don't have access to the WordPress server, you can use a plugin in WordPress - WP File Manager. Using this plugin, you will be able to access the folder structure and create a new folder. Upload the build file in the newly created folder.

Now, create a WordPress page as below

Add a block (Custom HTML) in the page as below

Add below two lines of code by putting the actual values that you must have configured in your code

<script src="/apps/componentName/componentBuild.js"></script>
<custom-tagname>
</custom-tagname>

Update the page so that the changes will be saved. Now, if you browse the page, you should be able to see your web component rendered in your WordPress website.

For more detail information and sample web component creation you can refer this article

Thanks for reading! I hope you found this short information interesting!