Tutoriel ReactNative : Découverte de React Native, App Météo
HTML-код
- Опубликовано: 31 май 2017
- Article ► grafikart.fr/tutoriels/react-...
Abonnez-vous ► bit.ly/GrafikartSubscribe
React Native vous permet de construire une application mobile native pilotée en JavaScript gràce au framework [React](facebook.github.io/react/).
Soutenez Grafikart:
Devenez premium ► grafikart.fr/premium
Donnez via Utip ► utip.io/grafikart
Retrouvez Grafikart sur:
Le site ► grafikart.fr
Twitter ► / grafikart_fr
Discord ► grafikart.fr/tchat 
Наука
Franchement, j'ai rarement vu des vidéo en français de ce niveau de qualité. Super clair, complet et bien expliqué. Merci beaucoup, c'est parfait!
Je me suis dit la meme chose!!!
je comfirme merci graficart
@@jamilaazhare2811, grafikart mais pas graficart, (y)
Fantastique je me met à react native 5 ans après la vidéo et c'est toujours aussi utile (et bcp plus efficace que le formation toute pétée de 4 jours payée à prix d'or par ma boite)
@@kamilcassam-chenai9174 t'a pas eu des soucis en suivant la video? je suis peut être plus Noob que toi. mais 2017-2022 ça a bien changé. genre le Tabnavigator maintenant c'est bottomTab..etcc .moi j'ai eu pleins d'erreurs que s'en est même devenu insupportable . React avance bien trop vite
Merci beaucoup pour tes tutos ! On sent vraiment que tu les prépares à fond en amont, et c'est très sympa à regarder, continue !
Super vidéo ! Tant sur le fond que sur la forme :) Ton dynamique super agréable à écouter, et pour le coup les 1h40 de vidéo ne sont pas gênantes !
Tuto d'excellente qualité, à bon rythme... chapeau
Merci Jonathan pour cette découverte très intéressante. J'espère une prochaine vidéo expliquant la fin c'est a dire la création des deux applications natives pour IOS et Android. A bientôt.
Merci pour ce contenu; je me lance à peine sur React native et je constate que les tutoriels en français sont rares, Donc merci pour cette vidéo. Ce que j'aimerais apprendre actuellement c'est développer une application React native avec un backend fait en laravel, j'ai cherché et j'ai pas trouvé de tuto en français. Si Grafikart peut penser à publier un contenu de ce genre ce sera très apprécié, surtout que laravel est un ramework assez utilisé. Personnellement c'est surtout comment utiliser le système d'authentification de laravel avec une application React native qui que je cherche depuis longtemps. Mais un CRUD complet en plus sera la bienvenue... MERCI D'AVANCE. ET MERCI ENCORE...
Encore un bon tuto. J'avais commencé avec Cordova et Vue.js, mais je vais aussi essayer avec React.
Un excellent tuto pour démarrer avec react native ! merci, merci, merci ...
vidéo géniale et très bien expliquée, merci !
super vidéo claire, nette et vraiment bien expliqué...merci vraiment 👍👍
Top, merci beaucoup pour partager, ça gagne du temps pour nous apprendre à faire
merci pour cette vidéo, très instructif !
Merci pour ton temps et ces explications
C'est dans quel vidéo que tu parles de configurer Android Studio ?
Dans cette vidéo tu dis avoir traité le sujet avant !
Mais je n'arrive pas à trouver la vidéo ? Help please.
Merci pour ce super tuto Grafikart :)
ça serait incroyable que tu fasse une mise à jour de cette vidéo parce qu'elle est incroyablement bien même pour les débutants.
Clairement. J'aimerais savoir s'il vaut mieux utiliser les fonctions aujourd'hui pour native ou garder les class
@@antoiner2121 Avant on utilisait plus les class mais maintenant les fonction on de meilleur performance et une syntaxe plus légère en soit c'est selon ton appréciation
Je suit tes tutos et celui-là aussi est super. Pourrais tu un jour faire un tutoriel qui explique le this en profondeur ainsi que pour super. Et/ou une méthode pour comprendre que représente le.this par exemple à un moment donné (comme avec un console log)
Certains me diront tu a la réponse dans ta question certes mais pour des novices comme moi c'est super instructif.
Merci d'avance
t"es video sont formidable merci
A part l'install qui n'est plus comme create react app, la vidéo est vraiment très actuel. Du coup si ça peut aider :
"npm install -g expo-cli" puis "expo init nomDuProjet "
effectivement !
Pour le déploiement ??
super vidéo, je la recommande !!
Je viens de regarder ce tuto (et le faire en même temps), ouch, ça va
vite mais très intéressant, surtout pour moi qui fait du natif Android,
ça me permet de voir la façon donc reactnative fonctionne et je trouve
ça vraiment pas mal, même si la façon de faire est bien différente du
natif, en tout cas merci beaucoup pour ce tuto !!
Super vidéo comme d’habitude
Bonjour. Super en moins de 2heures ! Reste à passer le clavier en azerty :)
Merci pour cette excellente vidéo d'introduction. J'ai une question : pourquoi utiliser Expo ? Quelle est son utilité ?
I was gonna suggest this tutorial, thank you. ^^
Très bon tuto. Reste la compilation
Très bonne vidéo.Merci
J'ai commencé à utiliser react-native la semaine dernière: si seulement j'avais eu cette vidéo..
Exactement comme moi!
Super tutoriel ! Merci beaucoup (tu viendrais pas de Montpellier ?)
Salut, merci pour le tuto. Est-il possible avec ce framework d'avoir acces a tout les inputs du smartphone? Je peux par exemple connaitre les glissement de doigt de l'utilisateur pour obtenir un zoom sur google map par exemple? Est-il possible d'integrer google map grâce à son API?
Capillotracté :D
Un grand merci pour cette vidéo, tu pourrais en faire une série, j aimerais connaitre la gestion de l'authentification sur application mobile avec une simple API.
Et Enocre MERCI!!! soit fortifié! ;)
Salut :) est il possible de faire une vidéo sur la navigation v5 de reactNative?
On va mettre du rouge bien degueulasse 😂😂 excellente vidéo sincèrement 👍
Excellente video :)
Ca dechire! Merci!
La viedo est cool merci beaucoup.
Personne ne connais un bon tuto react native ou il y a de la persistance de donnée ou alors la gestion de champs input ssauvegarder dans l'appli (du backend 😬) ?
Salut!
Merci beaucoup pour votre expérience que vous nous partagez sur votre chaîne.
Mais j'ai un problème avec l'api openweather.
J'ai créer un compte mais je ne sais pas comment générer le lien vers cette api.
Mais j'ai eu au moins une clé api.
Merci pour votre copréhension.
Je commence juste d'apprendre le développement web en autodidacte et tes tutos sont super,je connais le html-css-un peu php procédural et un peu de JavaScript.je veux un conseil selon vous du bon ordre d'apprentissage pour avancer facilement.merci encore pour tes tutos
Continue le PHP soit le JavaScript avant d'aller plus loin. Adapte ton apprentissage en fonction de ce que tu cherche à faire (apprendre pour apprendre n'est pas forcément idéal quand on débute, il faut se donner des petits objectifs)
Merci pour la vidéo.
Je me demande comment la liste est mise à jour une fois que l'on a renseigné une ville alors qu'a aucun moment nous n'avons remis à jour l'état (setState()).
De plus, si on inverse les deux écrans dans l'ordre de navigation, on obtient une erreur due à l'absence de params dans la liste.
J'adore!
La classe !
une question bête: le XDE sort du code machine IOS, Android et du JS navigateur aussi ?
Merci pour le tutorial. Comme toujour tres bien fait. Est ce que tu pense de regarder aussi Nativescript? Il semble pas mal aussi et plus sample dans certain cas.
Pour le moment je ne m'y suis pas intéressé donc pas de NativeScript de prévu.
Merci beaucoup
Salut !
Rien à voir mais je kiffe ton terminal ! Tu peux m'en dire plus ? :D
excellent tuto
J'ai beaucoup ris à 1:13:09 ^^
Bon je pense (j'espère) que la techno a dû évoluer en 1 an, car là ça fait un peu peur quand même par rapport au natif (possibilités du sdk et tooling)
D'un point de vue Android ce qui m'a le plus choqué c'est l'absence totale de notion de gestion du cycle de vie et des ressources système.
Vu comme ça, on produit à coup sûr une application qui se comporte comme un goret et qui va se faire shooter par l'OS dès qu'elle va passer en background ^^
En ttk tu t'en ai bien sorti, j'aime bien ta façon de présenter c'est toujours très clair :)
hhhhh uii moi aussi loool
Bonjour! En parlant de react native justement, comment générer les états d'impressions pour imprimer une facture par exemple sur un pios android, et afin comment générer un code barre ? Merci
Bonjour Grafikart, tres bon video :) tu utilises quoi comme theme zsh? Merci et bonne continuation!!
Si mes souvenirs sont bon c'est le thème "pure"
Thanks!
Merci!!
Super tuto
A partir de 28:17 mettre le TabNavigator ne fonctionnne plus
qu'est ce que tu utilises pour l lautocompletion dans ton terminal .
Au passage l iso de antergos sur leur site officiel me renvoi des erreur lorsque je boot dessus , as tu rencontres ce souci ??
Merci excellent tuto !
J'utilise fish au niveau du terminal. Pour Antergos absolument aucune idée. Au pire essaie Manjaro
Grafikart.fr merci
Salut!j'ai un problème en lançant l'AVD sur ArchLinux, il me dit que c'est un problème concernant la librairie libstdc++.6.so et je trouve pas de solution, pourrais-tu m'aider? merci d'avance :)
Y'a t-il un moyen de désactiver le TabNavigator une fois rendu sur la pages des résultats ?
Si tu as une piste, je suis très preneur !
Peut-être ici mais je ne suis pas sûr : stackoverflow.com/questions/44506479/how-to-disable-back-swipe-option-or-pop-a-route-in-react-navigation
Bonjour j'ai une erreur au niveau de expo qui me dit "
Couldn't start project on Android: Error running adb: Failed to install C:\Users\Dev\.expo\android-apk-cache\Exponent-1.17.0.apk:" Si quelqu'un a eu ce problème ??
merci
Couldn't start project on Android: Error running adb: Failed to install C:\Users\Omnes\.expo\android-apk-cache\Exponent-1.20.0.apk
Ca me met ça quand je lance le téléphone virtuel depuis Expo XDE ;'(
Quand je compile sur mon téléphone Android et je vide le cache du téléphone Les Images de mon appli react Native se supprime sa peut être du a quoi ?
Salut la fonction constructeur elle sert a quoi?
bonjour, la commande npm start me renvoie une erreur : "Error starting packager: Error: Couldn't start project. Please fix the errors and restart the project." quelqu'un aurait il une solution à ce probleme ?
super fort
bonjour j essayer le tuto j suis bloquer au niveau de la listview j'ai ecrit correctement le code mais il m'affiche erreur (TypeError: undefined is not an object (evaluating 'Object.key(dataBlob[sectionID])) j'aime bien react mais je pense ce n'est pas un moyen vue les nombreuses erreur lié au dependances
Pourrais-tu faire un systeme de recherche d'hotel avec React native s'il te plait? Se serait vraiment intéressant
bonsoir svp comment cree login and signup avec react native et avoir un system d inscript avec la verification via sms
bonjour tout le monde,je vous remerci pour la vidéo, super tuto!!
ya t'il quelqu’un qui as un problème avec require ou juste moi car pour moi elle marche pas
Puis-je avoir pour une version antérieur car j'arrive pas à installer react-navigation? Merci
Tu es officiellement le boss ! Il faudrait juste mettre à jour certaines parties de la vidéo (surtout la partie consacrée à la navigation, TabNavigator n'existe plus ou en tout cas il a été remplacé)
la vidéo date de 2017 ils devrait la refaire entièrement mais c'est du bouleau
est-ce que react native est réellement différent de reactJS pour le code? si j'utilse reactJS pour une application mobile, est-ce que ça fonctionne bien?
J'ai un leger soucis....lorsque je démare mon projet avec yarn start, il ne m'ouvre pas la meme fenêtre que toi, je peut ne voi pas l'arborescence de mon projet je peut seulement afficher le simulateur. pourtant j'ai suivi tout ce que tu dis pas a pas . et vu que le site de expo a changer ( quand dans l'url je tape expo.io/tools je ne tombe pas sur la meme fenetre que celle qu'il y a dans la vidéo .
Quel est le plugin zsh que tu utilises pour la completion automatique (en texte grisé) ?
Je n'utilise pas zsh dans cette vidéo mais fish (avec ohmyfish)
Oh ok, et je viens de trouver l'implementation de cette magnifique complétion sur zsh: unix.stackexchange.com/q/84844
Bonne video mais personnellement je trouve TabrisJs plus facile a prendre en main et offrant plus de possibilités grace notament a la prise en charge des plugins de cordova non basé sur les webviews(plus de 2000 plugins)
merciii pour ce bon Tuto
, Mais j'ai une question , comment tu peux apprendre tous ces languages avec leur astuces et methodes ?
Il RTFM ensuite il pratique.
J'essaie de me donner des petits objectifs (comme créer une petite app météo) puis je me tape la doc pendant des heures :)
Grafikart.fr cool :)
@@grafikart t es super cool merci
Erreur lors de l'identification sur EXPO XDE : "EACCES: permission denied, open '/Users/macbookpro/.expo/state.json'"
J'aimerais ajouter une vidéo mp4 à mon appli react-native mais l'importation du module react-native-video ne doit pas fonctionner, y a t'il des modules react native qu'on ne peut pas ajouter à un projet créé avec le cli ?
Ah j'ai trouvé ça dans la doc 'not have any dependencies which rely on custom native code (i.e. ones which require running react-native link to work).' c'est pour ça que ce module ne fonctionne pas, je vais chercher d'autres modules pour afficher une vidéo sur mon app
super
j'arrive n'arrive pas à cacher la statusbar... Ni à mettre le tabsNavigation en dessous de la statusbar...
Quelqu'un a eu ce problème svp ? :(
J'ai un problème avec l'appel à l'api, je n'arrive pas à faire le get (même pas dans mon navigateur) j'ai une réponse 401 Invalid API Key alors que celle-ci fonctionne sur d'autres routes de l'api... Quelqu'un est dans le même cas ?
apparemment l'appel à l'api est devenu payant : openweathermap.desk.com/customer/portal/questions/17159075-invalid-api-key-
Pour la prochaine vidéo pourquoi pas voir du soap en php 👌🏻😁
Jamais utilisé ni eu besoin de soap :(
Salut ! J'admire tes tutos!
J'ai rencontré un problème avec expo SDK 40 lorsque exécute la commande $ expo build:android -t apk ,
J'obtiens l'erreur suivante :
read ECONNRESET
Error: read ECONNRESET
at TLSWrap.onstreamRead (internal/stream_base_commons.js:209:20)
Je demande votre aide si possible
c'est recommandé de créer le projet depuis XDE si l'on veut l'ouvrir depuis XDE sinon
il est fort probable d'avoir cette erreur:
Error: Missing exp.json. See docs.expo.io/
À cause de la différence de structure lors de la création
La Expo team ont esssayé de minimiser ça à la latest release (v18) mais ca persiste
merci!
Salut !! Super tuto ! Par contre je bloque depuis quelques heures déjà sur le StackNavigator. Il semble qu'on ne puisse plus faire comme dans ton tuto. Tu as une idée ? En gros ça me dit que j'essaie d'imbriquer deux navigateurs et du coup ça me renvoie une erreur...
Merci d'avance !
Salut ! Perso je bloque sur le TabNavigator, as tu passé cette étape car moi ça me met une erreur :/
@@baptistefuseau1332 Salut Baptiste !! J'ai finalement réussi à passer ça :) !
Aurais-tu un mail que je t'envoie le fichier ?
Perso je bloque plus loin, vu que ListView n'existe plus je me bagarre depuis 1j sur la FlatList... Si jamais tu y arrives, tu me rendras la pareille ;)
@@TheCitron59 Je me remet dessus demain matin ^^
Baptiste Fuseau si jamais tu veux le code, tu trouveras mon mail dans la description de ma chaîne !
Et si tu arrives à rendre les données de l’API grâce à la FlatList je suis preneur 😂
Bonjour Gafikart, j'aimerais savoir comment partager cette application à mes amis
Hello j'ai constamment une erreur undefined is not an object (evaluating '_react3.default.PropTypes.object') pour le fichier Row.js ça correspondrait à la ligne 7 pour moi day:React.PropTypes.object dans
static propTypes = {
day: React.PropTypes.object,
index: React.PropTypes.number
} si quelqu'un a une idée! merci
Bon j'ai trouvé en déclarant import PropTypes from 'prop-types' et en modifiant Row.propTypes = {
day: PropTypes.object.isRequired,
index: PropTypes.number.isRequired
}; et en le collant à la fin, par contre je n'ai pas le jour et la date qui s'affiche mais je n'ai plus l'erreur déjà...
always same error in 1:14h
instance.render is not a function. (In 'instance.render()', 'instance.render' is undefined)
plz help
Bonjour ,
y a t-il une maniere de pouvoir creer une application react native sans expo mais sans passer par du code native et ce pour beneficier de certaines librairies non accessibles via expo ?
Librairie non accessible via expo ? Tu peux prendre le CLI sinon
Lokdien si tu parles d’expo cli ca reste toujours incomplet comme par exemple pour accéder à la librairie react-native-fs , qui est beaucoup plus complète que filesystem d’expo ce qui , si c’était possible, m’aurait évitée bien des tracas
Moi j'ai un problème je ne comprend pas comment récupérer les donnés envoyer par openweathermap. quelqu'un peut m'expliquer ce que je dois faire exactement pour éviter tout erreur
Faut s’inscrire sur le site et coller la clef api fournit, c'est expliqué sur le site de openweathermap
Faut-il déjà connaître react pour suivre ce tuto ?
légèrement, au moins comprendre le principe et avoir entendu parlé du JSX
Cucu Bonsoir Grafikart je suis sur votre tuto mais une erreur m'empeche de passe sur le #TabNavigation on me dit que #TabNavigation () n'est pas une une fonction ::
×
TypeError: Object(...) is not a function
Module.../../../../../../../../../../../meteoAppWu/App.js
C:/meteoAppWu/App.js:8
5 | //tabnav1
6 | import { TabNavigator } from 'react-navigation'
7 |
> 8 | const Tabsv = TabNavigator({
9 | Search: { screen: Search},
10 | About: { screen: About }
11 | })
Mon code App.js
import React from 'react'
import About from './components/About'
import Search from './components/Search'
//tabnav1
import { TabNavigator } from 'react-navigation'
const Tabsv = TabNavigator({
Search: { screen: Search},
About: { screen: About }
})
//tabnav2
export default class App extends React.Component {
render(){
return (
)
}
}
Ooooo Je t'aime !!! MDR ... Je cherche un bon tutoriel depuis le debut de la semaine ... J'en cherche un aussi sur react-starter-kit (kriasoft) ... Si quelqu'un à une piste Merci d'avance
It's a nice video thanks now je dois rentrer à la maison, à beark-sur-mer !!!
il est ou' le lien de l'api
Une formation React Native ? :)
Next vidéo: redux ? :D
ne spoil pas mais certaines rumeurs parlent aussi de mobx
so?
'Yarn' n'est pas reconnu en tant que commande interne [...] :'(
npm install -g yarn ;)
Lammens Michel Merci :$
Merci ♥
J'ai tout le temps des erreurs, il me dis que react-native n'est pas installé alors que si ...
npm install react-native-cli -g
Slt il semble que tu es oublié de donner l'url de l'api ...
Oui moi aussi j'ai remarquer ça!
./xde-2.22.0-x86_64.AppImage
bash: ./xde-2.22.0-x86_64.AppImage : impossible d’exécuter le fichier binaire : Erreur de format pour exec().
??!!
Malheureusement ce tuto n'est plus trop d'actualité, vu que React Native a beaucoup changé en 3 ans. Notamment pour la navigation.
Le "create-react-native-app" fonctionne toujours, donc c'est plutôt cool ^^ Et grossièrement la manière de créer des components ne change pas non plus. Donc y'a quand même des éléments intéressants à garder, mais pour certains autres éléments faudra aller voir dans la documentation de React Native.
Eh oui, faut aller lire de la doc! C'est terrible, non? :P
Tu utilise un plugin spécial pour que inteliJ comprennes l'erreur dans ton jsx a 12:50 ?
Bon tuto au passage
J'ai juste cliqué sur "switch to jsx" quand il m'a demandé, rien de spécial :(
Quel est le terminal que tu utilises ?
Terminator
Grafikart.fr Je pensais que c'étqit fish shell 🤔
Oui
- Terminator, c'est l'application pour ouvrir le terminal
- Fish, c'est le shell
Grafikart.fr Je te remercie 🤗