Converting JDreact Projects to H5: Configuration, API Integration, CSS Import, Compatibility Fixes, and State Management

The article begins with an overview of JDreact, a framework that can run on Android, iOS, and web, and introduces the goal of converting existing JDreact code into standard H5 (HTML5) output.

Step 1 – Configuring config.js : After building the project, locate the generated web/config.js file and modify fields such as build.entry , publicPath , assetsRoot , and src to match the target web environment.

Step 2 – Switching to JSONP for backend calls: Replace native JDreact request methods with JSONP, add the required appid from the JD Open Platform, and adjust web/index.tpl.vm to inject the correct user credentials for local development.

Step 3 – Importing external CSS: Define class names in the JDreact components, create an external stylesheet (e.g., outstyle.css ), and import it in the web.js file using import './JDReactYouka/outstyle.css'; .

Step 4 – Solving require‑lifting problems: Separate platform‑specific modules into files with .web.js , .android.js , and .ios.js extensions so that the bundler does not try to resolve unavailable native modules when building for web.

Step 5 – Ref handling and input focus: Because the web version works with real DOM nodes, the code must check Platform.OS === 'web' and use this.refs.telInput.refs.input.focus() instead of the React Native focus() method; also prevent event bubbling to keep the cursor visible.

Step 6 – Border styling for custom components: When converting components like <JDRadioGroup> , replace unified borderWidth with explicit side widths ( borderRightWidth , borderBottomWidth , etc.) and set zero width for unused sides to avoid thicker borders on web.

Step 7 – Data transfer between pages: Simple data can be passed via router parameters using JSON.stringify(encodeURIComponent(...)) , while complex objects should be stringified without extra encoding; on the receiving side, decode and parse the JSON.

Step 8 – Persistent state with AsyncStorage: Use AsyncStorage.setItem('key', value) and AsyncStorage.getItem('key') (which maps to localStorage on web) to store flags such as showImg . Remember that stored values are strings, so convert them back to booleans (e.g., result === 'true' ? true : false ) before updating component state.

The article concludes with a reminder that some native features (e.g., contacts) cannot be replicated on H5 and must be omitted or replaced, and encourages developers to test across iOS, Android, and various browsers to ensure compatibility.