project-react-native-app #304
Conversation
There was a problem hiding this comment.
Great job with the project this week! : D It works perfectly when I checked it on the phone fetching the famous quote, and very well implemented using the StyleSheet styling object!
Your code is clear and easy to follow and is really nicely structured.
Well done!! ⭐😃
| <Container> | ||
| <Title>This is your cool app!</Title> | ||
| <Title>Go to App.js and start coding</Title> | ||
| <Title>💅💅💅</Title> | ||
| <RandomQuote /> | ||
| </Container> |
There was a problem hiding this comment.
nice and clean approach in app.js with only RandomQuote :)
| const RandomQuote = () => { | ||
| const [quote, setQuote] = useState({}); | ||
|
|
||
| const generateQuote = () => { | ||
| fetch('https://api.quotable.io/random') | ||
| .then((res) => res.json()) | ||
| .then((data) => setQuote(data)); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| generateQuote(); | ||
| }, []); |
There was a problem hiding this comment.
well doe with the fetch, it works perfectly on my phone! : D
| return ( | ||
| <View style={styles.container}> | ||
| <TouchableOpacity style={styles.btn} onPress={generateQuote}> | ||
| <Text style={styles.btnText}>New Quote</Text> | ||
| </TouchableOpacity> | ||
| <Text style={styles.quote}>"{quote.content}"</Text> | ||
| <Text style={styles.author}>{quote.author}</Text> | ||
| </View> | ||
| ); | ||
| }; | ||
|
|
There was a problem hiding this comment.
Great job implementing the Stylesheet object for styling the fetched quotes and author now that we had the opportunity to try it! ^__^
| import data from '../albums.json'; | ||
| import React, { useEffect, useState } from 'react'; | ||
| import { View, Text } from 'react-native'; | ||
|
|
||
| const Albums = () => { | ||
| const [album, setAlbum] = useState({}); | ||
| console.log(data.items[2].name); | ||
|
|
||
| const generateAlbum = () => { | ||
| fetch('../albums.json') | ||
| .then((res) => res.json()) | ||
| .then((data) => setAlbum(data)); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| generateAlbum(); | ||
| }); | ||
|
|
||
| return ( | ||
| <View> | ||
| <Text>{JSON.stringify(data.items[2].name)} </Text> | ||
| </View> | ||
| ); | ||
| }; | ||
|
|
||
| export default Albums; |
There was a problem hiding this comment.
I might have missed this from the classes since we did not do the same project, but I can't see it imported somewhere so just wanted to comment in case it is not used :)
2 participants
My reflections on how this week's project turned out:
Things I'd like to have clarified or explained in more detail: