Développement Front end Web et Mobile :

Web Browser
- React JS
- React Native Browser DOM

Séance 4
JSX Files
JSX Files
JSX Files
JSX Files
JSX Files Updates
Java Script Files Events
Synchrinization

React Virtual DOM

React Library
JSX
Transformer runtime

Mostafa JEBBAR
Laboratoire C3S
EST, Université Hassan II de Casablanca, Maroc
Email : [email protected]
Supports de cours : http://fr.slideshare.net/mostafajebbar
Chaîne vidéo : http://youtube.com/mostafajebbar
Recherche : http://www.researchgate.net/profile/Jebbar_Mostafa/publications
 Les Cycles de Vie d’un Composant

Site

Méthodes
Déclenchées
import React, {Component} from "react"; import './About.css'; About.js
import SillsForm from "./SkillsForm";
export default class About extends Component{ React Component
constructor(props){
super(props);
this.state={
Component
contact:{
name:’M.JEBBAR', email:’[email protected]', picture:'./image/profile.jpg'
State : (props, setState)
}, Données
skills:[
{id:1,title:'Software Engineering'}, {id:2,title:'UI Design'},]
}; Rendering : About
}
render(){
(JSX, HTML, CSS) Component
return(
<div>
<label><b>{this.props.inputMessage}</b></label>
Behaviour :
<img src="images/profile.jpg" className="profile img-thumbnail" alt="Profile" /> (JSX)
<ul>
<li><b>Name : </b>{this.state.contact.name}</li>
<li><b>Email : </b> {this.state.contact.email}</li> onDelete=(s)=>{
</ul> let index=this.state.skills.indexOf(s);
<table className="table"> let skills=[...this.state.skills];
<thead> <tr> <th>ID</th><th>Title</th></tr></thead> skills.splice(index,1);
<tbody> this.setState({
{this.state.skills.map(s=> skills:skills
<tr key={s.id}> }) }
<td>{s.id}</td> <td>{s.title}</td> }
function App() {
<td><button onClick={()=>this.onDelete(s)}>X</button></td>
return (
</tr>
<div>
)}
<About inputMessage="Keep your smile"/>
</tbody>
</div>
</table>
);
</div>
} App.js
); }
Exemple de
Composants React

App
Component

About
Component

SkillsForm
Component
 > npm install –save bootstrap
App Component : App.js

import React from 'react';

import About from './components/about/About'
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
return (
<div className="container">
<About inputMessage="Keep your smile"/>
</div>
);
}

export default App;

About Component : About.js

import React, {Component} from "react";

import './About.css';
import SillsForm from "./SkillsForm";
export default class About extends Component{
constructor(props){
super(props);
this.state={
contact:{
name:’Mostafa JEBBAR',
email:’[email protected]',
picture:'./image/profile.jpg'
},
skills:[
{id:1,title:'Software Engineering'},
{id:2,title:'UI Design'},
{id:3,title:'Machines Learning'}
]
};
}
About Component : About.js About.css
.profile{
width: 100px;
render(){ }
console.log("Component rendering....");
return(
<div className="mt-3"> <label><b>{this.props.inputMessage}</b></label>
<div className="card">
<div className="row">
<div className="col-auto">
<img src="images/profile.jpg" className="profile img-thumbnail" alt="Profile" />
</div>
<div className="col">
<ul className="list-group">
<li className="list-group-item"><b>Name : </b>{this.state.contact.name}</li>
<li className="list-group-item"><b>Email : </b> {this.state.contact.email}</li>
</ul>
</div>
</div>
</div>
<div className="card mt-3">
<div className="card-header">Skills</div>
<div className="card-body">
<div className="my-3">
<SillsForm onAddNewSkill={this.onAddSkill}/>
</div>
About Component : About.js

<table className="table">
<thead>
<tr>
<th>ID</th><th>Title</th>
</tr>
</thead>
<tbody>
{this.state.skills.map(s=>
<tr key={s.id}>
<td>{s.id}</td>
<td>{s.title}</td>
<td><button onClick={()=>this.onDelete(s)} className="btn btn-danger text-white">X</button></td>
</tr>
)}
</tbody>
</table>
</div>
</div>
</div>
);
}
About Component : About.js

onAddSkill=(skillTitle)=>{
const skill={id:[...this.state.skills].pop().id+1,title:skillTitle}
this.setState({
skills:[...this.state.skills,skill]
})
}
onDelete=(s)=>{
let index=this.state.skills.indexOf(s); let skills=[...this.state.skills];
skills.splice(index,1);
this.setState({
skills:skills
})
}
componentDidMount(){ console.log("Component Dit Mount"); }
componentWillMount(){ console.log("Component Will Mount...") }
componentWillUpdate(){ console.log("Will Update");}
componentDidUpdate(){ console.log("Did Update") }
}
SkillsForm Component : SkillsForms.js

import React from "react";

export default class SillsForm extends React.Component{
constructor(props){
super(props);
this.state={
skillValue:''
}
}
render(){
return(
<div>
<form onSubmit={this.onAddSkill}>
<div className="row">
<div className="col">
<input value={this.state.skillValue} onChange={this.setSkillValue}
className="form-control" type="text" placeholder="Skill To Add"/>
</div>
<div className="col-auto">
<button className="btn btn-primary">Add</button>
</div>
</div>
</form>
</div>
);
}
SkillsForm Component : SkillsForms.js

setSkillValue=(event)=>{
this.setState({
skillValue:event.target.value
})
}

onAddSkill=(event)=> {
event.preventDefault();
this.props.onAddNewSkill(this.state.skillValue);
this.setState({
skillValue:''
})
}

}
Construire L’application : > npm run-script build

C:\react-native-apps\my-app>npm run-script build

> [email protected] build C:\react-native-apps\my-app
> react-scripts build

Creating an optimized production build...

Compiled successfully.
File sizes after gzip:
40.32 KB build\static\js\2.a81f5845.chunk.js
22.44 KB build\static\css\2.47e06e2e.chunk.css
1.37 KB build\static\js\main.fbadabcf.chunk.js
771 B build\static\js\runtime-main.107bb8ca.js
570 B build\static\css\main.fa73174d.chunk.css
The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:

"homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed.

You may serve it with a static server:

npm install -g serve

serve -s build

Find out more about deployment here:

bit.ly/CRA-deploy