Skip to content

Commit e76163e

Browse files
alefevre19AugustinLF
alefevre19
authored and
AugustinLF
committed
React 16.8 (#46)
* Remove class from second course * Remove classes from main practice
1 parent 3005130 commit e76163e

File tree

29 files changed

+478
-678
lines changed

29 files changed

+478
-678
lines changed

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515
"prop-types": "^15.5.10",
1616
"purecss": "^0.6.2",
1717
"ramda": "^0.23.0",
18-
"react": "^16.6.3",
19-
"react-dom": "^16.6.3",
18+
"react": "^16.8.6",
19+
"react-dom": "^16.8.6",
2020
"react-redux": "^5.0.6",
2121
"redux": "^3.7.2",
2222
"redux-logger": "^2.8.1",

‎src/corrections/furtherWithReact/context.js

Lines changed: 20 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,14 @@ import ReactDOM from 'react-dom';
88

99
const ThemeContext = React.createContext({});
1010

11-
const Title = ({children}) => (
12-
<ThemeContext.Consumer>
13-
{({color}) => <h2 style={{color}}>{children}</h2>}
14-
</ThemeContext.Consumer>
15-
);
16-
const Button = ({children}) => (
17-
<ThemeContext.Consumer>
18-
{({color, borderRadius}) => (
19-
<button style={{borderRadius, color, borderColor: color}}>{children}</button>
20-
)}
21-
</ThemeContext.Consumer>
22-
);
11+
const Title = ({children}) => {
12+
const {color} = React.useContext(ThemeContext);
13+
return <h2 style={{color}}>{children}</h2>;
14+
};
15+
const Button = ({children}) => {
16+
const {color, borderRadius} = React.useContext(ThemeContext);
17+
return <button style={{borderRadius, color, borderColor: color}}>{children}</button>;
18+
};
2319

2420
const Card = () => {
2521
const theme = {color: 'purple', borderRadius: 0};
@@ -39,19 +35,17 @@ const Card = () => {
3935
);
4036
};
4137

42-
class App extends React.Component {
43-
render() {
44-
const theme = {color: '#3683CE', borderRadius: '10px'};
45-
return (
46-
<div className="App">
47-
<ThemeContext.Provider value={theme}>
48-
<Title>Un titre de page</Title>
49-
<Button>Un bouton</Button>
50-
<Card />
51-
</ThemeContext.Provider>
52-
</div>
53-
);
54-
}
55-
}
38+
const App = () => {
39+
const theme = {color: '#3683CE', borderRadius: '10px'};
40+
return (
41+
<div className="App">
42+
<ThemeContext.Provider value={theme}>
43+
<Title>Un titre de page</Title>
44+
<Button>Un bouton</Button>
45+
<Card />
46+
</ThemeContext.Provider>
47+
</div>
48+
);
49+
};
5650

5751
ReactDOM.render(<App />, document.getElementById('root'));

‎src/corrections/furtherWithReact/forms.js

Lines changed: 15 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, {Component} from 'react';
1+
import * as React from 'react';
22
import ReactDOM from 'react-dom';
33

44
/* TODO
@@ -7,39 +7,25 @@ import ReactDOM from 'react-dom';
77
* - Ajouter une règle de validation : si le nombre saisi est > 10, afficher un message d'erreur
88
*/
99

10-
class App extends Component {
11-
constructor(props) {
12-
super(props);
13-
this.state = {
14-
value: '',
15-
};
16-
}
10+
const App = () => {
11+
const [value, setValue] = React.useState('');
1712

18-
onInputChange = event => {
13+
const onInputChange = event => {
1914
const newValue = event.target.value;
20-
this.setState(() => ({value: newValue}));
15+
setValue(newValue);
2116
};
2217

23-
submitForm = () => {
24-
const {value} = this.state;
25-
console.log('Le nombre saisi est : ', value);
18+
const submitForm = () => {
19+
console.log('Le nombre saisi est', value);
2620
};
2721

28-
render() {
29-
const {value} = this.state;
30-
return (
31-
<div className="App">
32-
<input
33-
type="number"
34-
onChange={this.onInputChange}
35-
placeholder="Nombre < 10"
36-
value={value}
37-
/>
38-
<button onClick={this.submitForm}>Submit</button>
39-
{value >= 10 && <div style={{color: 'red'}}>Le nombre saisi est trop grand</div>}
40-
</div>
41-
);
42-
}
43-
}
22+
return (
23+
<div className="App">
24+
<input type="number" onChange={onInputChange} placeholder="Nombre < 10" value={value} />
25+
<button onClick={submitForm}>Submit</button>
26+
{value >= 10 && <div style={{color: 'red'}}>Le nombre saisi est trop grand</div>}
27+
</div>
28+
);
29+
};
4430

4531
ReactDOM.render(<App />, document.getElementById('root'));

‎src/corrections/furtherWithReact/functionAsChild.js

Lines changed: 9 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,28 +5,21 @@ import ReactDOM from 'react-dom';
55
* - on désire avoir une gestion générique des formulaires :
66
* créer un render prop qui gère le changement de state et le test des données au submit
77
*/
8-
class FormWrapper extends React.Component {
9-
constructor(props) {
10-
super(props);
11-
this.state = props.initialData;
12-
}
8+
const FormWrapper = ({children, initialData, submitForm, validateForm}) => {
9+
const [data, setData] = React.useState(initialData);
1310

14-
onChange = event => {
11+
const onChange = event => {
1512
const target = event.target;
16-
this.setState(prevState => ({...prevState, [target.name]: target.value}));
13+
setData(prevData => ({...prevData, [target.name]: target.value}));
1714
};
1815

19-
onSubmit = () => {
20-
const {validateForm, submitForm} = this.props;
21-
if (validateForm(this.state)) return;
22-
submitForm(this.state);
16+
const onSubmit = () => {
17+
if (validateForm(data)) return;
18+
submitForm(data);
2319
};
2420

25-
render() {
26-
const {children} = this.props;
27-
return children({data: this.state, onChange: this.onChange, onSubmit: this.onSubmit});
28-
}
29-
}
21+
return children({data, onChange, onSubmit});
22+
};
3023

3124
const validateForm = ({age, firstname}) => (firstname && age > 0 ? false : true);
3225
const initialData = {age: '', firstname: ''};

‎src/corrections/furtherWithReact/hoc.js

Lines changed: 12 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -6,37 +6,22 @@ import ReactDOM from 'react-dom';
66
* créer un HOC qui gère le changement de state et le test des données au submit
77
*/
88

9-
const wrapForm = BaseComponent =>
10-
class FormWrapper extends React.Component {
11-
constructor(props) {
12-
super(props);
13-
this.state = props.initialData;
14-
}
9+
const wrapForm = BaseComponent => ({initialData, submitForm, validateForm, ...otherProps}) => {
10+
const [data, setData] = React.useState(initialData);
1511

16-
onChange = event => {
17-
const target = event.target;
18-
this.setState(prevState => ({...prevState, [target.name]: target.value}));
19-
};
20-
21-
onSubmit = () => {
22-
const {validateForm, submitForm} = this.props;
23-
if (validateForm(this.state)) return;
24-
submitForm(this.state);
25-
};
12+
const onChange = event => {
13+
const target = event.target;
14+
setData(prevData => ({...prevData, [target.name]: target.value}));
15+
};
2616

27-
render() {
28-
const {initialData, validateForm, ...otherProps} = this.props;
29-
return (
30-
<BaseComponent
31-
onChange={this.onChange}
32-
data={this.state}
33-
onSubmit={this.onSubmit}
34-
{...otherProps}
35-
/>
36-
);
37-
}
17+
const onSubmit = () => {
18+
if (validateForm(data)) return;
19+
submitForm(data);
3820
};
3921

22+
return <BaseComponent onChange={onChange} data={data} onSubmit={onSubmit} {...otherProps} />;
23+
};
24+
4025
const validateForm = ({age, firstname}) => (firstname && age > 0 ? false : true);
4126
const initialData = {age: '', firstname: ''};
4227
const submitForm = data => console.log('Submit !', data);

‎src/corrections/furtherWithReact/refs.js

Lines changed: 22 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -6,32 +6,29 @@ import ReactDOM from 'react-dom';
66
* - Submit le formulaire au clic sur le "span"
77
*/
88

9-
class App extends React.Component {
10-
constructor(props) {
11-
super(props);
12-
this.textInput = React.createRef();
13-
this.form = React.createRef();
14-
}
9+
const App = () => {
10+
const textInput = React.useRef(null);
11+
const form = React.useRef(null);
1512

16-
componentDidMount() {
17-
this.textInput.current.focus();
18-
}
13+
const focusInput = () => {
14+
textInput.current.focus();
15+
};
1916

20-
render() {
21-
return (
22-
<div className="App">
23-
<form ref={this.form}>
24-
<input type="number" placeholder="Nombre" ref={this.textInput} />
25-
<span
26-
style={{cursor: 'pointer', paddingLeft: '10px'}}
27-
onClick={() => this.form.current.submit()}
28-
>
29-
Submit
30-
</span>
31-
</form>
32-
</div>
33-
);
34-
}
35-
}
17+
React.useEffect(focusInput, []);
18+
19+
return (
20+
<div className="App">
21+
<form ref={form}>
22+
<input type="number" placeholder="Nombre" ref={textInput} />
23+
<span
24+
style={{cursor: 'pointer', paddingLeft: '10px'}}
25+
onClick={() => form.current.submit()}
26+
>
27+
Submit
28+
</span>
29+
</form>
30+
</div>
31+
);
32+
};
3633

3734
ReactDOM.render(<App />, document.getElementById('root'));

‎src/corrections/mainPracticeCorrection/app.js

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,20 @@
11
import '../../practice/main/style.css';
22

3-
import React, {Component} from 'react';
3+
import * as React from 'react';
44
import ReactDOM from 'react-dom';
55

66
import ArtistsList from './artistsList';
77
import ArtistCard from './artistCard';
88

9-
class App extends Component {
10-
state = {openedCard: null};
9+
const App = () => {
10+
const [openedCard, openCard] = React.useState(null);
1111

12-
openArtistCard = artistName => {
13-
this.setState(() => ({openedCard: artistName}));
14-
};
15-
16-
render() {
17-
const {openedCard} = this.state;
18-
return (
19-
<div className="app">
20-
{openedCard && <ArtistCard artistName={openedCard} />}
21-
<ArtistsList openArtistCard={this.openArtistCard} />
22-
</div>
23-
);
24-
}
25-
}
12+
return (
13+
<div className="app">
14+
{openedCard && <ArtistCard artistName={openedCard} />}
15+
<ArtistsList openArtistCard={openCard} />
16+
</div>
17+
);
18+
};
2619

2720
ReactDOM.render(<App />, document.getElementById('root'));

‎src/corrections/mainPracticeCorrection/artistCard.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React from 'react';
33

44
import {getArtistInfoPromise} from '../../practice/main/libs/actionsHelpers';
55
import Card from './components/card';
6-
import {ThemeProvider} from './components/theme';
6+
import ThemeContext from './components/theme';
77
import DataFetcher from './components/dataFetcher';
88
import {formatNumberToString, getSimilarArtistsNames} from './helpers';
99
import Tag from './tag';
@@ -21,7 +21,7 @@ const ArtistCard = ({artistName}) => (
2121
const similarArtists = artist.similar && getSimilarArtistsNames(artist.similar);
2222

2323
return (
24-
<ThemeProvider value="pink">
24+
<ThemeContext.Provider value="pink">
2525
<Card header={artistName}>
2626
<div className="artist-card">
2727
<div className="artist-card__main">
@@ -52,7 +52,7 @@ const ArtistCard = ({artistName}) => (
5252
<div>Similar Artists: {similarArtists}</div>
5353
</div>
5454
</Card>
55-
</ThemeProvider>
55+
</ThemeContext.Provider>
5656
);
5757
}}
5858
</DataFetcher>

0 commit comments

Comments
 (0)