-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathinterro07.html
112 lines (110 loc) · 4.68 KB
/
interro07.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="generator" content="pandoc" />
<title></title>
<style type="text/css">code{white-space: pre;}</style>
</head>
<body>
<p><strong>Nom</strong> : __________________________________</p>
<h4 id="question-1-1-point">Question 1 (1 point)</h4>
<p>Comment peut-on ajouter l'entier <code>1</code> à la clef <code>time</code> du <code>state</code> de la classe React Timer dans une méthode de la classe ?</p>
<h4 id="question-2-1-point">Question 2 (1 point)</h4>
<p>Comment nomme-t-on le type de données <code><Timer time={1}/></code> ?</p>
<p>Expliquer ce que ce code effectue si on l'écrit dans un ReactDOM.render</p>
<h4 id="question-3-2-points">Question 3 (2 points)</h4>
<p>Expliquer le fonctionnement du code suivant :</p>
<pre><code><body>
<div id="example"></div>
<script type="text/babel">
var person = {name: "John"};
person.name = "Mary";
person.age = 12;
ReactDOM.render(
<h1>[person.name] = {person.name}! , person.age + 1 </h1>,
document.getElementById('example')
);
</script>
</body></code></pre>
<p>Quel sera le rendu final de ce code ?</p>
<h4 id="question-4-2-points">Question 4 (2 points)</h4>
<p>Lister toutes les façons de créer ou mettre à jour le <code>state</code> et expliquer quand on les utilise.</p>
<p>Lister toutes les façons de créer ou mettre à jour les <code>props</code> et expliquer quand on les utilise.</p>
<p>On pourra utiliser <code>ReactDOM</code>.</p>
<p style="page-break-before: always">
</p>
<h4 id="question-5-4-points">Question 5 (4 points)</h4>
<p>Expliquer comment fonctionne ce composant React :</p>
<pre><code><body>
<script type="text/babel">
var RepoList = React.createClass({
getInitialState: function() {
return {
loading: true,
error: null,
data: null
};
},
componentDidMount: function() {
this.props.promise.then(
value => this.setState({loading: false, data: value}),
error => this.setState({loading: false, error: error})
);
},
render: function() {
if (this.state.loading) {
return <span>Loading...</span>;
}
else if (this.state.error !== null) {
return <span>Error: {this.state.error.message}</span>;
}
else {
var repos = this.state.data.items;
var repoList = repos.map(function (repo) {
return (
<li>
<a href={repo.html_url}>{repo.name}</a>
({repo.stargazers_count} stars)<br/>
{repo.description}
</li>
);
});
return (
<main>
<h1>Most Popular JavaScript Projects in Github</h1>
<ol>{repoList}</ol>
</main>
);
}
}
});
url = "https://api.github.com/search/repositories?q=javascript&sort=stars"
ReactDOM.render(
<RepoList
promise={$.getJSON(url)} />,
document.body
);
</script>
</body></code></pre>
<p>Expliquer en particulier comment fonctionne ceci :</p>
<pre><code>var repoList = repos.map(function (repo) {
return (
<li>
<a href={repo.html_url}>{repo.name}</a>
({repo.stargazers_count} stars)<br/>
{repo.description}
</li>
);
});</code></pre>
<p>Qu'est-ce que la notation "<code>=></code>" ? Quel est le nom du standard qui a ajouté cette notation ?</p>
<p>Écrire le code ci-dessous sans utiliser cette notation :</p>
<pre><code>this.props.promise.then(
value => this.setState({loading: false, data: value}),
error => this.setState({loading: false, error: error})
);</code></pre>
<p style="page-break-before: always">
</p>
</body>
</html>