首页 探索 帮助
登录
bux
/
tracim_v2
关注 1
点赞 0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
浏览代码

fixed html-document slug + fixed popup create content closing + fixed translation

Skylsmoi 7 年前
父节点
ccd1d9b6c0
当前提交
78466f7d62
共有 20 个文件被更改，包括 124 次插入 和 50 次删除
分列视图 显示文件统计
  1. 1 1
      frontend/dist/appInterface.js
  2. 2 1
      frontend/src/appFactory.js
  3. 1 1
      frontend/src/component/Workspace/OpenContentApp.jsx
  4. 6 4
      frontend/src/container/Header.jsx
  5. 1 1
      frontend_app_html-document/dist/index.html
  6. 2 1
      frontend_app_html-document/i18next.scanner/en/translation.json
  7. 2 1
      frontend_app_html-document/i18next.scanner/fr/translation.json
  8. 1 1
      frontend_app_html-document/package.json
  9. 5 5
      frontend_app_html-document/src/component/HtmlDocument.jsx
  10. 18 6
      frontend_app_html-document/src/container/HtmlDocument.jsx
  11. 27 7
      frontend_app_html-document/src/container/PopupCreateHtmlDocument.jsx
  12. 5 5
      frontend_app_html-document/src/css/index.styl
  13. 4 3
      frontend_app_html-document/src/helper.js
  14. 1 1
      frontend_app_html-document/src/index.js
  15. 3 1
      frontend_app_thread/i18next.scanner/en/translation.json
  16. 3 1
      frontend_app_thread/i18next.scanner/fr/translation.json
  17. 26 6
      frontend_app_thread/src/container/PopupCreateThread.jsx
  18. 13 1
      frontend_app_thread/src/container/Thread.jsx
  19. 2 2
      frontend_app_thread/src/helper.js
  20. 1 1
      frontend_app_thread/src/index.js

+ 1 - 1
frontend/dist/appInterface.js 查看文件 

@@ -3,7 +3,7 @@
3 3
4 4 
   getSelectedApp = name => {
5 5 
     switch (name) {
6 
-      case 'html-documents':
6 
+      case 'html-document':
7 7 
         return appHtmlDocument
8 8 
       case 'thread':
9 9 
         return appThread

+ 2 - 1
frontend/src/appFactory.js 查看文件 

@@ -24,7 +24,8 @@ export function appFactory (WrappedComponent) {
24 24 
         domContainer: 'popupCreateContentContainer',
25 25 
         apiUrl: FETCH_CONFIG.apiUrl,
26 26 
         mockApiUrl: FETCH_CONFIG.mockApiUrl,
27 
-        apiHeader: FETCH_CONFIG.headers // should this be used by app ? right now, apps have their own headers
27 
+        apiHeader: FETCH_CONFIG.headers, // should this be used by app ? right now, apps have their own headers
28 
+        translation: i18n.store.data
28 29 
       },
29 30 
       idWorkspace,
30 31 
       idFolder: idFolder === 'null' ? null : idFolder

+ 1 - 1
frontend/src/component/Workspace/OpenContentApp.jsx 查看文件 

@@ -22,7 +22,7 @@ export class OpenContentApp extends React.Component {
22 22
23 23 
       if (appOpenedType === contentToOpen.type) { // app already open
24 24 
         GLOBAL_dispatchEvent({
25 
-          type: `${contentToOpen.type}_reloadContent`, // handled by html-documents:src/container/HtmlDocument.jsx
25 
+          type: `${contentToOpen.type}_reloadContent`, // handled by html-document:src/container/HtmlDocument.jsx
26 26 
           data: contentToOpen
27 27 
         })
28 28 
       } else { // open another app

+ 6 - 4
frontend/src/container/Header.jsx 查看文件 

@@ -1,6 +1,7 @@
1 1 
 import React from 'react'
2 2 
 import { connect } from 'react-redux'
3 3 
 import i18n from '../i18n.js'
4 
+import appFactory from '../appFactory.js'
4 5 
 import { translate } from 'react-i18next'
5 6 
 import Cookies from 'js-cookie'
6 7 
 import Logo from '../component/Header/Logo.jsx'
 
@@ -32,9 +33,10 @@ class Header extends React.Component {
32 33 
   handleChangeInput = e => this.setState({inputSearchValue: e.target.value})
33 34 
   handleClickSubmit = () => {}
34 35
35 
-  handleChangeLang = langId => {
36 
-    this.props.dispatch(setUserLang(langId))
37 
-    i18n.changeLanguage(langId)
36 
+  handleChangeLang = idLang => {
37 
+    this.props.dispatch(setUserLang(idLang))
38 
+    i18n.changeLanguage(idLang)
39 
+    this.props.emitEventApp('allApp_changeLang', idLang)
38 40 
   }
39 41
40 42 
   handleClickHelp = () => {}
 
@@ -105,4 +107,4 @@ class Header extends React.Component {
105 107 
 }
106 108
107 109 
 const mapStateToProps = ({ lang, user }) => ({ lang, user })
108 
-export default connect(mapStateToProps)(translate()(Header))
110 
+export default connect(mapStateToProps)(translate()(appFactory(Header)))

+ 1 - 1
frontend_app_html-document/dist/index.html 查看文件 

@@ -3,7 +3,7 @@
3 3 
 <head>
4 4 
   <meta charset='utf-8' />
5 5 
   <meta name="viewport" content="width=device-width, user-scalable=no" />
6 
-  <title>Html-documents App Tracim</title>
6 
+  <title>Html-document App Tracim</title>
7 7 
   <link rel='shortcut icon' href='favicon.ico'>
8 8
9 9 
   <link rel="stylesheet" type="text/css" href="./font/font-awesome-4.7.0/css/font-awesome.css">

+ 2 - 1
frontend_app_html-document/i18next.scanner/en/translation.json 查看文件 

@@ -1,3 +1,4 @@
1 1 
 {
2 
-  "Last version": "Last version"
2 
+  "Last version": "Last version",
3 
+  "Validate and create": "Validate and create"
3 4 
 }

+ 2 - 1
frontend_app_html-document/i18next.scanner/fr/translation.json 查看文件 

@@ -1,3 +1,4 @@
1 1 
 {
2 
-  "Last version": "Dernière version"
2 
+  "Last version": "Dernière version",
3 
+  "Validate and create": "Valider et créer"
3 4 
 }

+ 1 - 1
frontend_app_html-document/package.json 查看文件 

@@ -1,5 +1,5 @@
1 1 
 {
2 
-  "name": "tracim_app_html-documents",
2 
+  "name": "tracim_app_html-document",
3 3 
   "version": "1.1.2",
4 4 
   "description": "",
5 5 
   "main": "index.js",

+ 5 - 5
frontend_app_html-document/src/component/HtmlDocument.jsx 查看文件 

@@ -4,27 +4,27 @@ import { MODE } from '../helper.js'
4 4
5 5 
 const HtmlDocument = props => {
6 6 
   return (
7 
-    <div className='wsContentHtmlDocument__contentpage__textnote html-documents__contentpage__textnote'>
7 
+    <div className='wsContentHtmlDocument__contentpage__textnote html-document__contentpage__textnote'>
8 8 
       {(props.mode === MODE.VIEW || props.mode === MODE.REVISION) &&
9 9 
         <div>
10 
-          <div className='html-documents__contentpage__textnote__version'>
10 
+          <div className='html-document__contentpage__textnote__version'>
11 11 
             version n°
12 12 
             <div dangerouslySetInnerHTML={{__html: props.mode === MODE.VIEW ? props.lastVersion : props.version}} />
13 13 
             {props.mode === MODE.REVISION &&
14 
-              <div className='html-documents__contentpage__textnote__lastversion'>
14 
+              <div className='html-document__contentpage__textnote__lastversion'>
15 15 
                 (dernière version : {props.lastVersion})
16 16 
               </div>
17 17 
             }
18 18 
           </div>
19 19 
           {/* need try to inject html in stateless component () => <span>{props.text}</span> */}
20 
-          <div className='html-documents__contentpage__textnote__text' dangerouslySetInnerHTML={{__html: props.text}} />
20 
+          <div className='html-document__contentpage__textnote__text' dangerouslySetInnerHTML={{__html: props.text}} />
21 21 
         </div>
22 22 
       }
23 23
24 24 
       {props.mode === MODE.EDIT &&
25 25 
         <TextAreaApp
26 26 
           id={props.wysiwygNewVersion}
27 
-          customClass={'html-documents__editionmode'}
27 
+          customClass={'html-document__editionmode'}
28 28 
           customColor={props.customColor}
29 29 
           onClickCancelBtn={props.onClickCloseEditMode}
30 30 
           onClickValidateBtn={props.onClickValidateBtn}

+ 18 - 6
frontend_app_html-document/src/container/HtmlDocument.jsx 查看文件 

@@ -41,24 +41,36 @@ class HtmlDocument extends React.Component {
41 41 
     }
42 42
43 43 
     // i18n has been init, add resources from frontend
44 
-    addAllResourceI18n(i18n, props.data ? props.data.config.translation : debug.config.translation)
44 
+    addAllResourceI18n(i18n, this.state.config.translation)
45 
+    i18n.changeLanguage(this.state.loggedUser.lang)
45 46
46 47 
     document.addEventListener('appCustomEvent', this.customEventReducer)
47 48 
   }
48 49
49 50 
   customEventReducer = ({ detail: { type, data } }) => { // action: { type: '', data: {} }
50 51 
     switch (type) {
51 
-      case 'html-documents_showApp':
52 
+      case 'html-document_showApp':
52 53 
         console.log('%c<HtmlDocument> Custom event', 'color: #28a745', type, data)
53 54 
         this.setState({isVisible: true})
54 55 
         break
55 
-      case 'html-documents_hideApp':
56 
+      case 'html-document_hideApp':
56 57 
         console.log('%c<HtmlDocument> Custom event', 'color: #28a745', type, data)
57 58 
         this.setState({isVisible: false})
58 59 
         break
59 
-      case 'html-documents_reloadContent':
60 
+      case 'html-document_reloadContent':
60 61 
         console.log('%c<HtmlDocument> Custom event', 'color: #28a745', type, data)
61 62 
         this.setState(prev => ({content: {...prev.content, ...data}, isVisible: true}))
63 
+        break
64 
+      case 'allApp_changeLang':
65 
+        console.log('%c<HtmlDocument> Custom event', 'color: #28a745', type, data)
66 
+        this.setState(prev => ({
67 
+          loggedUser: {
68 
+            ...prev.loggedUser,
69 
+            lang: data
70 
+          }
71 
+        }))
72 
+        i18n.changeLanguage(data)
73 
+        break
62 74 
     }
63 75 
   }
64 76 
 
@@ -322,7 +334,7 @@ class HtmlDocument extends React.Component {
322 334
323 335 
               {mode === MODE.REVISION &&
324 336 
                 <button
325 
-                  className='wsContentGeneric__option__menu__lastversion html-documents__lastversionbtn btn'
337 
+                  className='wsContentGeneric__option__menu__lastversion html-document__lastversionbtn btn'
326 338 
                   onClick={this.handleClickLastVersion}
327 339 
                   style={{backgroundColor: config.hexcolor, color: '#fdfdfd'}}
328 340 
                 >
 
@@ -364,7 +376,7 @@ class HtmlDocument extends React.Component {
364 376 
             lastVersion={timeline.filter(t => t.timelineType === 'revision').length}
365 377 
             text={content.raw_content}
366 378 
             onChangeText={this.handleChangeText}
367 
-            key={'html-documents'}
379 
+            key={'html-document'}
368 380 
           />
369 381
370 382 
           <Timeline

+ 27 - 7
frontend_app_html-document/src/container/PopupCreateHtmlDocument.jsx 查看文件 

@@ -1,15 +1,17 @@
1 1 
 import React from 'react'
2 
+import { translate } from 'react-i18next'
2 3 
 import {
3 
-  CardPopupCreateContent, handleFetchResult
4 
+  CardPopupCreateContent,
5 
+  handleFetchResult,
6 
+  addAllResourceI18n
4 7 
 } from 'tracim_frontend_lib'
5 8 
 import { postHtmlDocContent } from '../action.async.js'
6 
-import {addAllResourceForI18n, addAllResourceI18n} from '../../../frontend_lib'
7 9 
 import i18n from '../i18n.js'
8 10
9 11 
 const debug = { // outdated
10 12 
   config: {
11 13 
     label: 'Text Document',
12 
-    slug: 'html-documents',
14 
+    slug: 'html-document',
13 15 
     faIcon: 'file-text-o',
14 16 
     hexcolor: '#3f52e3',
15 17 
     creationLabel: 'Write a document',
 
@@ -37,7 +39,7 @@ class PopupCreateHtmlDocument extends React.Component {
37 39 
   constructor (props) {
38 40 
     super(props)
39 41 
     this.state = {
40 
-      appName: 'html-documents',
42 
+      appName: 'html-document', // must remain 'html-document' because it is the name of the react built app (which contains HtmlDocument and PopupCreateHtmlDocument)
41 43 
       config: props.data ? props.data.config : debug.config,
42 44 
       loggedUser: props.data ? props.data.loggedUser : debug.loggedUser,
43 45 
       idWorkspace: props.data ? props.data.idWorkspace : debug.idWorkspace,
 
@@ -46,7 +48,25 @@ class PopupCreateHtmlDocument extends React.Component {
46 48 
     }
47 49
48 50 
     // i18n has been init, add resources from frontend
49 
-    addAllResourceI18n(i18n, props.data ? props.data.config.translation : debug.config.translation)
51 
+    addAllResourceI18n(i18n, this.state.config.translation)
52 
+    i18n.changeLanguage(this.state.loggedUser.lang)
53 
+
54 
+    document.addEventListener('appCustomEvent', this.customEventReducer)
55 
+  }
56 
+
57 
+  customEventReducer = ({ detail: { type, data } }) => { // action: { type: '', data: {} }
58 
+    switch (type) {
59 
+      case 'allApp_changeLang':
60 
+        console.log('%c<PopupCreateHtmlDocument> Custom event', 'color: #28a745', type, data)
61 
+        this.setState(prev => ({
62 
+          loggedUser: {
63 
+            ...prev.loggedUser,
64 
+            lang: data
65 
+          }
66 
+        }))
67 
+        i18n.changeLanguage(data)
68 
+        break
69 
+    }
50 70 
   }
51 71
52 72 
   handleChangeNewContentName = e => this.setState({newContentName: e.target.value})
 
@@ -93,10 +113,10 @@ class PopupCreateHtmlDocument extends React.Component {
93 113 
         faIcon={this.state.config.faIcon}
94 114 
         contentName={this.state.newContentName}
95 115 
         onChangeContentName={this.handleChangeNewContentName}
96 
-        btnValidateLabel='Valider et créer'
116 
+        btnValidateLabel={this.props.t('Validate and create')}
97 117 
       />
98 118 
     )
99 119 
   }
100 120 
 }
101 121
102 
-export default PopupCreateHtmlDocument
122 
+export default translate()(PopupCreateHtmlDocument)

+ 5 - 5
frontend_app_html-document/src/css/index.styl 查看文件 

@@ -1,6 +1,6 @@
1 1 
 @import "../../node_modules/tracim_frontend_lib/src/css/Variable.styl"
2 2
3 
-.html-documents
3 
+.html-document
4 4 
   width 70%
5 5 
   &__header
6 6 
     &__editionmode
 
@@ -68,7 +68,7 @@
68 68 
     background-color htmlColor
69 69
70 70 
 @media (min-width: min-sm) and (max-width: max-lg)
71 
-  .html-documents
71 
+  .html-document
72 72 
     &__contentpage
73 73 
       &__content
74 74 
         margin 10px
 
@@ -77,18 +77,18 @@
77 77
78 78 
 @media (min-width: min-md) and (max-width: max-md)
79 79
80 
-  .html-documents
80 
+  .html-document
81 81 
     top 68px
82 82
83 83 
 @media (min-width: min-sm) and (max-width: max-sm)
84 84
85 
-  .html-documents
85 
+  .html-document
86 86 
     top 68px
87 87 
     width 100%
88 88
89 89 
 @media (max-width: max-xs)
90 90
91 
-  .html-documents
91 
+  .html-document
92 92 
     top 68px
93 93 
     width 100%
94 94 
     &__contentpage

+ 4 - 3
frontend_app_html-document/src/helper.js 查看文件 

@@ -16,7 +16,7 @@ export const MODE = {
16 16 
 export const debug = {
17 17 
   config: {
18 18 
     label: 'Text Document',
19 
-    slug: 'html-documents',
19 
+    slug: 'html-document',
20 20 
     faIcon: 'file-text-o',
21 21 
     hexcolor: '#3f52e3',
22 22 
     creationLabel: 'Write a document',
 
@@ -71,6 +71,7 @@ export const debug = {
71 71 
     firstname: 'Côme',
72 72 
     lastname: 'Stoilenom',
73 73 
     email: 'osef@algoo.fr',
74 
+    lang: 'en',
74 75 
     avatar_url: 'https://avatars3.githubusercontent.com/u/11177014?s=460&v=4',
75 76 
     auth: btoa(`${'admin@admin.admin'}:${'admin@admin.admin'}`)
76 77 
   },
 
@@ -81,7 +82,7 @@ export const debug = {
81 82 
       user_id: 1 // -1 or 1 for debug
82 83 
     },
83 84 
     content_id: 22, // 1 or 22 for debug
84 
-    content_type: 'html-documents',
85 
+    content_type: 'html-document',
85 86 
     created: '2018-06-18T14:59:26Z',
86 87 
     current_revision_id: 11,
87 88 
     is_archived: false,
 
@@ -98,7 +99,7 @@ export const debug = {
98 99 
     show_in_ui: true,
99 100 
     slug: 'current-menu',
100 101 
     status: 'open',
101 
-    sub_content_types: ['thread', 'html-documents', 'file', 'folder'],
102 
+    sub_content_types: ['thread', 'html-document', 'file', 'folder'],
102 103 
     workspace_id: 1
103 104 
   },
104 105 
   timeline: timelineDebugData

+ 1 - 1
frontend_app_html-document/src/index.js 查看文件 

@@ -10,7 +10,7 @@ import PopupCreateHtmlDocument from './container/PopupCreateHtmlDocument.jsx'
10 10 
 require('./css/index.styl')
11 11
12 12 
 const appInterface = {
13 
-  name: 'HtmlDocument',
13 
+  name: 'html-document',
14 14 
   isRendered: false,
15 15 
   renderAppFull: data => {
16 16 
     return ReactDOM.render(

+ 3 - 1
frontend_app_thread/i18next.scanner/en/translation.json 查看文件 

@@ -1 +1,3 @@
1 
-{}
1 
+{
2 
+  "Validate and create": "Validate and create"
3 
+}

+ 3 - 1
frontend_app_thread/i18next.scanner/fr/translation.json 查看文件 

@@ -1 +1,3 @@
1 
-{}
1 
+{
2 
+  "Validate and create": "Valider et créer"
3 
+}

+ 26 - 6
frontend_app_thread/src/container/PopupCreateThread.jsx 查看文件 

@@ -1,14 +1,16 @@
1 1 
 import React from 'react'
2 
+import { translate } from 'react-i18next'
2 3 
 import {
3 4 
   addAllResourceI18n,
4 5 
   CardPopupCreateContent,
5 6 
   handleFetchResult
6 7 
 } from 'tracim_frontend_lib'
7 8 
 import { postThreadContent } from '../action.async.js'
9 
+import i18n from '../i18n.js'
8 10
9 11 
 const debug = { // outdated
10 12 
   config: {
11 
-    label: 'Thread',
13 
+    label: 'PopupCreateThread',
12 14 
     slug: 'thread',
13 15 
     faIcon: 'file-text-o',
14 16 
     hexcolor: '#ad4cf9',
 
@@ -42,11 +44,11 @@ const debug = { // outdated
42 44 
   idFolder: null
43 45 
 }
44 46
45 
-class PopupCreateHtmlDocument extends React.Component {
47 
+class PopupCreateThread extends React.Component {
46 48 
   constructor (props) {
47 49 
     super(props)
48 50 
     this.state = {
49 
-      appName: 'thread',
51 
+      appName: 'thread', // must remain 'thread' because it is the name of the react built app (which contains Threac and PopupCreateThread)
50 52 
       config: props.data ? props.data.config : debug.config,
51 53 
       loggedUser: props.data ? props.data.loggedUser : debug.loggedUser,
52 54 
       idWorkspace: props.data ? props.data.idWorkspace : debug.idWorkspace,
 
@@ -55,7 +57,25 @@ class PopupCreateHtmlDocument extends React.Component {
55 57 
     }
56 58
57 59 
     // i18n has been init, add resources from frontend
58 
-    addAllResourceI18n(i18n, props.data ? props.data.config.translation : debug.config.translation)
60 
+    addAllResourceI18n(i18n, this.state.config.translation)
61 
+    i18n.changeLanguage(this.state.loggedUser.lang)
62 
+
63 
+    document.addEventListener('appCustomEvent', this.customEventReducer)
64 
+  }
65 
+
66 
+  customEventReducer = ({ detail: { type, data } }) => { // action: { type: '', data: {} }
67 
+    switch (type) {
68 
+      case 'allApp_changeLang':
69 
+        console.log('%c<PopupCreateThread> Custom event', 'color: #28a745', type, data)
70 
+        this.setState(prev => ({
71 
+          loggedUser: {
72 
+            ...prev.loggedUser,
73 
+            lang: data
74 
+          }
75 
+        }))
76 
+        i18n.changeLanguage(data)
77 
+        break
78 
+    }
59 79 
   }
60 80
61 81 
   handleChangeNewContentName = e => this.setState({newContentName: e.target.value})
 
@@ -101,10 +121,10 @@ class PopupCreateHtmlDocument extends React.Component {
101 121 
         faIcon={this.state.config.faIcon}
102 122 
         contentName={this.state.newContentName}
103 123 
         onChangeContentName={this.handleChangeNewContentName}
104 
-        btnValidateLabel='Valider et créer'
124 
+        btnValidateLabel={this.props.t('Validate and create')}
105 125 
       />
106 126 
     )
107 127 
   }
108 128 
 }
109 129
110 
-export default PopupCreateHtmlDocument
130 
+export default translate()(PopupCreateThread)

+ 13 - 1
frontend_app_thread/src/container/Thread.jsx 查看文件 

@@ -35,7 +35,8 @@ class Thread extends React.Component {
35 35 
     }
36 36
37 37 
     // i18n has been init, add resources from frontend
38 
-    addAllResourceI18n(i18n, props.data ? props.data.config.translation : debug.config.translation)
38 
+    addAllResourceI18n(i18n, this.state.config.translation)
39 
+    i18n.changeLanguage(this.state.loggedUser.lang)
39 40
40 41 
     document.addEventListener('appCustomEvent', this.customEventReducer)
41 42 
   }
 
@@ -53,6 +54,17 @@ class Thread extends React.Component {
53 54 
       case 'thread_reloadContent':
54 55 
         console.log('%c<Thread> Custom event', 'color: #28a745', type, data)
55 56 
         this.setState(prev => ({content: {...prev.content, ...data}, isVisible: true}))
57 
+        break
58 
+      case 'allApp_changeLang':
59 
+        console.log('%c<Thread> Custom event', 'color: #28a745', type, data)
60 
+        this.setState(prev => ({
61 
+          loggedUser: {
62 
+            ...prev.loggedUser,
63 
+            lang: data
64 
+          }
65 
+        }))
66 
+        i18n.changeLanguage(data)
67 
+        break
56 68 
     }
57 69 
   }
58 70

+ 2 - 2
frontend_app_thread/src/helper.js 查看文件 

@@ -5,7 +5,7 @@ export const FETCH_CONFIG = {
5 5 
   }
6 6 
 }
7 7
8 
-export const debug = { // copied from html-documents => outdated
8 
+export const debug = { // copied from html-document => outdated
9 9 
   config: {
10 10 
     label: 'Thread',
11 11 
     slug: 'thread',
 
@@ -78,7 +78,7 @@ export const debug = { // copied from html-documents => outdated
78 78 
     show_in_ui: true,
79 79 
     slug: 'current-menu',
80 80 
     status: 'open',
81 
-    sub_content_types: ['thread', 'html-documents', 'file', 'folder'],
81 
+    sub_content_types: ['thread', 'html-document', 'file', 'folder'],
82 82 
     workspace_id: 1
83 83 
   },
84 84 
   timeline: [] // timelineDebugData

+ 1 - 1
frontend_app_thread/src/index.js 查看文件 

@@ -6,7 +6,7 @@ import PopupCreateThread from './container/PopupCreateThread.jsx'
6 6 
 require('./css/index.styl')
7 7
8 8 
 const appInterface = {
9 
-  name: 'Thread',
9 
+  name: 'thread',
10 10 
   isRendered: false,
11 11 
   renderAppFull: data => {
12 12 
     return ReactDOM.render(