melialbu / challenge-searchcocktails Goto Github PK
View Code? Open in Web Editor NEW'Search Cocktails' Mobile App created with React Native and Redux
'Search Cocktails' Mobile App created with React Native and Redux
Esto es una sonsera, podrias guardar esa misma var antes del this.setState, para poder usarla ahi y mas abajo
En general hacer lo siguiente, doy el ejemplo para la carpeta de components
components/
Card/
index.js
Card.js
styles.js
Input/
index.js
Card.js
styles.js
index.js
En el archivo index.js
de cada componente iría algo como así:
export { default } from './Card';
Y en el archivo index.js
de la carpeta Components
iría algo así:
export { default as Card } from './Card';
export { default as Input } from './Input';
Y cuando tengas que llamar a un componente en una screen sería algo como:
import { Card } from '../components'
NOTA: Este es el ejemplo para los componentes, hay que hacerlo para las screens, las imágenes, las actions y los reducers, cada cosa en una carpeta diferente con su propio index.js
Las imagenes, fuentes, iconos (Todo lo que sean assets) deben ir en una carpeta que se llame assets
dentro de SRC
Recomiendo ordenar por tipos, por ejemplo si tenes fuentes
Creas la carpeta fonts, lo mismo para images, icons, vectors, lo que exista.
Nososotros tenemos siempre un archivito en el root de assets que se llama index.js
donde dentro importamos y exportamos todas las imagenes de esta forma
export { default as like } from './icons/like.png';
para luego en las screens llamarlo asi
import { like } from '../../assets/images';
Se que no tenes la funcion responsiveSize
pero es algo que me gustaria arreglar ya que nos ayuda desde siempre y es muy importante.
Para todos los estilos que lleven medidas en PX agregamos esa funcion para que se adapte a todos los dispositivos.
es facil de usar, solo hay que pasarle por parametro el numero y retorna el numero adaptado a la pantalla.
No es algo para ver ahora, si no que hay que esperar a la reunion asi creamos los archivos y lo vemos bien
Para no tener que bindiar las funciones posteriormente, te recomiendo que las uses como lambda unicamente a las que no son de la clase de RN (Ej, componentDidMount, componendDidUnmount, etc). entonces a su vez diferencias cuales vienen heredadas y cuales creaste vos
Nunca usamos los componente Text, en cambio usamos uno que creamos para mantener la misma typografia en todos los text y que despues no haya inconsistencias entre las pantallas.
En este momento el componente no lo tenes, pero es para que vayas sabiendo, ya lo vamos a agregar.
Siempre es bueno destructurar las props:
const { image } = this.props
Algo indispensable es arreglar Prettier, tenemos que revisar por que no esta funcionando correctamente :c
Move los estilos a un archivo styles.js
Luego revisa este issue para terminar de completar #3
Por lo general en ND, para tener los mismos colores en toda la app y si es necesario un cambio sea rapido de hacer, tenemos un index de colores.
Habria que crear la carpeta theme
en src
donde dentro crear el archivo colors.js
Ahi dentro agregas algo como esto:
export defult {
transparent: 'rgba(255, 255, 255, 0)',
white: '#FFFFFF',
};
A mi cuando entre me dijieron que los colores siempre este en HEX, no se si fue para que queden todos con el mismo tipo, o por algo en especial, esta parte la dejo abierta para debatir, no me parece que sea algo 100% necesario
Move los estilos a un archivo styles.js
Luego revisa este issue para terminar de completar #3
Los componentes siempre van en la carpeta components
en src, esta bien como lo hiciste. pero como sugerencia es mejor que por cada componente agreges una carpeta
EJ:
Creas el componente Card, bueno crea una carpeta que tenga ese nombre y dentro los archivos
styles.js
& index.js
Donde en styles estaran unicamente los estilos, que en index vas a importar y usar
Y en index va a estar todo tu componente
Para mi es mucho mas comodo tener separado los estilos del componente.
Se agrega el archivo index para hacer lo mismo que el assets de imagenes.
Se va a crear un archivo index.js dentro del root de componentes donde vas a importar todos los componentes y volverlos a exportar.
Para no duplicar info, ver issue: #2
Renaming project: Install React Native Rename Globaly
esa parte no va
Eso es del boilerplate nuestro
en tu caso no hace falta
No esta mal, pero hay una forma mejor de agregar varios estilos a un componente.
Los estilos se pueden pasar como objetos, o como un array de objetos.
Entonces esto te quedaria asi: style={[styles.input, props.style]}
Cambiar OBTUVE_DATOS
por GET_DATA_SUCCESS
para dar un ejemplo.
En general, cambiar todo lo que esté en español, a inglés.
Nunca escribas los estilos en linea, salvo que sea indispensable.
Es mejor tener todo el el archivo styles e importar y usar de ahi
ver: #4
No esta mal como lo estas implementando, pero para que sepas, en varios proyectos donde ocupanos RNavigation tenemos una carpeta en src que se llama navigation donde tenemos las rutas, los types, y las funciones mas comunes.
Luego te lo mostramos, no tenes que cambiar nada
Es bueno centralizar en endpoint. Ejemplo, puedes crear un archivo config
en la raíz de src
donde definas una constante con el endpoint y luego importes el endpoint donde lo necesitas usar
Al usar el fetch de este modo ( .then().catch()
) no va a tener en realidad efecto alguno dentro del try catch
. El modo correcto de usarlo sería más o menos así:
exampleFunction = async () => {
try {
const response = await fetch(bla bla bla);
const responseJson = await response.json();
dispatch({ bla bla bla });
} catch (error) {
//
}
}
Si algo malo sucede en alguno de los dos await
salta automáticamente al catch y no ejecuta la siguiente línea.
No es bueno usar un map para generar un scroll con conponentes, te recomiendo usar esto
https://www.google.com/search?client=firefox-b-d&q=flatlist+react+native
Ademas de mejoras en cuando a componente, hay metodos que son muy utiles
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.