Reorganize some stuff and run prettier

.gitignore

@@ -14,6 +14,7 @@ build
 .DS_Store
 .env
 npm-debug.log
+.vscode
 
 local.js
 src/practice/main/mockedData.js

mainReactCourse.txt

@@ -13,7 +13,7 @@ React building block is the Component. It declares the DOM it should render. Dec
 you don't work on the DOM in an imperative way: you say what you want, React makes it work for you.
 
 
-Example: intro
+Example: intro, don't focus on the detail/syntax
 
 ----End intro----
 

presentations/presentation/index.js

@@ -132,13 +132,10 @@ export default class Presentation extends React.Component {
                     </BlockQuote>
                 </Slide>
 
-                <Slide transition={['fade']} bgColor="secondary" textColor="primary">
-                    <Heading size={6}>Practice</Heading>
-                    <List>
-                        <ListItem>Pair Programming: switch every 15 minutes</ListItem>
-                        <ListItem>The solutions are in the repo. Please don't check them.</ListItem>
-                        <ListItem>Call one of us to validate each step.</ListItem>
-                    </List>
+                <Slide transition={['fade']} bgColor="primary" textColor="secondary">
+                    <Heading size={1} caps>
+                        Let's render something!
+                    </Heading>
                 </Slide>
 
                 <Slide transition={['zoom']} bgImage={images.kilix} id="futher-with-react">
@@ -201,6 +198,15 @@ export default class Presentation extends React.Component {
                     </Text>
                 </Slide>
 
+                <Slide transition={['fade']} bgColor="secondary" textColor="primary">
+                    <Heading size={6}>Practice</Heading>
+                    <List>
+                        <ListItem>Pair Programming: switch every 15 minutes</ListItem>
+                        <ListItem>The solutions are in the repo. Please don't check them.</ListItem>
+                        <ListItem>Call one of us to validate each step.</ListItem>
+                    </List>
+                </Slide>
+
                 <Slide transition={['zoom']} bgImage={images.kilix} id="redux">
                     <Heading size={1} fit caps lineHeight={1} textColor="primary">
                         Redux

src/examples/children.js → src/examples/firstCourse/children.js

@@ -3,18 +3,11 @@ import ReactDOM from 'react-dom';
 
 import './children.css';
 
-const Paper = ({children}) => (
-    <div className="paper">
-        {children}
-    </div>
-);
-
+const Paper = ({children}) => <div className="paper">{children}</div>;
 
 const App = () => (
     <div className="children">
-        <Paper>
-            It's a simple material paper
-        </Paper>
+        <Paper>It's a simple material paper</Paper>
         <Paper>
             It's a form
             <form className="pure-form">
@@ -24,7 +17,4 @@ const App = () => (
     </div>
 );
 
-ReactDOM.render(
-    <App />,
-    document.getElementById('root'),
-)
+ReactDOM.render(<App />, document.getElementById('root'));

src/examples/composition.js → src/examples/firstCourse/composition.js

@@ -4,10 +4,7 @@ import ReactDOM from 'react-dom';
 import './composition.css';
 
 const Button = ({type, label}) => (
-    <button
-        className="pure-button"
-        type={type}
-    >
+    <button className="pure-button" type={type}>
         {label}
     </button>
 );
@@ -32,7 +29,4 @@ const App = () => (
     </form>
 );
 
-ReactDOM.render(
-    <App />,
-    document.getElementById('root')
-)
+ReactDOM.render(<App />, document.getElementById('root'));

src/examples/jsx.js → src/examples/firstCourse/jsx.js

@@ -4,33 +4,22 @@ import ReactDOM from 'react-dom';
 import './jsx.css';
 
 const Badge = ({active}) => (
-    <div className={active === false ? 'inactive' : 'active'}>
-        It's a badge
-    </div>
+    <div className={active === false ? 'inactive' : 'active'}>It's a badge</div>
 );
 
 const List = ({items}) => (
     <div>
         {items.length > 0 && <div>List:</div>}
-        {items.length > 0
-            ? (
-                <ul>
-                    {items.map(
-                        (item, index) => <li key={index}>{item}</li>
-                    )}
-                </ul>
-            )
-            : 'It is empty!'
-        }
+        {items.length > 0 ? (
+            <ul>{items.map((item, index) => <li key={index}>{item}</li>)}</ul>
+        ) : (
+            'It is empty!'
+        )}
     </div>
 );
 
 const App = () => {
-    const list = [
-        1,
-        3,
-        5
-    ];
+    const list = [1, 3, 5];
     const evenList = list.filter(i => i % 2 === 0);
     return (
         <div>
@@ -43,7 +32,4 @@ const App = () => {
     );
 };
 
-ReactDOM.render(
-    <App />,
-    document.getElementById('root'),
-)
+ReactDOM.render(<App />, document.getElementById('root'));

src/examples/lifeCycle.js → src/examples/firstCourse/lifeCycle.js

@@ -4,14 +4,14 @@ import ReactDOM from 'react-dom';
 class ComponentWithLifecycle extends Component {
     state = {
         renderCount: 0,
-    }
+    };
     componentWillMount() {
-        console.log('componentWillMount')
+        console.log('componentWillMount');
         this.setState({renderCount: this.state.renderCount + 1});
     }
     componentDidMount() {
         // This is where you should do side-effects
-        console.log('componentDidMount')
+        console.log('componentDidMount');
         this.timer = setInterval(() => {
             this.setState(state => ({renderCount: state.renderCount + 1}));
         }, 3000);
@@ -25,12 +25,17 @@ class ComponentWithLifecycle extends Component {
         console.log(`previous: ${this.state.renderCount}, next: ${nextState.renderCount}`);
     }
     componentWillUnmount() {
-        console.log('componentWillUnmount')
+        console.log('componentWillUnmount');
         clearInterval(this.timer);
     }
     render() {
-        console.log('rendering ComponentWithLifecycle')
-        return <div>It has been updated {this.state.renderCount} times, parent count is {this.props.parentCount}</div>;
+        console.log('rendering ComponentWithLifecycle');
+        return (
+            <div>
+                It has been updated {this.state.renderCount} times, parent count is{' '}
+                {this.props.parentCount}
+            </div>
+        );
     }
 }
 class Parent extends Component {
@@ -42,25 +47,18 @@ class Parent extends Component {
         this.countTimer = setInterval(() => {
             this.setState(state => ({count: state.count + 1}));
         }, 5000);
-        this.openTimer = setInterval(() =>{
+        this.openTimer = setInterval(() => {
             this.setState(state => ({open: !state.open}));
         }, 10000);
     }
     render() {
-        return this.state.open
-            ? <ComponentWithLifecycle parentCount={this.state.count} />
-            : null
+        return this.state.open ? <ComponentWithLifecycle parentCount={this.state.count} /> : null;
     }
 }
 
 // const App = () => (
 //     <Parent />
 // );
-const App = () => (
-    <ComponentWithLifecycle parentCount={0} />
-);
+const App = () => <ComponentWithLifecycle parentCount={0} />;
 
-ReactDOM.render(
-    <App />,
-    document.getElementById('root'),
-)
+ReactDOM.render(<App />, document.getElementById('root'));

src/examples/propTypesDefaultProps.js → src/examples/firstCourse/propTypesDefaultProps.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import ReactDOM from 'react-dom';
 
 class ComponentWithPropTypes extends Component {
@@ -32,7 +32,4 @@ const App = () => (
     </div>
 );
 
-ReactDOM.render(
-    <App />,
-    document.getElementById('root'),
-)
+ReactDOM.render(<App />, document.getElementById('root'));

src/examples/state.js → src/examples/firstCourse/state.js

@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 class App extends React.Component {
-
     constructor(props) {
         super(props);
 
@@ -24,7 +23,4 @@ class App extends React.Component {
     }
 }
 
-ReactDOM.render(
-  <App />,
-  document.getElementById('root')
-);
+ReactDOM.render(<App />, document.getElementById('root'));

src/examples/style.js → src/examples/firstCourse/style.js

@@ -23,11 +23,8 @@ const App = () => (
         <ElementWithClasses text="A" />
         <ElementWithClasses text="B" selected />
         <ElementWithInlineStyle text="C" />
-        <ElementWithInlineStyle text="D" selected/>
+        <ElementWithInlineStyle text="D" selected />
     </div>
 );
 
-ReactDOM.render(
-    <App />,
-    document.getElementById('root')
-);
+ReactDOM.render(<App />, document.getElementById('root'));

src/examples/intro/intro.js

@@ -0,0 +1,22 @@
+import React, {createElement} from 'react';
+import ReactDOM from 'react-dom';
+
+import './intro.css';
+
+const App = () => {
+    const actors = ['George', 'Peter', 'Steven', 'Dave'];
+    return (
+        <div className="App">
+            <p className="App-intro">Des gens sympas</p>
+            <ul>{actors.map((actor, index) => <li key={index}>{actor}</li>)}</ul>
+        </div>
+    );
+};
+
+ReactDOM.render(<App />, document.getElementById('root'));
+
+// without JSX
+// pass actors as props to <App />
+// add button to addHugues, that modifies actors and rerenderPage
+// Use class for App and use setState instead of triggering a full rerender
+// Add a simple component ~ reusable template

src/examples/secondCourse/context.js

@@ -2,7 +2,7 @@
 // => HOC
 import PropTypes from 'prop-types';
 
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import ReactDOM from 'react-dom';
 
 class Fruit extends Component {
@@ -18,7 +18,9 @@ class Fruit extends Component {
 class List extends Component {
     render() {
         return (
-            <div>{['apple', 'orange', 'peach'].map(fruit => <Fruit key={fruit} name={fruit}/>)}</div>
+            <div>
+                {['apple', 'orange', 'peach'].map(fruit => <Fruit key={fruit} name={fruit} />)}
+            </div>
         );
     }
 }
@@ -28,7 +30,4 @@ class Parent extends Component {
     }
 }
 
-ReactDOM.render(
-    <Parent />,
-    document.getElementById('root'),
-)
+ReactDOM.render(<Parent />, document.getElementById('root'));

src/index.js

@@ -1,21 +1,21 @@
 import './index.css';
 import 'purecss/build/pure.css';
 
-import './intro';
+import './examples/intro/intro';
 
 // JSX
-// import './examples/jsx';
-// import './examples/composition';
-// import './examples/style';
+// import './examples/firstCourse/jsx';
+// import './examples/firstCourse/composition';
+// import './examples/firstCourse/style';
 
 // import './practice/intro/app';
 // import './corrections/intro/app';
 
 // Components
-// import './examples/state';
-// import './examples/propTypesDefaultProps';
-// import './examples/lifeCycle';
-// import './examples/children';
+// import './examples/firstCourse/state';
+// import './examples/firstCourse/propTypesDefaultProps';
+// import './examples/firstCourse/lifeCycle';
+// import './examples/firstCourse/children';
 
 // import './practice/day1/app';
 // import './corrections/day1Correction/app';