React 16.8 (#46)

* Remove class from second course

* Remove classes from main practice

Author: alefevre19

package.json

@@ -15,8 +15,8 @@
     "prop-types": "^15.5.10",
     "purecss": "^0.6.2",
     "ramda": "^0.23.0",
-    "react": "^16.6.3",
-    "react-dom": "^16.6.3",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
     "react-redux": "^5.0.6",
     "redux": "^3.7.2",
     "redux-logger": "^2.8.1",

src/corrections/furtherWithReact/context.js

@@ -8,18 +8,14 @@ import ReactDOM from 'react-dom';
 
 const ThemeContext = React.createContext({});
 
-const Title = ({children}) => (
-    <ThemeContext.Consumer>
-        {({color}) => <h2 style={{color}}>{children}</h2>}
-    </ThemeContext.Consumer>
-);
-const Button = ({children}) => (
-    <ThemeContext.Consumer>
-        {({color, borderRadius}) => (
-            <button style={{borderRadius, color, borderColor: color}}>{children}</button>
-        )}
-    </ThemeContext.Consumer>
-);
+const Title = ({children}) => {
+    const {color} = React.useContext(ThemeContext);
+    return <h2 style={{color}}>{children}</h2>;
+};
+const Button = ({children}) => {
+    const {color, borderRadius} = React.useContext(ThemeContext);
+    return <button style={{borderRadius, color, borderColor: color}}>{children}</button>;
+};
 
 const Card = () => {
     const theme = {color: 'purple', borderRadius: 0};
@@ -39,19 +35,17 @@ const Card = () => {
     );
 };
 
-class App extends React.Component {
-    render() {
-        const theme = {color: '#3683CE', borderRadius: '10px'};
-        return (
-            <div className="App">
-                <ThemeContext.Provider value={theme}>
-                    <Title>Un titre de page</Title>
-                    <Button>Un bouton</Button>
-                    <Card />
-                </ThemeContext.Provider>
-            </div>
-        );
-    }
-}
+const App = () => {
+    const theme = {color: '#3683CE', borderRadius: '10px'};
+    return (
+        <div className="App">
+            <ThemeContext.Provider value={theme}>
+                <Title>Un titre de page</Title>
+                <Button>Un bouton</Button>
+                <Card />
+            </ThemeContext.Provider>
+        </div>
+    );
+};
 
 ReactDOM.render(<App />, document.getElementById('root'));

src/corrections/furtherWithReact/forms.js

@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import * as React from 'react';
 import ReactDOM from 'react-dom';
 
 /* TODO
@@ -7,39 +7,25 @@ import ReactDOM from 'react-dom';
  * - Ajouter une règle de validation : si le nombre saisi est > 10, afficher un message d'erreur
  */
 
-class App extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            value: '',
-        };
-    }
+const App = () => {
+    const [value, setValue] = React.useState('');
 
-    onInputChange = event => {
+    const onInputChange = event => {
         const newValue = event.target.value;
-        this.setState(() => ({value: newValue}));
+        setValue(newValue);
     };
 
-    submitForm = () => {
-        const {value} = this.state;
-        console.log('Le nombre saisi est : ', value);
+    const submitForm = () => {
+        console.log('Le nombre saisi est', value);
     };
 
-    render() {
-        const {value} = this.state;
-        return (
-            <div className="App">
-                <input
-                    type="number"
-                    onChange={this.onInputChange}
-                    placeholder="Nombre < 10"
-                    value={value}
-                />
-                <button onClick={this.submitForm}>Submit</button>
-                {value >= 10 && <div style={{color: 'red'}}>Le nombre saisi est trop grand</div>}
-            </div>
-        );
-    }
-}
+    return (
+        <div className="App">
+            <input type="number" onChange={onInputChange} placeholder="Nombre < 10" value={value} />
+            <button onClick={submitForm}>Submit</button>
+            {value >= 10 && <div style={{color: 'red'}}>Le nombre saisi est trop grand</div>}
+        </div>
+    );
+};
 
 ReactDOM.render(<App />, document.getElementById('root'));

src/corrections/furtherWithReact/functionAsChild.js

@@ -5,28 +5,21 @@ import ReactDOM from 'react-dom';
  * - on désire avoir une gestion générique des formulaires :
  *      créer un render prop qui gère le changement de state et le test des données au submit
  */
-class FormWrapper extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = props.initialData;
-    }
+const FormWrapper = ({children, initialData, submitForm, validateForm}) => {
+    const [data, setData] = React.useState(initialData);
 
-    onChange = event => {
+    const onChange = event => {
         const target = event.target;
-        this.setState(prevState => ({...prevState, [target.name]: target.value}));
+        setData(prevData => ({...prevData, [target.name]: target.value}));
     };
 
-    onSubmit = () => {
-        const {validateForm, submitForm} = this.props;
-        if (validateForm(this.state)) return;
-        submitForm(this.state);
+    const onSubmit = () => {
+        if (validateForm(data)) return;
+        submitForm(data);
     };
 
-    render() {
-        const {children} = this.props;
-        return children({data: this.state, onChange: this.onChange, onSubmit: this.onSubmit});
-    }
-}
+    return children({data, onChange, onSubmit});
+};
 
 const validateForm = ({age, firstname}) => (firstname && age > 0 ? false : true);
 const initialData = {age: '', firstname: ''};

src/corrections/furtherWithReact/hoc.js

@@ -6,37 +6,22 @@ import ReactDOM from 'react-dom';
  *      créer un HOC qui gère le changement de state et le test des données au submit
  */
 
-const wrapForm = BaseComponent =>
-    class FormWrapper extends React.Component {
-        constructor(props) {
-            super(props);
-            this.state = props.initialData;
-        }
+const wrapForm = BaseComponent => ({initialData, submitForm, validateForm, ...otherProps}) => {
+    const [data, setData] = React.useState(initialData);
 
-        onChange = event => {
-            const target = event.target;
-            this.setState(prevState => ({...prevState, [target.name]: target.value}));
-        };
-
-        onSubmit = () => {
-            const {validateForm, submitForm} = this.props;
-            if (validateForm(this.state)) return;
-            submitForm(this.state);
-        };
+    const onChange = event => {
+        const target = event.target;
+        setData(prevData => ({...prevData, [target.name]: target.value}));
+    };
 
-        render() {
-            const {initialData, validateForm, ...otherProps} = this.props;
-            return (
-                <BaseComponent
-                    onChange={this.onChange}
-                    data={this.state}
-                    onSubmit={this.onSubmit}
-                    {...otherProps}
-                />
-            );
-        }
+    const onSubmit = () => {
+        if (validateForm(data)) return;
+        submitForm(data);
     };
 
+    return <BaseComponent onChange={onChange} data={data} onSubmit={onSubmit} {...otherProps} />;
+};
+
 const validateForm = ({age, firstname}) => (firstname && age > 0 ? false : true);
 const initialData = {age: '', firstname: ''};
 const submitForm = data => console.log('Submit !', data);

src/corrections/furtherWithReact/refs.js

@@ -6,32 +6,29 @@ import ReactDOM from 'react-dom';
  * - Submit le formulaire au clic sur le "span"
  */
 
-class App extends React.Component {
-    constructor(props) {
-        super(props);
-        this.textInput = React.createRef();
-        this.form = React.createRef();
-    }
+const App = () => {
+    const textInput = React.useRef(null);
+    const form = React.useRef(null);
 
-    componentDidMount() {
-        this.textInput.current.focus();
-    }
+    const focusInput = () => {
+        textInput.current.focus();
+    };
 
-    render() {
-        return (
-            <div className="App">
-                <form ref={this.form}>
-                    <input type="number" placeholder="Nombre" ref={this.textInput} />
-                    <span
-                        style={{cursor: 'pointer', paddingLeft: '10px'}}
-                        onClick={() => this.form.current.submit()}
-                    >
-                        Submit
-                    </span>
-                </form>
-            </div>
-        );
-    }
-}
+    React.useEffect(focusInput, []);
+
+    return (
+        <div className="App">
+            <form ref={form}>
+                <input type="number" placeholder="Nombre" ref={textInput} />
+                <span
+                    style={{cursor: 'pointer', paddingLeft: '10px'}}
+                    onClick={() => form.current.submit()}
+                >
+                    Submit
+                </span>
+            </form>
+        </div>
+    );
+};
 
 ReactDOM.render(<App />, document.getElementById('root'));

src/corrections/mainPracticeCorrection/app.js

@@ -1,27 +1,20 @@
 import '../../practice/main/style.css';
 
-import React, {Component} from 'react';
+import * as React from 'react';
 import ReactDOM from 'react-dom';
 
 import ArtistsList from './artistsList';
 import ArtistCard from './artistCard';
 
-class App extends Component {
-    state = {openedCard: null};
+const App = () => {
+    const [openedCard, openCard] = React.useState(null);
 
-    openArtistCard = artistName => {
-        this.setState(() => ({openedCard: artistName}));
-    };
-
-    render() {
-        const {openedCard} = this.state;
-        return (
-            <div className="app">
-                {openedCard && <ArtistCard artistName={openedCard} />}
-                <ArtistsList openArtistCard={this.openArtistCard} />
-            </div>
-        );
-    }
-}
+    return (
+        <div className="app">
+            {openedCard && <ArtistCard artistName={openedCard} />}
+            <ArtistsList openArtistCard={openCard} />
+        </div>
+    );
+};
 
 ReactDOM.render(<App />, document.getElementById('root'));

src/corrections/mainPracticeCorrection/artistCard.js

@@ -3,7 +3,7 @@ import React from 'react';
 
 import {getArtistInfoPromise} from '../../practice/main/libs/actionsHelpers';
 import Card from './components/card';
-import {ThemeProvider} from './components/theme';
+import ThemeContext from './components/theme';
 import DataFetcher from './components/dataFetcher';
 import {formatNumberToString, getSimilarArtistsNames} from './helpers';
 import Tag from './tag';
@@ -21,7 +21,7 @@ const ArtistCard = ({artistName}) => (
             const similarArtists = artist.similar && getSimilarArtistsNames(artist.similar);
 
             return (
-                <ThemeProvider value="pink">
+                <ThemeContext.Provider value="pink">
                     <Card header={artistName}>
                         <div className="artist-card">
                             <div className="artist-card__main">
@@ -52,7 +52,7 @@ const ArtistCard = ({artistName}) => (
                             <div>Similar Artists: {similarArtists}</div>
                         </div>
                     </Card>
-                </ThemeProvider>
+                </ThemeContext.Provider>
             );
         }}
     </DataFetcher>