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 : mostafajebbar@gmail.com
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:’mostafajebbar@gmail.com', 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:’mostafajebbar@gmail.com',
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
> my-app@0.1.0 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
