react jsx babel composant props component state lifecycle ref
orient´
e vues, approche d´
eclarative
orient´
e composants
efficacit´
e bas´
ee sur un DOM virtuel
installation
npm install react react-dom
+ dans navigateur React DevTools
Universit´
e Lille – Sciences et Technologies - Licence mention Informatique javascript et son ´
ecosyst`
eme 2
react jsx babel composant props component state lifecycle ref
premier contact
react v0.1
// dans /src/main.js
import React from ’react’;
import ReactDOM from ’react-dom’;
const bootstrapReact =
() => ReactDOM.render(
React.createElement(’h3’,null,’React in action !’),
document.getElementById(’insertReactHere’)
);
window.addEventListener( ’DOMContentLoaded’, bootstrapReact );
react v0.2
Universit´
e Lille – Sciences et Technologies - Licence mention Informatique javascript et son ´
ecosyst`
eme 3
react jsx babel composant props component state lifecycle ref
webpack
mise en place
// dans webpack.config.js
module.exports = {
entry: ’./src/main.js’,
output: {
path: path.resolve(__dirname, ’public’),
filename: ’javascripts/bundle.js’
},...
// dans /public/index.html
...
<head>
<script src="javascripts/bundle.js"></script>
...
<body>
...
<div id="insertReactHere"></div>
Universit´
e Lille – Sciences et Technologies - Licence mention Informatique javascript et son ´
ecosyst`
eme 4
react jsx babel composant props component state lifecycle ref
jsx
une extension syntaxique `
a JavaScript react v0.3
// dans /src/main.js
ReactDOM.render(
<article>
<h3>React in action, using jsx</h3>
<div>this div is in an article</div>
<div>this div is in the same article</div>
</article>,
document.getElementById(’insertReactHere’)
);
une expression JSX n’est ni du javascript ni une cha
ˆ
ıne de caract`
eres
=⇒n´
ecessite un transpilage
une expression plac´
ee entre accolades { } est du code javascript
interpr´
et´
e
attribut : class className
Universit´
e Lille – Sciences et Technologies - Licence mention Informatique javascript et son ´
ecosyst`
eme 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
1
/
41
100%
