@datalayer/core/lib/App.js

[](https://datalayer.io)

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/*
 * Copyright (c) 2023-2025 Datalayer, Inc.
 * Distributed under the terms of the Modified BSD License.
 */
import { useState } from 'react';
import reactLogo from './assets/react.svg';
import { useJupyter, JupyterReactTheme } from '@datalayer/jupyter-react';
import { CellExample } from './examples/CellExample';
import { NotebookExample } from './examples/NotebookExample';
import './App.css';
export function App() {
    const { serviceManager } = useJupyter({
        jupyterServerUrl: 'https://oss.datalayer.run/api/jupyter-server',
        jupyterServerToken: '60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6',
        startDefaultKernel: true,
    });
    const [count, setCount] = useState(0);
    return (_jsxs("div", { className: "App", children: [_jsx(_Fragment, { children: _jsxs(JupyterReactTheme, { children: [serviceManager && _jsx(CellExample, { serviceManager: serviceManager }), serviceManager && (_jsx(NotebookExample, { serviceManager: serviceManager }))] }) }), _jsxs("div", { children: [_jsx("a", { href: "https://reactjs.org", target: "_blank", rel: "noreferrer", children: _jsx("img", { src: reactLogo, className: "logo react", alt: "React logo" }) }), _jsx("a", { href: "https://vitejs.dev", target: "_blank", rel: "noreferrer", children: _jsx("img", { src: "/vite.svg", className: "logo", alt: "Vite logo" }) })] }), _jsx("h1", { children: "React + Vite" }), _jsx("h2", { children: "On CodeSandbox!" }), _jsxs("div", { className: "card", children: [_jsxs("button", { onClick: () => setCount(count => count + 1), children: ["count is ", count] }), _jsxs("p", { children: ["Edit ", _jsx("code", { children: "src/App.tsx" }), " and save to test HMR."] }), _jsx("p", { children: "Tip: you can use the inspector button next to address bar to click on components in the preview and open the code in the editor!" })] }), _jsx("p", { className: "read-the-docs", children: "Click on the Vite and React logos to learn more" })] }));
}
export default App;