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...
vidéo géniale et très bien expliquée, merci !
super vidéo claire, nette et vraiment bien expliqué...merci vraiment 👍👍
Merci pour ce super tuto Grafikart :)
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 ...
Merci pour ton temps et ces explications
merci pour cette vidéo, très instructif !
Top, merci beaucoup pour partager, ça gagne du temps pour nous apprendre à faire
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 ??
t"es video sont formidable merci
Super vidéo comme d’habitude
super vidéo, je la recommande !!
Très bonne vidéo.Merci
I was gonna suggest this tutorial, thank you. ^^
ç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 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 !!
Excellente video :)
Ca dechire! Merci!
Très bon tuto. Reste la compilation
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
J'adore!
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.
Bonjour. Super en moins de 2heures ! Reste à passer le clavier en azerty :)
La classe !
excellent tuto
Merci beaucoup
Merci!!
Super tuto
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é! ;)
Super tutoriel ! Merci beaucoup (tu viendrais pas de Montpellier ?)
On va mettre du rouge bien degueulasse 😂😂 excellente vidéo sincèrement 👍
Merci pour cette excellente vidéo d'introduction. J'ai une question : pourquoi utiliser Expo ? Quelle est son utilité ?
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)
J'ai commencé à utiliser react-native la semaine dernière: si seulement j'avais eu cette vidéo..
Exactement comme moi!
Capillotracté :D
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
super fort
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 😬) ?
super
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?
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.
Salut !
Rien à voir mais je kiffe ton terminal ! Tu peux m'en dire plus ? :D
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
Salut :) est il possible de faire une vidéo sur la navigation v5 de reactNative?
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!
une question bête: le XDE sort du code machine IOS, Android et du JS navigateur aussi ?
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.
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.
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)
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
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
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
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
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
Pour la prochaine vidéo pourquoi pas voir du soap en php 👌🏻😁
Jamais utilisé ni eu besoin de soap :(
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
A partir de 28:17 mettre le TabNavigator ne fonctionnne plus
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 ?
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 ;'(
It's a nice video thanks now je dois rentrer à la maison, à beark-sur-mer !!!
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
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 ?
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 .
Pourrais-tu faire un systeme de recherche d'hotel avec React native s'il te plait? Se serait vraiment intéressant
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
Puis-je avoir pour une version antérieur car j'arrive pas à installer react-navigation? Merci
Salut la fonction constructeur elle sert a quoi?
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!
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
bonsoir svp comment cree login and signup avec react native et avoir un system d inscript avec la verification via sms
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?
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
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
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 ? :(
Erreur lors de l'identification sur EXPO XDE : "EACCES: permission denied, open '/Users/macbookpro/.expo/state.json'"
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
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 😂
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-
Next vidéo: redux ? :D
ne spoil pas mais certaines rumeurs parlent aussi de mobx
so?
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
Bonjour Gafikart, j'aimerais savoir comment partager cette application à mes amis
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 (
)
}
}
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à...
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
Une formation React Native ? :)
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 :(
il est ou' le lien de l'api
'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
Tuto n'était plus du tout à jours, la plus part des fonctions ne sont plu utilisable et la syntaxe aussi.
Par conséquent "suivre" ce tuto revient malgré tout à avoir à faire le travail de documentation en plus de compréhension qu'on, justement, essaye de ne pas avoir à faire quand on débute un langage.
Dommage, merci malgré tout il est très bien expliqué
Au contraire, je trouve justement que les erreurs générées par l'évolution du framework te poussent à comprendre ce que tu fais... Et en plus ca te fait faire ce que font 99,9% des devs : corriger les bugs.
ps : je débute aussi totalement
Slt il semble que tu es oublié de donner l'url de l'api ...
Oui moi aussi j'ai remarquer ça!
btw i use arch