liferay-npm-bundler-preset-reactjs

# 1. Create a new Liferay-compatible project structure (example) mkdir my-react-widget cd my-react-widget npm init -y # 2. Install the React preset as a dev dependency npm install --save-dev liferay-npm-bundler-preset-reactjs # 3. Create a .npmbundlerrc file in your project root to use the preset echo '{ "preset": "liferay-npm-bundler-preset-reactjs" }' > .npmbundlerrc # 4. Create a simple React component file (e.g., src/main/resources/META-INF/resources/index.js) mkdir -p src/main/resources/META-INF/resources cat << EOF > src/main/resources/META-INF/resources/index.js import React from 'react'; import ReactDOM from 'react-dom'; const App = () => { return ( <div> <h1>Hello from Liferay React Widget!</h1> <p>This component is bundled using liferay-npm-bundler-preset-reactjs.</p> </div> ); }; // For Liferay portlets, components are often rendered into a specific DOM element // and exported as a function for Liferay to invoke. class MyReactPortlet extends React.Component { render() { return <App />; } } export default function(portletId) { ReactDOM.render(<MyReactPortlet />, document.getElementById(portletId)); } EOF # 5. Add React and ReactDOM as development dependencies npm install --save-dev react react-dom # Note: In a deployed Liferay DXP environment, React/ReactDOM are often provided as shared libraries. # The bundler is designed to inject peer dependencies if needed. # 6. (Optional) Run the Liferay npm bundler (requires 'liferay-npm-bundler' to be installed globally or as a dev dep) # npm install -g liferay-npm-bundler # liferay-npm-bundler