React Integration

Last updated: 19 days ago

This framework can be integrated both inside and outside React. It allows using WebComponent components anywhere within React, and its modules can be utilized in the useEffect hook.

Vue Integration19 days agoReact Integration19 days ago

Introduction

React is currently the most popular frontend development framework worldwide. It provides excellent support for WebComponents, making it fully compatible with all WebComponent components in this framework. For standalone modules, they can be used after node rendering is complete, such as in the useEffect method.

Basic Usage

While React and Vue share similar goals, their implementations differ significantly. Here are the key points for this example:

For browser environments, React requires both the core logic and data processing JS file (react.js) and the virtual DOM handling JS file (react-dom.js).
Unlike Vue which allows using the use method to import third-party frameworks, React doesn't require special imports.
In React, use the useEffect method as a replacement for Vue's mounted hook. Within useEffect, you can use document.querySelector to locate nodes.

OrcaUI's custom components can be used anywhere within React components. After rendering completes, all of OrcaUI's functional modules become available.

Output
HTML
JS

```
                
                
            
```

                
                let { useState, useEffect } = React;
                let App = () => {
                    let [message] = useState("Hello React!");
                    //Rendering completed
                    useEffect(() => {
                            document.querySelector('#demo01').onclick = ()=>{
                                console.log(orca);
                                //Use OrcaUI modules/components normally
                                orca.alert({content:`OrcaUI has been imported`});
                            }
                        }, []);
                        return React.createElement(
                            "div", 
                            null,
                            React.createElement("oc-btn", { id: "app01",label:message }),
                            React.createElement("oc-btn", { id: "demo01",label:'Import OrcaUI' })
                        );
                };
                // Render React component to page
                ReactDOM.render(React.createElement(App), document.getElementById("app"));

Using JSX Syntax

The most efficient rendering approach with React is using JSX syntax. Typically in Node environments, Babel compiles React's JSX templates into React-compatible JS files as components, which are then bundled with other React files into a minified file for browser use.

Current browsers don't natively support JSX syntax, requiring Babel for processing. JSX templates must be written in script tags with type="text/babel".

Output
HTML
JS

```
                
                
            
```
```
                
                
            
```

Assets

19 days ago

Vue Integration