Merge pull request #33 from arolla/session-introduction-react

Session introduction react

react-book/src/app/app.tsx

@@ -1,12 +1,20 @@
+import React from 'react';
+import Footer from '../components/footer/Footer';
+import Header from '../components/header/Header';
+import List from '../components/list/List';
+import Container from '../components/container/Container';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import styles from './app.module.scss';
 
-import NxWelcome from './nx-welcome';
-
 export function App() {
+  const elements = ['titi', 'tata'];
   return (
     <div>
-      <NxWelcome title="react-book" />
+      <Header title='hello' person='Jérémy' />
+      <Container>
+        <List elements={elements} />
+      </Container>
+      <Footer title='login'/>
     </div>
   );
 }

react-book/src/components/container/Container.tsx

@@ -0,0 +1,13 @@
+import React, {ReactNode} from 'react'
+
+interface Props {
+    children: ReactNode
+}
+
+const Container = ({children}: Props): JSX.Element => {
+    return (<div>
+        {children}
+    </div>)
+}
+
+export default Container

react-book/src/components/header/Header.tsx

@@ -1,13 +1,24 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 interface Props {
     title: string
+    url?: string
+    person: string
 }
 
 const Header = (props: Props): JSX.Element => {
-    return (<h1>
-        {props.title}
-    </h1>)
+    const { title, person } = props
+
+    const [newTitle, setNewTitle] = useState<string>(title)
+
+    return (
+        <>
+        <h1 onClick={() => {setNewTitle('bye bye')}}>
+            {`${newTitle} ${person}` }
+        </h1>
+        <input type='text' value={newTitle} />
+    </>
+    )
 }
 
 export default Header

react-book/src/components/list/List.tsx

@@ -0,0 +1,26 @@
+import React, {memo, useMemo, useCallback, useEffect} from 'react'
+
+interface ListProps {
+    elements: string[]
+}
+
+const ListElement = ({ elements }: ListProps): JSX.Element => {
+    const calculus = useMemo(() => 1 + 2, [])
+    const handleClick = useCallback((event: any) => {
+        console.log(event.currentTarget.textContent)
+    }, [])
+    return (
+        <ul>
+            { elements.map((element, index) => { 
+                    return (
+                        <li key={`${element}-${index}`} onClick={handleClick}>
+                            {element}
+                        </li>
+                    )})
+            }
+            </ul>
+        )
+}
+
+export default memo(ListElement);
+