...mais il fait un peu de JS
Apporter la philosophie back-end dans le front-end
Le front-end est un écosystème très complexe, contrairement au back-end
Problèmes de performance dans le DOM
React n'a pas de…
… contrôleurs
… directives
… templates
… listeners d'events global
… modèles
import styles from './Component.scss'
class Component extends React.Component {
state = {
counter: 0
}
onClick = (e) => this.setState({ count: this.state.count + 1 })
render() {
return (
<div className={styles.Component}"> // Component_xU7az
Je suis un composant React
<h1>{this.state.count}</h1>
<button onClick={this.onClick}>Count Up!!</button>
</div>
)
}
}
.compteur {
background: 'blue';
border: '1px solid black'
}
const styles = StyleSheet.create({
Component: {
border: '1px solid blue',
background: 'blue'
}
})
class Component extends React.Component {
state = {
counter: 0
}
onClick = (e) => this.setState({ count: this.state.count + 1 })
render() {
return (
<View style={styles.Component}">
Je suis un composant React
<h1>{this.state.count}</h1>
<button onClick={this.onClick}>Count Up!!</button>
</View>
)
}
}
/api/home
/api/campaign/last
/api/menu
/api/user/1
/api/bandeau
class Todo extends React.Component<Props> {
render() {
const {complete, text} = this.props.todo;
return (
<li>
<div>
<input
checked={complete}
type="checkbox"
/>
<label>
{text}
</label>
</div>
</li>
);
}
}
export default createFragmentContainer(
Todo,
graphql`
fragment Todo_todo on Todo {
complete
text
}
`
)