Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ReactJS + ReactNative = React Developer

873 views

Published on

Qué es Reactjs y React Native. Como facebook le planta cara a Google y entra en la guerra de las librerías y frameworks de javascript.

Published in: Software
  • Be the first to comment

ReactJS + ReactNative = React Developer

  1. 1. Dany Paredes y Oriol Puig ReactJS + React Native = React Developer Mobile World Centre · FOURSESSIONS 20 - Febrero #4Sessions
  2. 2. www.pasiona.com (+34) 669 333 333 info@pasiona.com @pasiona Barcelona Pujades 350, 10ª planta 08019 · Barcelona Bilbao Gran Vía 19-21, 2ª planta 48008 · Bilbao Londres 1 Northumberland Avenue London · WC2N 5BW Madrid Pinar 5, 28006 · Madrid
  3. 3. Conocimiento adquirido a través de la realización de proyectos, formación e innovación tecnológica Innovación ligada a la mejora continua y basada en las nuevas oportunidades tecnológicas Tecnología soluciones a cada una de las necesidades empresariales que se platean en cada ámbito Valores humanos guía de lo que hacemos y pretendemos que nos enseña y nos conduce día a día Pasión somos grandes entusiastas de todo aquello que creamos y vemos crecer Experiencia o la garantía de la habilidad derivada de años de vivencias y observación Microsoft socio 100% alineado partner 100% especializado Desarrollo capacidad para realizar proyectos de ámbito tecnológico con un fin de mejora Especialización ofrecemos soluciones a medida con las mejores herramientas tecnológicas Qué es
  4. 4. Dany Paredes @danywalls Fullstack .NET & JS Developer Divulgador Tecnológico en Fundación Techdencias dparedes@pasiona.com danywalls@techdencias.net danywalls4@gmail.com @ Oriol Puig @oriolpuigbuil Junior Developer Divulgador Tecnológico en Fundación Techdencias opuig@pasiona.com oriolpuigbuil@techdencias.net oriol.puig90@gmail.com @
  5. 5. ReactJS
  6. 6. Agenda • ¿Qué es? • ¿Cuáles son sus objetivos? • ¿Qué son los componentes? • Otros detalles importantes… • Demo
  7. 7. ¿Qué es ReactJS?
  8. 8. Librería de Javascript para crear UI
  9. 9. librería != framework
  10. 10. ¿Cuáles son sus objetivos?
  11. 11. Que el proceso de desarrollo sea simple
  12. 12. Descargar el DOM Control de los datos Saber que ocurre en todo momento
  13. 13. ¿Qué son los componentes?
  14. 14. Pequeños snippets de código reusable. - Código encapsulado - Testing - Separación por conceptos Logramos:
  15. 15. <App /> <HelloWorld /> <Header /> <Form /> <CardList /> <CardItem />
  16. 16. Props & State Manejo de la data de los componentes
  17. 17. LifeCycle - componentWillMount() - componentDidMount() - componentWilUnMount() - componentWillReceiveProps(nextProps) - shouldComponentUpdate(nextProps, nextState) - componentWillUpdate(nextProps, nextState) - componentDidUpdate(prevProps, prevState) - render() * Manejar el Virtual DOM, controlar el estado del componente y integrar 3rd Party scripts
  18. 18. Esto me empieza a gustar… (Otros detalles importantes)
  19. 19. JSX Javascript XML que se compila dentro del componente
  20. 20. Virtual DOM Javascript es rápido, el DOM NO
  21. 21. Mmm, y esto se usa?
  22. 22. Demo https://github.com/techdencias/techdencias-react-sample
  23. 23. Glosario de enlaces • ReactJS - http://bit.ly/1DeA1tp • Sites with React - http://bit.ly/1fDlVcJ • React Boilerplate - http://bit.ly/214A6tr
  24. 24. React Native
  25. 25. Agenda • ¿Qué es? • ¿Por qué? • Los interiores + Demo • Lo guay y no tan guay
  26. 26. React Native Conocimiento de + para generar Interfaces Nativas para . Desarrollo: > APIs:
  27. 27. ¿Porqué React Native? • React Native traduce JSX en elementos nativos. • No es obligatorio usar Xcode o Android Studio. • Puedo usar todo mi conocimiento de React y Web en el desarrollo.
  28. 28. Los interiores
  29. 29. • JSX genera elementos nativos de UI •Tenemos una Intefaz nativa no un WebView (Ionic, Phonegap etc.. :P ) •React Native tiene una implementación de CSS pròpia. Los Interiores
  30. 30. Demo
  31. 31. Lo guay y no tan guay…
  32. 32. Muéstrame alguna app, no?
  33. 33. FB Groups FB Ads Manager DiscordApp CBS Sports Leanpub
  34. 34. Q&ADany Paredes @danywalls Fullstack .NET & JS Developer Divulgador Tecnológico en Fundación Techdencias dparedes@pasiona.com danywalls@techdencias.net danywalls4@gmail.com @ Oriol Puig @oriolpuigbuil Junior Developer Divulgador Tecnológico en Fundación Techdencias opuig@pasiona.com oriolpuigbuil@techdencias.net oriol.puig90@gmail.com @
  35. 35. Mobile World Centre · FOURSESSIONS | 20-Febrero #4Sessions

×