kintone UI Component를 React로 사용해보십시오.
11784 단어 CodeSandboxReact금과
CodeSandbox란?
온라인 편집기 중 하나입니다.
h tps : // 코데 씨 d 보 x. 이오
CodeSandbox is an online editor that's built for web application development.
등록 없이 즉시 사용하기 시작할 수 있습니다.
무료 프레임에는 프라이빗 환경이 없고, 작성할 수 있는 환경에 상한이 있거나 하기 때문에 그 점에 주의가 필요합니다.
h tps : // 코데 씨 d 보 x. 이오 / 파 트론
React 환경 만들기
CodeSandbox에서 React 앱 환경을 설정합니다.
CodeSandbox에서 React 앱 환경을 설정합니다.
파일을 수정하고 저장하면 자동으로 컴파일, 번들되어 프로젝트에 이름을 붙여 저장할 수 있게 됩니다. 메뉴도 바뀌어 GitHub와 연결할 수 있습니다.
무료 테두리에서는 퍼블릭 설정 밖에 만들 수 없으므로 주의가 필요합니다.
kintone UI Component를 호출하십시오.
텍스트 상자와 버튼 구성 요소를 로드합니다.
참조 ( ㅡㅡㅡㅜㅜㅜㅜㅜㅜ 기주 b. 이오 / 킨토네 우이코 m포넨 t / )의 코드를 복사하여 동작을 확인해보십시오.
병아리의 파일은 아래와 같습니다.
index.jsimport React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
return (
<div className="App">
<h1>Hello CodeSandbox for React!</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
텍스트 상자와 버튼을 표시하는 코드를 추가합니다.
버튼을 누르면 경고가 텍스트 상자의 내용을 표시하도록 합니다.
index.jsimport { Text, Button } from "kintone-ui-component";
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
class MyApp extends React.Component {
constructor(props) {
super(props);
this.state = {
value: ""
};
}
render() {
return (
<div>
<Text
value={this.state.value}
isVisible={true}
isDisabled={false}
onChange={value => {
this.setState({ value });
}}
/>
<Button
text="Submit"
type="submit"
isDisabled={false}
isVisible={true}
onClick={this.handleButtonClick}
/>
</div>
);
}
handleButtonClick = () => {
window.alert(this.state.value);
};
}
const rootElement = document.getElementById("root");
ReactDOM.render(<MyApp />, rootElement);
index.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>
DependencyNotFoundError 가 표시되면 Suggested solutions:Add @kintone/kintone-ui-component as dependency 링크를 클릭하면 npm에서 kintone-ui-conponent를 자동으로 설치합니다.
화면 캡처
React의 이해 부족도 있어, 컴퍼넌트를 조합했을 때의 동작을 잘 모르는 것도 있습니다만, CodeSandbox는 kintone UI Component 를 간편하게 시험할 수 있어 편리하네요.
제3회에 계속됩니다.
Reference
이 문제에 관하여(kintone UI Component를 React로 사용해보십시오.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/sy250f/items/64e384dcb941897ced6f
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
return (
<div className="App">
<h1>Hello CodeSandbox for React!</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
import { Text, Button } from "kintone-ui-component";
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
class MyApp extends React.Component {
constructor(props) {
super(props);
this.state = {
value: ""
};
}
render() {
return (
<div>
<Text
value={this.state.value}
isVisible={true}
isDisabled={false}
onChange={value => {
this.setState({ value });
}}
/>
<Button
text="Submit"
type="submit"
isDisabled={false}
isVisible={true}
onClick={this.handleButtonClick}
/>
</div>
);
}
handleButtonClick = () => {
window.alert(this.state.value);
};
}
const rootElement = document.getElementById("root");
ReactDOM.render(<MyApp />, rootElement);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>
React의 이해 부족도 있어, 컴퍼넌트를 조합했을 때의 동작을 잘 모르는 것도 있습니다만, CodeSandbox는 kintone UI Component 를 간편하게 시험할 수 있어 편리하네요.
제3회에 계속됩니다.
Reference
이 문제에 관하여(kintone UI Component를 React로 사용해보십시오.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/sy250f/items/64e384dcb941897ced6f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
