# React Widget
> Create a React.js Widget in JupyterLab.
This extension shows how to use the `ReactWidget` wrapper from `@jupyterlab/apputils` to use React in a JupyterLab extension.
![react-widget](preview2.gif)
## Install
```bash
jlpm
jlpm build
jupyter labextension install .
# Rebuild Typescript source after making changes
jlpm build
# Rebuild JupyterLab after making any changes
jupyter lab build
```
You can watch the source directory and run JupyterLab in watch mode to watch for changes in the extension's source and automatically rebuild the extension and application.
```bash
# Watch the source directory in another terminal tab
jlpm watch
# Run jupyterlab in watch mode in one terminal tab
jupyter lab --watch
```
## React Developer Tools
It is possible to use the [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=de) Chrome extension to inspect React components.
![react-dev-tools](preview.gif)
1. 환경 설정
```bash
> curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
> source ~/.bashrc
> nvm install node
```
1. miniconda 설치
[미니콘다 설치 파일 다운로드](https://docs.conda.io/en/latest/miniconda.html#linux-installers)
```bash
> wget https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh
> chmod +x Miniconda3-latest-Linux-x86_64.sh
> ./Miniconda3-latest-Linux-x86_64.sh
# miniconda 설정 후
> > conda install cookiecutter
```
환경 설정이 .bashrc에 적용되므로 이걸 .zshrc로 복사해서 적용해야 함.
1. 주피터 환경 생성
```bash
> conda create -n jupyterlab-ext --override-channels --strict-channel-priority -c conda-forge -c nodefaults jupyterlab=3 cookiecutter nodejs jupyter-packaging git python=3.9
```
1. 주피터 환경 활성화
```bash
> conda activate jupyterlab-ext
```
(비활성화는 conda deactivate)
1. cookiecutter로 확장 프로젝트 생성
```bash
> cookiecutter https://github.com/jupyterlab/extension-cookiecutter-ts
Select kind:
1 - frontend
2 - server
3 - theme
Choose from 1, 2, 3 [1]: 1
author_name []: Your Name
author_email []: your@name.org
labextension_name [myextension]: jupyterlab_apod
python_name [myextension]: jupyterlab_apod
project_short_description [A JupyterLab extension.]: Show a random NASA Astronomy Picture of the Day in a JupyterLab panel
has_settings [n]: n
has_binder [n]: y
repository [https://github.com/github_username/myextension]: https://github.com/github_username/jupyterlab_apod
```
1. 소스 symbolic link 설정하기(소스가 변경되었을 때 자동으로 반영되게)
```bash
> jupyter labextension develop --overwrite .
```
1. 다른 탭에서 주피터 랩 실행하기
```bash
> jupyter lab --no-browser
```
1. 코드 변경 반영하기
```bash
> jlpm run build
```
(또는 다른 탭에서 jlpm run watch 실행)
1. 필요한 라이브러리 설치
```bash
> conda install tensorflow matplotlib scikit-learn
```
Raw data
{
"_id": null,
"home_page": "https://github.com/mentoreet/modu-jupyterlab-ext.git",
"name": "moduextension",
"maintainer": "",
"docs_url": null,
"requires_python": ">=3.7",
"maintainer_email": "",
"keywords": "Jupyter,JupyterLab,JupyterLab3",
"author": "moducoding",
"author_email": "support@mentoreet.com",
"download_url": "https://files.pythonhosted.org/packages/8e/10/bea4a535def26af8112fc4c171586391c5aa4488fba13306e5a014bc7305/moduextension-0.1.1.tar.gz",
"platform": "Linux",
"description": "# React Widget\n\n> Create a React.js Widget in JupyterLab.\n\nThis extension shows how to use the `ReactWidget` wrapper from `@jupyterlab/apputils` to use React in a JupyterLab extension.\n\n![react-widget](preview2.gif)\n\n## Install\n\n```bash\njlpm\njlpm build\njupyter labextension install .\n\n# Rebuild Typescript source after making changes\njlpm build\n# Rebuild JupyterLab after making any changes\njupyter lab build\n```\n\nYou can watch the source directory and run JupyterLab in watch mode to watch for changes in the extension's source and automatically rebuild the extension and application.\n\n```bash\n# Watch the source directory in another terminal tab\njlpm watch\n# Run jupyterlab in watch mode in one terminal tab\njupyter lab --watch\n```\n\n## React Developer Tools\n\nIt is possible to use the [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=de) Chrome extension to inspect React components.\n\n![react-dev-tools](preview.gif)\n\n1. \ud658\uacbd \uc124\uc815\n ```bash\n > curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash\n > source ~/.bashrc\n > nvm install node\n ```\n1. miniconda \uc124\uce58\n [\ubbf8\ub2c8\ucf58\ub2e4 \uc124\uce58 \ud30c\uc77c \ub2e4\uc6b4\ub85c\ub4dc](https://docs.conda.io/en/latest/miniconda.html#linux-installers)\n ```bash\n > wget https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh\n > chmod +x Miniconda3-latest-Linux-x86_64.sh\n > ./Miniconda3-latest-Linux-x86_64.sh\n # miniconda \uc124\uc815 \ud6c4\n > > conda install cookiecutter\n ```\n \ud658\uacbd \uc124\uc815\uc774 .bashrc\uc5d0 \uc801\uc6a9\ub418\ubbc0\ub85c \uc774\uac78 .zshrc\ub85c \ubcf5\uc0ac\ud574\uc11c \uc801\uc6a9\ud574\uc57c \ud568.\n1. \uc8fc\ud53c\ud130 \ud658\uacbd \uc0dd\uc131\n ```bash\n > conda create -n jupyterlab-ext --override-channels --strict-channel-priority -c conda-forge -c nodefaults jupyterlab=3 cookiecutter nodejs jupyter-packaging git python=3.9\n ```\n1. \uc8fc\ud53c\ud130 \ud658\uacbd \ud65c\uc131\ud654\n ```bash\n > conda activate jupyterlab-ext\n ```\n (\ube44\ud65c\uc131\ud654\ub294 conda deactivate)\n1. cookiecutter\ub85c \ud655\uc7a5 \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131\n\n ```bash\n > cookiecutter https://github.com/jupyterlab/extension-cookiecutter-ts\n\n Select kind:\n 1 - frontend\n 2 - server\n 3 - theme\n Choose from 1, 2, 3 [1]: 1\n author_name []: Your Name\n author_email []: your@name.org\n labextension_name [myextension]: jupyterlab_apod\n python_name [myextension]: jupyterlab_apod\n project_short_description [A JupyterLab extension.]: Show a random NASA Astronomy Picture of the Day in a JupyterLab panel\n has_settings [n]: n\n has_binder [n]: y\n repository [https://github.com/github_username/myextension]: https://github.com/github_username/jupyterlab_apod\n ```\n\n1. \uc18c\uc2a4 symbolic link \uc124\uc815\ud558\uae30(\uc18c\uc2a4\uac00 \ubcc0\uacbd\ub418\uc5c8\uc744 \ub54c \uc790\ub3d9\uc73c\ub85c \ubc18\uc601\ub418\uac8c)\n ```bash\n > jupyter labextension develop --overwrite .\n ```\n1. \ub2e4\ub978 \ud0ed\uc5d0\uc11c \uc8fc\ud53c\ud130 \ub7a9 \uc2e4\ud589\ud558\uae30\n ```bash\n > jupyter lab --no-browser\n ```\n1. \ucf54\ub4dc \ubcc0\uacbd \ubc18\uc601\ud558\uae30\n ```bash\n > jlpm run build\n ```\n (\ub610\ub294 \ub2e4\ub978 \ud0ed\uc5d0\uc11c jlpm run watch \uc2e4\ud589)\n1. \ud544\uc694\ud55c \ub77c\uc774\ube0c\ub7ec\ub9ac \uc124\uce58\n ```bash\n > conda install tensorflow matplotlib scikit-learn\n ```\n",
"bugtrack_url": null,
"license": "BSD-3-Clause",
"summary": "moducoding jupyterlab extension",
"version": "0.1.1",
"split_keywords": [
"jupyter",
"jupyterlab",
"jupyterlab3"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "6bba86aafbc372c1723d92658d8d430a1fb854c3ff005208016e7b1f408731c5",
"md5": "6d2b6b978f48ae0a9283b71ffd377364",
"sha256": "b682040bd34ccfa226d9b626549ed61c36c90a967ca549e775f8504b2aa2fc16"
},
"downloads": -1,
"filename": "moduextension-0.1.1-py3-none-any.whl",
"has_sig": false,
"md5_digest": "6d2b6b978f48ae0a9283b71ffd377364",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.7",
"size": 3197060,
"upload_time": "2023-01-12T08:00:14",
"upload_time_iso_8601": "2023-01-12T08:00:14.786978Z",
"url": "https://files.pythonhosted.org/packages/6b/ba/86aafbc372c1723d92658d8d430a1fb854c3ff005208016e7b1f408731c5/moduextension-0.1.1-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "8e10bea4a535def26af8112fc4c171586391c5aa4488fba13306e5a014bc7305",
"md5": "31ecedb575fbcf9ee0c7ab16e6bbff1d",
"sha256": "0aa1e90ee7e5edee601816b26306faccb42811a8fb1ada751ee727b17ce5568d"
},
"downloads": -1,
"filename": "moduextension-0.1.1.tar.gz",
"has_sig": false,
"md5_digest": "31ecedb575fbcf9ee0c7ab16e6bbff1d",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.7",
"size": 1694520,
"upload_time": "2023-01-12T08:00:19",
"upload_time_iso_8601": "2023-01-12T08:00:19.826571Z",
"url": "https://files.pythonhosted.org/packages/8e/10/bea4a535def26af8112fc4c171586391c5aa4488fba13306e5a014bc7305/moduextension-0.1.1.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2023-01-12 08:00:19",
"github": true,
"gitlab": false,
"bitbucket": false,
"github_user": "mentoreet",
"github_project": "modu-jupyterlab-ext.git",
"lcname": "moduextension"
}