Sometimes it is desirable to make custom UI components in Kintone. React is a library that is used to create reusable components with flexible functionality. For example, Kintone records can be represented as drag-and-droppable cards by using React. In this tutorial, the process of creating a React project and attaching it to a Kintone app is demonstrated.
This tutorial will use VS Code with the LiveServer extension to create and attach the React project file in Kintone. Node and NPM will be used to install/manage our JavaScript code and libraries.
Overview
- Creating a Custom View in Kintone
- Creating a React app and adding required packages
- Update project code
- Start the Project and Add to Kintone
- Conclusion
Creating a Custom View in Kintone
You can use or create any Kintone app for this example.
Navigate to the app settings and create a Custom View.
Click the app settings gear icon and navigate to Views:
Click the plus button to create a new View:
Check “Custom View” and rename the view to “Custom View”:
The Custom View section will appear. In the HTML Code section, add the text below. Save the View ID.
Click Save and Update the app.
Create an empty folder on your computer, and name it “DragAndDropTaskReact”.
Open this empty folder in VS Code and open a new terminal window.
Run the following commands in the terminal.
This command will create an initial React project called “dragdropapp”. within that empty folder.
npx create-react-app dragdropappInstall the following packages into the project to allow bundling of React, CSS and image files.
cd dragdropapp
npm install babel-loader
npm install -save-dev @babel/core @babel/preset-env @babel/preset-react
npm install css-loader style-loader file-loaderThe following command will install necessary Webpack libraries. Webpack is used to bundle code files and libraries into one file.
npm install webpack webpack-cliThe following commands will install React and ReactDOM.
npm install react react-domThe project is now ready to be edited to work with Kintone.
Update Project Code
Update the index.js file with the following code. The code will attach the React App.js component to Kintone’s root element that we created in the first step of the tutorial. NOTE: Make sure to replace the Custom View ID from the first step.
Also, make sure the App.js file has “import React from ‘react’ ” at the top to avoid errors.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
(() => {
kintone.events.on('app.record.index.show', (event) => {
console.log('loaded');
// Replace the Custom View ID----->
const customView = Number(<Custom View ID>);
let rootElement = document.getElementById('root');
if (!rootElement) {
rootElement = document.createElement('div');
rootElement.id = 'root';
document.body.appendChild(rootElement);
}
ReactDOM.render(
<React.StrictMode>
<App/>
</React.StrictMode>,
rootElement
);
return event;
});
})();Update package.json. It will include a “scripts” section with commands like “build” that will create the bundled project file.
{
"name": "dragdropapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"css-loader": "^7.0.0",
"file-loader": "^6.2.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "^3.0.1",
"web-vitals": "^2.1.4",
"webpack": "^5.91.0",
"webpack-cli": "^5.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "webpack --mode production --watch",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/core": "^7.24.4",
"@babel/preset-env": "^7.24.4",
"@babel/preset-react": "^7.24.1",
"babel-loader": "^9.1.3"
}
}Create and update a file named webpack.config.js with the following code in the main “dragdropapp” folder. This will tell Webpack to bundle React files, image files and CSS files. Here is the code for the new webpack.config.js file:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/',
filename: 'dist/bundle.js'
},
resolve: {
alias: {
modules: path.join(__dirname, 'node_modules'),
common: path.join(__dirname, 'common')
},
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' }
]
},
{
test: /\.svg$/,
use: [
'file-loader'
]
},
{
test: /\.js$|jsx/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-react',
[
'@babel/preset-env',
{
targets: {
browsers: [
'last 4 versions'
]
},
useBuiltIns: 'usage',
corejs: 3
}
]
]
}
}
},
],
},
};Create and update the .babelrc file in the main “dragdropapp” folder. This will further configure webpack to work with React.
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}Finally, the project hierarchy should end up like this:
Inside the src file is where our React components and the main file index.js is stored:
In the future, other components besides App.js can be created and stored in the src folder, for example “KintoneRecordCardComponent”.
Start the Project and Add to Kintone
Run npm run build in the terminal, then start LiveServer.
(This creates the dist folder and bundle file).
LiveServer will locally serve the bundle file generated by Webpack (in your browser, navigate to https://127.0.0.1:5500/, go to dist > bundle.js).
Click on the folder to copy the link to the bundled project file.
Copy the link to bundle.js.
Navigate back to Kintone and input the link into the app. (App Settings > JavaScript and CSS Customization).
Click Save, and Update App.
Now in the Custom View, the user can see that React’s default project is displaying in Kintone. The React component from the App.js file is appended to the root element in Kintone.
The LiveServer link method is helpful for development, but once LiveServer is turned off, the connection between the project and Kintone will stop.
Once development is completed, simply upload the bundle.js file into Kintone.
Conclusion
This article can be referred back to whenever setting up the React environment in Kintone is needed. Using a module bundler is essential for this project, so Webpack and babel-loader was used. This example will be expanded in further tutorials to explain how Kintone records can be represented as React components.
