Bonjour à tous,

Le cours sur React Native a été publié, voici le lien : https://openclassrooms.com/fr/courses/4902061-developpez-une-application-mobile-react-native

J'espère qu'il vous plaira, bon apprentissage

-
Edité par sAr63 12 septembre 2018 à 19:34:16

Bonjour sAr63,

Tout d'abord, merci pour ce cours. Je l'ai commencé il y a quelques jours et même sans l'avoir fini je l'ai trouvé vraiment bien, tant au niveau de sa construction que de ses explications ! Bon boulo !!!
J'ai voulu aujourd'hui continué à suivre ton cours mais le lien ne fonctionne plus malheureusement.
Est il possible d'y avoir accès avec un autre lien, ou sur un autre site (ou une autre façon encore) ?
Je serai vraiment frustré de ne pas pouvoir continué ton cours car j'avais vraiment aimé découvrir React Native avec.
J'espère que tu pourras rediffuser ton cours en tout cas.
Encore une fois, bravo, et merci pour ton travail et pour la transmission de tes connaissances 

Pierre

Bonjour Pierre,

Merci pour ce retour très encourageant. Content de savoir que React Native te plaît ;), je termine en ce moment la rédaction de la 3ème partie.

Concernant le cours, il est toujours, pour ma part je n'ai pas de soucis à y accéder, as-tu toujours le problème ? Et non je n'ai pas d'autres liens à te donner malheureusement, le cours n'est disponible que sur OpenClassrooms.

Merci.

Re-bonjour sAr63,

C'est bon j'ai eu de nouveau l'accès dans l'après-midi, je ne sais pas trop pourquoi j'ai eu ce problème, le lien me redirigeait vers la page 404 d'OpenClassroom ...
Je viens tout juste de finir ton cours (du moins jusqu'au point où tu as écrit du contenu).
Je reste sur ma première impression, je le trouve bien structuré.
Je trouve vraiment bien le fait que tu expliques un concept et qu'ensuite tu proposes au lecteur d'implémenter seul une fonctionnalité utilisant ce concept. En tout cas pour ma part ça m'a obligé à me poser les bonnes questions et d'être "indépendant" un court instant sur du développement avec React Native. Ca donne confiance .

En tout cas je lirai attentivement la suite du cours !
Merci encore !

Petit up pour vous informer que je viens de terminer la partie 3 et que le cours est à 75% terminé. 

Dans cette partie j'aborde des notions pour développer des applications mobiles React Native avancées avec : 

• La navigation entre les vues
• Les cycles de vie des components
• La gestion d'un store avec Redux
• Le data binding

Comme d'habitude n'hésitez pas à me faire vos retours. Merci aux personnes qui m'en ont déjà fait, c'était très sympa et toujours constructif.

J'aurais également aimé avoir un retour des équipes d'OpenClassrooms, si ils passent par là. Le cours se rapproche petit à petit de la fin et je n'ai eu aucun contact, remarques, conseils, etc. 

Merci à tous. ++

-
Edité par sAr63 4 mars 2018 à 21:31:06

Bonjour, 

Dernier message avant la finalisation du cours. Il est terminé à

93%

il reste un chapitre sur la mise en ligne des applications et un quiz que je vais ajouter. Comme d'habitude, si vous avez des remarques, des commentaires, n'hésitez pas. 

Merci. (https://openclassrooms.com/courses/4902061?status=waiting-for-publication)

-
Edité par sAr63 27 mars 2018 à 22:34:17

Bonjour tout le monde, 

Je viens de terminer ce cours (finalisé à 100%). Il faut compter une trentaine d'heures pour le terminer. Vous y apprendrez comment développer une application mobile sur React Native de A à Z. 

J'ai passé beaucoup de temps à écrire ce cours et se fut une super expérience pour moi. J'ai beaucoup apprécié échanger avec certains d'entre vous. Merci à vous pour vos retours qui ont toujours été très constructifs.

Bien sûr je suis conscient que ce cours n'est pas parfait, qu'il y a des pistes à améliorer, n'hésitez pas à me faire des retours, des remarques, des suggestions sur des points pas assez ou trop explicites. Même si vous avez abandonné au bout du premier chapitre tellement c'était soporifique tout commentaire est bon à prendre. 

Merci à tous et bon courage pour vos futurs projets en lien, ou non, avec React Native.

Merci ce travail.

Pour information j'ai repris entièrement les chapitres liés à Redux. Après relecture, quelques mois après, ils étaient trop complexe et contenaient quelques erreurs. N'hésitez pas à me faire vos retours.

Merci ++

Bonjour

En me basant sur ton tuto j'essaye de le modifier pour faire une application qui référence tout les stages d’aïkido organisé par mon dojo, je rencontre des problèmes en voulant afficher les détail d'un stage, comme tu le fais avec le détail d'un film.

Je me retrouve dans le state avec un array qui contient l'objet passé au state, le problème est que pour y accéder je suis obligé de faire "state.array[0].id " et non pas "state.array.id" ce qui ne correspond pas du tout a ce que toi tu nous montre dans la partie " .

Pour le moment ça fait le travail mes cela produira peut être des problèmes pour la suite non ???

Je poste le fichier concerné :

// Components/StageDetail.js

import React from 'react'
import { StyleSheet, View, Text,ScrollView, ActivityIndicator } from 'react-native'
import { getStageFromApiwithId } from '../API/AikidoApi'

class StageDetail extends React.Component{

  constructor(props){
    super(props)
    this.state = {
      stage: undefined,
      isLoading: true
    }
  }

  componentDidMount(){
    console.log("Component FilmDetail monté")
    getStageFromApiwithId(this.props.navigation.state.params.idStage).then(data =>{
      this.setState({
        stage: data,
        isLoading: false
      })
    })
  }

  _displayLoading(){

    if(this.state.isLoading !== false) {
      return (
        <View style={styles.loading_container} >
          <ActivityIndicator size='large'/>
        </View>
      )
    }
  }

  _displayStage() {
    const {stage}=this.state
    console.log(this.state)
    if(stage != undefined){
      return(
        <ScrollView style={styles.scrollview_container}>
          <Text>{this.state.stage.id}</Text>
        </ScrollView>
      )
    }
  }

  render(){
    console.log("Component FilmDetail rendu")
    return(
      <View style={styles.main_container}>
        {this._displayLoading()}
        {this._displayStage()}

      </View>
    )
  }
}

const styles = StyleSheet.create({
  main_container: {
    flex: 1,
  },
  loading_container: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    alignItems: 'center',
    justifyContent: 'center'
  },
  scrollview_container: {
    flex: 1
  }
})

export default StageDetail

ainsi qu'un log du state

19:41:49: Component FilmDetail rendu
19:41:49: Object {
19:41:49:   "isLoading": true,
19:41:49:   "stage": undefined,
19:41:49: }
19:41:49: Component FilmDetail monté
19:41:49: Component FilmDetail rendu
19:41:49: Object {
19:41:49:   "isLoading": false,
19:41:49:   "stage": Array [
19:41:49:     Object {
19:41:49:       "dates": "Samedi 2 decembre",
19:41:49:       "horaires": "16h a 19h",
19:41:49:       "id": 5,
19:41:49:       "intervenants": "Alain Peyrache",
19:41:49:       "lieux": "Chateau d'olonne",
19:41:49:     },
19:41:49:   ],
19:41:49: }

pour le moment je continue comme ça .

Merci

Bonjour Bugalez,

Le problème ne vient pas de ton code React Native mais de l'API que tu utilises pour récupérer ton stage.

Avec l'API The Movie DB, lorsque tu appelles le détail d'un film, tu récupères un objet. Je te laisse regarder avec ta clé dans l'url : https://api.themoviedb.org/3/movie/11?api_key=API_TOKEN_ICI&language=fr

De ton côté ton API semble renvoyer un tableau. A mon avis si tu ouvres ton JSON depuis un url tu devrais avoir quelque chose comme : 

[
  {
    "dates": ...
    "horaires": ...
  }
]

Vu que tu as un tableau, tu dois spécifier quel objet du tableau tu veux récupérer : state.stage[0].id.

Il faudrait que le JSON de ton API ressemble à ça : 

{
  "dates": ...
  "horaires": ...
}

Pour que tu puisses faire state.stage.id

J'espère que c'est plus clair pour toi.

Bon courage.

Bonjour

Merci sAr63 pour la réponse .

Oui c'est plus clair, je vais essayer de trouver une solution a ce problème.

J'ai trouvé la requête que je faisais a l'API n'était pas la bonne tout simplement.

En tout cas super tuto!

-
Edité par bugalez 15 juin 2018 à 16:46:25

Bonjour

Je rencontre encore un problème persistant et bizarre, tout fonctionne parfaitement tant que je ne cherche pas a faire persister les données, mais a partir du moment ou j'installe la persistance et la réhydratation des données une erreur est levée.

Je suis toujours en CRNA si j'ai bien lu ça ne devrait pas poser de problème !

17:49:15: Error: Error: Error: TypeError: TypeError: undefined is not an object (evaluating '_this2.props.favoritesStage.findIndex')

This error is located at:
    in CellRenderer (at VirtualizedList.js:670)
    in RCTView (at View.js:60)
    in View (at ScrollView.js:791)
    in RCTScrollView (at ScrollView.js:887)
    in ScrollView (at VirtualizedList.js:1024)
    in VirtualizedList (at FlatList.js:644)
    in FlatList (at StageList.js:24)
    in StageList (created by Connect(StageList))
    in Connect(StageList) (at Search.js:110)
    in RCTView (at View.js:60)
    in View (at Search.js:102)
    in Search (at SceneView.js:10)
    in SceneView (at StackViewLayout.js:477)
    in RCTView (at View.js:60)
    in View (at StackViewLayout.js:476)
    in RCTView (at View.js:60)
    in View (at StackViewLayout.js:475)
    in RCTView (at View.js:60)
    in View (at createAnimatedComponent.js:154)
    in AnimatedComponent (at StackViewCard.js:12)
    in Card (at createPointerEventsContainer.js:28)
    in Container (at StackViewLayout.js:539)
    in RCTView (at View.js:60)
    in View (at StackViewLayout.js:434)
    in RCTView (at View.js:60)
    in View (at StackViewLayout.js:433)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.js:60)
    in RCTView (at View.js:60)
    in View (at Transitioner.js:169)
    in Transitioner (at StackView.js:22)
    in StackView (at createNavigator.js:57)
    in Navigator (at createKeyboardAwareNavigator.js:11)
    in KeyboardAwareNavigator (at createNavigationContainer.js:383)
    in NavigationContainer (at SceneView.js:10)
    in SceneView (at createTabNavigator.js:10)
    in RCTView (at View.js:60)
    in View (at ResourceSavingScene.js:14)
    in RCTView (at View.js:60)
    in View (at ResourceSavingScene.js:10)
    in ResourceSavingScene (at createBottomTabNavigator.js:86)
    in RCTView (at View.js:60)
    in View (at createBottomTabNavigator.js:77)
    in RCTView (at View.js:60)
    in View (at createBottomTabNavigator.js:76)
    in TabNavigationView (at createTabNavigator.js:127)
    in NavigationView (at createNavigator.js:57)
    in Navigator (at createNavigationContainer.js:383)
    in NavigationContainer (at App.js:14)
    in PersistGate (at App.js:13)
    in Provider (at App.js:12)
    in App (at registerRootComponent.js:35)
    in RootErrorBoundary (at registerRootComponent.js:34)
    in ExpoRootComponent (at renderApplication.js:33)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:32)

This error is located at:
    in NavigationContainer (at SceneView.js:10)
    in SceneView (at createTabNavigator.js:10)
    in RCTView (at View.js:60)
    in View (at ResourceSavingScene.js:14)
    in RCTView (at View.js:60)
    in View (at ResourceSavingScene.js:10)
    in ResourceSavingScene (at createBottomTabNavigator.js:86)
    in RCTView (at View.js:60)
    in View (at createBottomTabNavigator.js:77)
    in RCTView (at View.js:60)
    in View (at createBottomTabNavigator.js:76)
    in TabNavigationView (at createTabNavigator.js:127)
    in NavigationView (at createNavigator.js:57)
    in Navigator (at createNavigationContainer.js:383)
    in NavigationContainer (at App.js:14)
    in PersistGate (at App.js:13)
    in Provider (at App.js:12)
    in App (at registerRootComponent.js:35)
    in RootErrorBoundary (at registerRootComponent.js:34)
    in ExpoRootComponent (at renderApplication.js:33)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:32)

This error is located at:
    in NavigationContainer (at App.js:14)
    in PersistGate (at App.js:13)
    in Provider (at App.js:12)
    in App (at registerRootComponent.js:35)
    in RootErrorBoundary (at registerRootComponent.js:34)
    in ExpoRootComponent (at renderApplication.js:33)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:32)
- node_modules\react-navigation\src\createNavigationContainer.js:289:24 in componentDidCatch
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:10732:41 in commitErrorLogging
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:12521:27 in commitAllLifeCycles
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:39:15 in invokeGuardedCallback
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:221:34 in invokeGuardedCallback
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:12677:10 in commitRoot
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:13685:46 in completeRoot
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:13635:23 in performWorkOnRoot
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:13545:26 in performWork
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:13506:16 in performSyncWork
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:13392:6 in requestWork
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:13259:24 in scheduleWorkImpl
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:13207:28 in scheduleWork
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:6224:19 in enqueueSetState
- node_modules\react\cjs\react.development.js:242:31 in setState
* Components\Search.js:72:20 in <unknown>
- node_modules\promise\setimmediate\core.js:37:14 in tryCallOne
- node_modules\promise\setimmediate\core.js:123:25 in <unknown>
- ... 10 more stack frames from framework internals

 Je vous poste les fichiers modifiés

// Store/configureStore.js

import { createStore } from 'redux'
import toggleFavorite from './Reducers/favoriteReducer'
import { persistCombineReducers } from 'redux-persist'
import storage from 'redux-persist/lib/storage'

const rootPersistConfig = {
  key: 'root',
  storage: storage
}

export default createStore(persistCombineReducers(rootPersistConfig, {toggleFavorite}))

le App.js

import React from 'react'
import Navigation from './Navigation/Navigation'
import {Provider} from 'react-redux'
import Store from './Store/configureStore'
import { persistStore } from 'redux-persist'
import { PersistGate } from 'redux-persist/es/integration/react'

export default class App extends React.Component {
  render() {
    let persistor = persistStore(Store)
    return (
      <Provider store={Store}>
        <PersistGate persistor={persistor}>
          <Navigation />
        </PersistGate>
      </Provider>
    )
  }
}

et le fichier ou ce trouve la fonction qui poserait problème :

// Components/StageDetail.js

import React from 'react'
import { StyleSheet, View, Text,ScrollView, ActivityIndicator, Button, TouchableOpacity, Image } from 'react-native'
import { getStageFromApiwithId } from '../API/AikidoApi'
import { connect } from 'react-redux'

class StageDetail extends React.Component{

  constructor(props){
    super(props)
    this.state = {
      stage: undefined,
      isLoading: false
    }
  }



  componentDidMount(){
    const favoriteStageIndex = this.props.favoritesStage.findIndex(item => item.id === this.props.navigation.state.params.idStage)
    if(favoriteStageIndex !== -1){
      this.setState({
        stage: this.props.favoritesStage[favoriteStageIndex]
      })
      return
    }
    this.setState({ isloading: true })
    getStageFromApiwithId(this.props.navigation.state.params.idStage).then(data =>{
      this.setState({
        stage: data,
        isLoading: false
      })
    })
    console.log("FavoriteStage",this.props.favoriteStage)
  }

  _displayLoading(){
    if(this.state.isLoading) {
      return (
        <View style={styles.loading_container} >
          <ActivityIndicator size='large'/>
        </View>
      )
    }
  }

  _toggleFavorite(){
    const action = {type:"TOOGLE_FAVORITE", value: this.state.stage}
    this.props.dispatch(action)
  }


  _displayFavoriteImage() {
    console.log("favoriteStageIndex", this.props.favoritesStage.findIndex(item => item.id === this.state.stage.id));
    var sourceImage= require('../Images/icons8-add-to-favorites-50-white.png')
    if(this.props.favoritesStage.findIndex(item => item.id === this.state.stage.id) !== -1){
      sourceImage = require('../Images/icons8-sub-to-favorites-50-black.png')
    }
    return(
      <Image
        style={styles.favorite_image}
        source={sourceImage}
      />
    )
  }

  _displayStage() {
    const { stage } = this.state
    if(stage != undefined){
      return(
        <ScrollView style={styles.scrollview_container}>
          <View style={styles.lieux_container}>
            <Text style={styles.text_lieux}>{stage.lieux}</Text>
          </View>
          <View style={styles.infos_container}>
            <View style={styles.dates_container}>
              <Text style={styles.text_dates}>{stage.dates}</Text>
              <Text style={styles.text_horaires}>{stage.horaires}</Text>
            </View>
            <View style={styles.intervenants_container}>
              <Text style={styles.text_intervenants}>{stage.intervenants}</Text>
              <TouchableOpacity
                style={styles.favorite_container}
                onPress={() => this._toggleFavorite()}>
                {this._displayFavoriteImage()}
              </TouchableOpacity>
            </View>
          </View>
          <View style={styles.contact_container}>
            <Text style={styles.text_prof}> Professeur : {stage.professeurs}</Text>
            <Text style={styles.text_tel}>Tél : {stage.tel}</Text>
            <Text style={styles.text_mail}>Email : {stage.mail}</Text>
            <Text style={styles.text_site}>Site web : {stage.site}</Text>
          </View>

        </ScrollView>
      )
    }
  }


  render(){
    return(
      <View style={styles.main_container}>
        {this._displayLoading()}
        {this._displayStage()}

      </View>
    )
  }
}

const styles = StyleSheet.create({
  main_container: {
    flex: 1,
  },
  loading_container: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    alignItems: 'center',
    justifyContent: 'center'
  },
  scrollview_container: {
    flex: 1,
    backgroundColor: '#B7271A'
  },
  favorite_container: {
    alignItems: 'center',
    marginTop: 20
  },
  favorite_image: {
    width: 40,
    height: 40
  },
  infos_container: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',
  },
  dates_container : {
    width: 300,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  intervenants_container: {
    justifyContent: 'center',
    alignItems: 'center',
    margin: 10
  },
  lieux_container: {
    justifyContent: 'center',
    alignItems: 'center'
  },
  text_lieux: {
    fontSize: 30,
    color: '#fff',
    marginVertical: 20
  },
  text_dates: {
    marginRight: 20,
    color: '#fff',
    marginBottom: 20
  },
  text_intervenants: {
    color: '#fff',
    fontSize: 20,
    marginTop: 20,
    marginBottom: 20
  },
  contact_container: {
    marginLeft: 30,
  },
  text_horaires: {
    color: '#fff'
  },
  text_prof:{
    color: '#fff',
    marginVertical: 10
  },
  text_mail:{
    color: '#fff',
    marginVertical: 10
  },
  text_tel:{
    color: '#fff',
    marginVertical: 10
  },
  text_site:{
    color: '#fff',
    marginVertical: 10
  },

})

const mapStateToProps = (state) => {
  return {
    favoritesStage: state.favoritesStage
  }
}

export default connect(mapStateToProps)(StageDetail)

Si vous voyez ou est le problème je suis preneurs car la je comprend pas .

cordialement

Bugalez

-
Edité par bugalez 20 juin 2018 à 18:16:27

Salut Bugalez,

Effectivement le fait d'être sur une CRNA ne pose aucun problème.

L'erreur vient du fait que this.props.favoritesStage est undefined dans le component StageDetail.

En fait, tu as utilisé la fonction persistCombineReducers de redux-persist. Lorsque tu utilises la fonction "combine", dans tes components, tu dois spécifier dans quel reducer aller chercher la donnée.

En gros, tu fais : 

favoritesStage: stage.favoritesStage

Alors que tu devrais faire : 

favoritesStage: stage.toggleFavorite.favoritesStage

stage.favoritesStage fonctionne si tu n'as qu'une seul reducer et que tu utilise persistReducer, au lieu de persistCombineReducer comme ici.

Si tu veux plus d'infos, je parle de ce sujet dans le cours lorsqu'on ajoute l'avatar au store Redux : https://openclassrooms.com/courses/4902061/5160801?status=waiting-for-publication#/id/r-5419628

Dis moi si ça corrige ton problème.

Bon courage.

Bonjour sAr63

Super c'était ça le problème, j'ai pourtant refait 2 fois ton tuto mais visiblement mon attention sur la fin tu tuto était moins importante .

Il faut dire qu' il y a pour moi pas mal de choses a retenir

Du coup ça me motive pour rajouter une autre fonctionnalité.

Si ça t’intéresse je mets l'app sur github et je te donne le liens pour que tu regarde ce que ça donne ?

Bonne soirée

Salut,

Pas de soucis, le cours est très dense et effectivement ce n'est pas facile de tout retenir.

Bien sûr je serais ravi de voir l'app, tu peux m'envoyer le lien par MP si tu veux.

Bonne soirée.

Bah ? il est ou le cours ?

Merci pour le cours, il est vraiment bien expliqué et la lecture est vraiment agréable. Le projet réalisé est très intéressant pour pouvoir développer ses propres application.

Plus qu"à attendre la validation d'OC.

Un grand merci =)

J'ai appris ton cours en entier, il me reste simplement les deux derniers carrés du cours. Je fais des études en dév depuis 2 ans, j'ai acquis la grosse majorité de mes bases grâce aux tutoriels d' Openclassroom que ce soit en Web ou mobile.

Comment te dire que ce tutoriel est parfait et je pèse mes mots, j'en ai lu pleins et celui-ci est le plus agréable à suivre, le plus complet, c'est d'ailleurs le seul que j'ai fini jusqu'au bout. Tu sais te mettre à la place de tes lecteurs car tu as toujours le bon réflexe d'expliquer toutes les petites choses qui peuvent paraitre compliquer pour un débutant sans rien laisser de côté, et tu nous permets bien d'allier la théorie à la pratique en étant autonome, ce qui fait qu'à la fin de chaque chapitre j'ai toujours tout très très bien compris. 

Parcontre je pense avoir déceler une erreur: 

Quand on fait une recherche d'un film, après que le chargement des premiers films soit terminé, si on supprime le contenu de l'inputText l'application ne charge plus la suite de la liste des films quand on scroll vers le bas. Ceci est peut-être du au fait que dans la condition de la fonction pour charger les films, on avait écrit que pour charger la suite de la liste de film il fallait que le contenu de l'inputText face + de 0 caractère, or si on supprime le contenu de l'inputText la condition n'est plus rempli donc ça ne charge plus. C'est bien ça? 

Merci beaucoup.

-
Edité par EvilPizza 9 août 2018 à 21:09:12

Salut,

Merci pour ton retour très encourageant, content de savoir que le cours t'a plu

Concernant ton erreur, que dire à part que tu as parfaitement raison

Pour être honnête je n'ai jamais pensé à tester ce cas mais, effectivement, le chargement de plus de films ne marchera pas, bien vu ! Lorsqu'on change le texte du TextInput, on met à jour la variable searchedText. Variable qui est utilisée pour charger plus de films.

Pour corriger cette anomalie, il faudrait stocker, dans une nouvelle variable, le texte recherché lorsqu'on lance une nouvelle recherche (dans la méthode _searchFilms) et utiliser cette variable pour charger plus de films. 

Je ne pense pas corriger cette anomalie dans le cours, cela le rendrait moins clair et long sur un chapitre sur le state déjà complexe. Mais vraiment merci beaucoup pour cette info et ce retour.

Bon courage.

Bonjour,

Souhaitant apprendre React Native puis Redux une fois le cours ReactJs terminé, je me pose une question toute bête (je m'excuse pas avance de celle-ci) dont je n'ai pas trouvé de réponse

Si je souhaite développer un site web ainsi que les applications mobile associé, est-ce que je dois pour le front de la partie site web utiliser ReactJs et pour les applications mobiles React Native ou est-ce React Native permet aussi bien de développer le côté site web que mobile?

Merci d'avance.

Bonjour,

La question n'est pas bête mais non, React Native n'est pas pensé pour faire du web. Il existe des librairies qui permettent toutefois de rendre une application React Native dans un navigateur web, comme https://github.com/necolas/react-native-web et sa démo https://necolas.github.io/react-native-web/examples/ mais je te le déconseille. Le projet reste récent et le rendu est très très proche du mobile, tu risques d'être rapidement bloqué si tu as une idée précise de ce que tu souhaites côté web.

Le mieux reste d'utiliser React Native pour tes applications mobiles et React JS pour ton site web. 

J'espère que ça répond à ta question.

Bon courage.

Ok merci pour la réponse :) 

Bonjour, merci pour ce cours! Il m'a été (et m'est toujours d'ailleurs) d'une grande utilité pour appréhendé ce framework...

Juste une question: peut-on avoir accès quelque part au code complet qui sert d'exemple tout au long du cours?

Bonjour,

Oui, tu peux retrouver le projet complet sur Github à cette adresse : https://github.com/Aximem/MoviesAndMe

++

Bonjour quelqu'un aurait le lien du cours svp  

YannDeo,

Le cours a été publié, voici le lien : https://openclassrooms.com/fr/courses/4902061-developpez-une-application-mobile-react-native

-
Edité par Benzouye 13 septembre 2018 à 9:52:28

Cours tester et approuvé, pour ceux qui souhaite apprendre le développement je vous le conseil, c'est clair et compréhensible .

Merci pour cette excellent tutoriel, probablement l'un des mieux rédigé que j'ai pu lire. Il est parfaitement adapté à des débutants !

Le fais que tu nous proposes tous un tas de petites améliorations est un gros plus, on apprécie d'autant plus l'apprentissage et l'on se projette plus facilement sur nos projets futur  

Un grand bravo à toi !

-
Edité par RémySd 26 septembre 2018 à 9:32:34

bonjour, j'aimerai votre aide sur le cours de react native sur l'integration du redux.

 

creation du store

appel du store

la connexion sur le filmDetail

la suite

 

tout en bas sur la fonction mapStateToProps

à l'execution une erreur du type :  TypeError: undefined is not an object (evaluating 'state.favoritesFilm'). J'aimerai votre aide. Merci