I-Installation

npx create-react-app nom_projet

*pour demare le projet
npm start ou yarn start

1-Composant
C'est une ptite partie de l aplication il existe 2 typye component
Pour cree un composant
import React,{Component} from 'react'
class App extends Component {
render(){
return (
<div className='App'>
<h1>React App </h1>
</div>
)
}
}
export default App

1-a Composant sous forme de fonction

*Component stateless
il n'a po de state
import React from 'react'

const Membre = () => {

return (
<h2> Membre </h2>
)
}

export default Membre

-Afficher une variable a l'interieur d'un composant stateless
On utilise interpolation {nom_variable}
import React from 'react'

const Membre = () => {

const name = 'jahno'
return (
<h2> Membre : {name} </h2>
)
}
-Passer une varaible a composant (Les Props)
<Membre nom='jahno'/>
const Membre = (props) => {
const name = props.nom
return (
<h2> Membre : {name} </h2>
)
}
ou
const Membre = ({nom}) => {
return (
<h2> Membre : {nom} </h2>
)
}
*StateLessFull
-Passer une variable a un composant full (Les Props)
<App titre='hacking'/>

import React,{Component} from 'react'

class App extends Component {
render(){
return (
<div className='App'>
<h1>React App {this.props.titre} </h1>
</div>
)
}
}
export default App
ou
import React,{Component} from 'react'
class App extends Component {
render(){
const { titre,auteur } = this.props
return (
<div className='App'>
<h1>React App {this.props.titre} </h1>
</div>
)
}
}
export default App

1-b Le JSX
exemple:
<div className='App'>
<h1>React App</h1>
</div>
en JSX
React.createElement('div',{className: 'App'},React.createElement('h1',null,'React
App'))

1-c Fragment
Permet juste d'encadre mon rendu en lieu et place d'utiliser plusieurs <div>
inutilement
import React,{Component, Fragment } from 'react'
class App extends Component {
render(){
return (
<Fragment>
<div className='App'>
<h1>React App </h1>
</div>
<h2>Mon Second titre </h2>
</Fragment>
)
}
}
2-Props children

<Membre nom='jahno'>
Le texte
</Membre>
import React,{Fragment} from 'react'
const Membre = ({nom, children}) => {
return (
<Fragment>
<h2> Membre : {nom} </h2>
<p> {children} </p> ou { children ? <p>{children}</p> : <Fragment/> }
//pour ne pas avoir pleins de balise <p> vide
</Fragment>
)
}

2-Les states
state

3-Les evenements

<button onClick="{this.handleClick}">
Click me
</button>

handleClick = () =>{
console.log('click')
}

Modif state
const t = {... this.state.t}
t.nom+=1
this.setState({t})

-Passer une function aek paramtre

<button onClick="{()=> this.handleClick(2)}">
Click me
</button>

4-Les inputs
handleChange = event =>{
const data = {...this.state.data}
this.state.nom=event.target.value
this.setState({data})
}
<input value={this.state.data.nom} onChange={this.handleChange} type="text"/>

*afficher du text sans echaper

<div dangerouslySetInnerHTML={{ __html: '<h1>jahno</h1>'}}</div>
 5-Le cycle vie

-componentDidMount(){
console.log('je suis monte')
}

-componentDidUpdate(){
console.log('je susis entrain de me mettre a jour')
}

6-condition
{ isShow ? 'afficher' : 'cacher'}
ou
render(){
let isSh= null
if(isSh){
isShow = 'afficher
}else{
//bla blla
}
{isShow}

7-Boucle

8-React-router

npm i react-router-dom

dans index
import { BrowserRouter, Route, Switch } from 'react-router-dom'

cosnt Root = () => (

<BrowserRouter>
<Switch>
<Route exact path='/' component={Connexion} />
<Route path='article/:id' component={Article} />
</Switch>
</BrowserRouter>
)
ReactDom.render(<Root />, document.getElementById('root'))

*Switch
Permet definir les differentes routes
*Route
il peermet de specifier une route
pour definir un parametre optionnelle on utilise < : >
pour recupere this.props.match.params.pseudo
b-Redirect
pour rediriger
retun <Redirect to='chmin'/>
retun <Redirect push to='chmin'/> //pour garder en historique
9-Ref
Pour cibler un element du dom
import {createRef} from 'react'

testref = createRef()
//element a cible
<div ref={this.testref}>
blablaba
<div/>
modifElement(){
const ref= this.testref.current
ref.style.display = "none"
}

II-hooks
1-hooks d'etat
const [X,Y] = useState(a) //useState est une fonction qui prend un element en
parametre et retourne un tableau
X est notre state, et a comme valeur par defaut a;
Y est la fonction qui nous permettra de mettre notre state a jour;

ex:
const [count,setCount] = useState(a)

const add = () =>{

const Newcount = count +1
setCount(count)
}

-Dans le cas ou useState prend un objet

ex: const [state,setState] = useState({
count:0
})

const add = () =>{

const Newcount = count +1
setState(prevState => {
return {
...prevState,count:Newcount
}
})
}

2-hooks d'effet
useEffect(A,B)
c'est une fonction asynchrone qui prends deux élements en paramètre (A et B)
A est la fonction a executer;
B tableau d'elemennt dont doit dependre useEffect;

ex: useEffect(()=>{
console.log('test')
},[state]) //içi on passe le state pour dire a chaque fois que le state sera
modifie affiche un console log

III-Style Components
yarn add styled-components