This document provides an introduction to React Native. It begins with an overview of what React Native is and how it allows React code to render natively on iOS and Android using a JavaScript bridge. It then discusses starting a new project using create-react-native-app or react-native init. The rest of the document outlines the roadmap, covering working with styles, layouts, lists, navigation, networking and touching the native side.
How native is React Native? | React Native vs Native App DevelopmentDevathon
As a popular development framework, React Native helps you to develop near-native mobile apps. Find out all the differences between React Native and Native App Development:
https://devathon.com/blog/how-native-is-react-native-vs-native-app-development/
#reactjs #app #tech #software #developer #Mobile
An intro to React Native using react-native cli, styled components, react-navigation, and an an introduction to the react native ecosystem.
Example repo: https://github.com/ladyleet/fluentConf2
Have questions? Tweet me http://twitter.com/ladyleet
by Nader Dabit, Developer Advocate, AWS
We want to complement our awesome web site with an equally awesome mobile application for both iOS and Android that can be deployed from the mobile app stores. In this session, Nader Dabit will take you from Hello World to building a beautiful responsive mobile application using React Native.
How native is React Native? | React Native vs Native App DevelopmentDevathon
As a popular development framework, React Native helps you to develop near-native mobile apps. Find out all the differences between React Native and Native App Development:
https://devathon.com/blog/how-native-is-react-native-vs-native-app-development/
#reactjs #app #tech #software #developer #Mobile
An intro to React Native using react-native cli, styled components, react-navigation, and an an introduction to the react native ecosystem.
Example repo: https://github.com/ladyleet/fluentConf2
Have questions? Tweet me http://twitter.com/ladyleet
by Nader Dabit, Developer Advocate, AWS
We want to complement our awesome web site with an equally awesome mobile application for both iOS and Android that can be deployed from the mobile app stores. In this session, Nader Dabit will take you from Hello World to building a beautiful responsive mobile application using React Native.
Presentation used for my session on Facebook Developer Circle Chennai - React Native for beginners meetup.
Repository for code files can be found at https://github.com/DaniAkash/FBDevCChennai-ReactNative-for-beginners
Event website: https://fbdc-chennai-1.splashthat.com/
Intro To React Native
with Varun Vachhar
OVERVIEW
React Native introduces a new way to write native mobile apps. You can take everything that you know and love about React and apply it to native apps. Unlike hybrid apps, it gives you access to both native APIs and UI components. The application logic uses JavaScript whereas, the UI is fully native! It also brings the best of the web to native, things like – flexbox layout model, XMLHttpRequest, requestAnimationFrame, etc.
OBJECTIVE
To introduce the audience to React Native. Show how they can leverage their knowledge of web development to build native apps.
TARGET AUDIENCE
Developers familiar with React who are interested in building native mobile apps.
ASSUMED AUDIENCE KNOWLEDGE
Basic knowledge of React, ES6 and CSS.
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
What is React Native
How it is an extension of hybrid
How to use polyfills to leverage the best of the web while getting native performance
How to debug React Native apps
How to use Flexbox and CSS for styling a React Native app
Presentation covers the concept of hybrid mobile application development as well the examples, A better way to start developing applications for all platform in amount of just one, The future of application development.
What is React-Native?
Why React-Native?
How React-Native works in detail?
- Metro bundler
- Main Thread
- Shadow Thread
- Javascript Thread
Yoga Engine
Threads Communication in React-Native
Comparison with Flutter and Native
React-Native Components
A session delivered by @amahdy7 from Finland over Hangout in GDG Helwan DevFest16 that toke place in the Modern Academy in Maadi
The slides discuss the power of Flutter and how to start develop with it
Flutter overview - advantages & disadvantages for businessBartosz Kosarzycki
After half a year experience with Fluttter, two internal projects and one commercial one, we'd like to share our view on what FLUTTER as a framework gives developers and businesses alike.
We can know about what is mobile application. Especially we can know about Hybrid Mobile Application.
Hybrid mobile Application's Overview information and few thing about Native and Web mobile applications.
We'll take a close look at React Native & learn about why you may want to consider the framework for your next cross platform mobile application.
Speaker: Nader Dabit
Lets Flutter - Talk on flutter in Google IO Extended in Google Developer Group Mumbai.
This has a detailed view of flutter and comparison of React native vs Flutter vs Native app development
Supporting slides of my introductory workshop about React Native in React Alicante 2017.
Source code & Exercises: https://github.com/Limenius/workshop-react-native
Presentation used for my session on Facebook Developer Circle Chennai - React Native for beginners meetup.
Repository for code files can be found at https://github.com/DaniAkash/FBDevCChennai-ReactNative-for-beginners
Event website: https://fbdc-chennai-1.splashthat.com/
Intro To React Native
with Varun Vachhar
OVERVIEW
React Native introduces a new way to write native mobile apps. You can take everything that you know and love about React and apply it to native apps. Unlike hybrid apps, it gives you access to both native APIs and UI components. The application logic uses JavaScript whereas, the UI is fully native! It also brings the best of the web to native, things like – flexbox layout model, XMLHttpRequest, requestAnimationFrame, etc.
OBJECTIVE
To introduce the audience to React Native. Show how they can leverage their knowledge of web development to build native apps.
TARGET AUDIENCE
Developers familiar with React who are interested in building native mobile apps.
ASSUMED AUDIENCE KNOWLEDGE
Basic knowledge of React, ES6 and CSS.
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
What is React Native
How it is an extension of hybrid
How to use polyfills to leverage the best of the web while getting native performance
How to debug React Native apps
How to use Flexbox and CSS for styling a React Native app
Presentation covers the concept of hybrid mobile application development as well the examples, A better way to start developing applications for all platform in amount of just one, The future of application development.
What is React-Native?
Why React-Native?
How React-Native works in detail?
- Metro bundler
- Main Thread
- Shadow Thread
- Javascript Thread
Yoga Engine
Threads Communication in React-Native
Comparison with Flutter and Native
React-Native Components
A session delivered by @amahdy7 from Finland over Hangout in GDG Helwan DevFest16 that toke place in the Modern Academy in Maadi
The slides discuss the power of Flutter and how to start develop with it
Flutter overview - advantages & disadvantages for businessBartosz Kosarzycki
After half a year experience with Fluttter, two internal projects and one commercial one, we'd like to share our view on what FLUTTER as a framework gives developers and businesses alike.
We can know about what is mobile application. Especially we can know about Hybrid Mobile Application.
Hybrid mobile Application's Overview information and few thing about Native and Web mobile applications.
We'll take a close look at React Native & learn about why you may want to consider the framework for your next cross platform mobile application.
Speaker: Nader Dabit
Lets Flutter - Talk on flutter in Google IO Extended in Google Developer Group Mumbai.
This has a detailed view of flutter and comparison of React native vs Flutter vs Native app development
Supporting slides of my introductory workshop about React Native in React Alicante 2017.
Source code & Exercises: https://github.com/Limenius/workshop-react-native
JS Fest 2018. Илья Иванов. Введение в React-NativeJSFestUA
Создание нативных мобильных приложений с помощью JavaScript? Без регистрации и WebView? Этот доклад покажет как работает React-Native и заглянет под его капот. Для решения каких задач он был реализован и какие у него существую достоинства и ограничения. Но сперва разберем чем React-Native отличается от гибридных (Hybrid Apps) и прогрессивных (Progressive Web Apps) подходов.
Learn basic architecture principles of React-Native, how it works and what exactly is the process of creating native mobile applications with JavaScript.
How to implement multiple layouts using React router V4.pptxBOSC Tech Labs
in this article, you will learn how to add multiple layouts using the new version of React router v4. You will see complete details about React router and a step-by-step guide to implementing the multiple layouts using React router v4.
Introduction to React in combination with Redux. Redux helps you to develop applications in a simple way while having features like time-travel available during development.
Workshop Apps with ReactNative I:
- What is React Native?
- Native Components
- Asynchronous execution
- Debugging
- Live Reload/Hot reload
- Flexbox and styling
- It’s just a JS framework!
- Native Components
- Native APIs
- Native modules
- Some Thoughts on Production Development
Presentado por ingeniero Jordi Serra
React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about — learn once, write anywhere.
React has been named the front-end library to learn in 2016! React Native has also picked up tremendous steam as a way to build cross-platform apps with React. In this talk, Rami will do a quick 5 minute introduction to React's core concepts. Following, Rami will introduce React Native, discuss the differences between React & React Native, and show you how to build a simple Android application. By the end of this talk, you will have a greater grasp of the ecosystem and leave with new tools in your developer arsenal.
Talk delivered at the Munich PHP User Group. An overview of the features of Elixir that may be more interesting for a PHP developer, so we focus in the platform, the cheap processes of the Erlang Virtual Machine, the philosophy of Let It Crash and how to model problems with trees of processes, and possible use cases.
Server Side Rendering of JavaScript in PHPIgnacio Martín
What is SSR, which problems does it solve, why do it in PHP, what options do we have for it, libraries that are available and tips and tricks. Practical code examples for Symfony and React.js, but the fundamental points can be taken away to use in other stacks like Vue and Laravel.
Redux is a powerful tool to manage our state. Can we use the same concepts in the server side so we can share the same store with users using our app at the same time in games or collaborative apps? We will see how to connect our Redux store to stores in the server side written in Node.js and Elixir OTP GenServers, and how to extend this perspective beyond particular implementations.
Talk presented in AgentConf'18
Los JSON Web Tokens son una forma muy práctica de asegurar nuestras APIs.
En esta charla veremos cuáles son sus propiedades fundamentales, cómo trabajar con ellos y qué opciones tenemos en Symfony, tanto con librerías, como con LexikJWTAuthenticationBundle y su uso del componente Guard.
Redux saga: managing your side effects. Also: generators in es6Ignacio Martín
Explanation of redux-saga for its use in React and React Native. Contains an explanation about ES6 generators, used in sagas, with emphasis in generators to manage async code.
s React.js a library or a framework? In any case, it is a new way of working that represents a revolution in the way of building web projects. It has very particular characteristics that allow us, for instance, to render React code from the server side, or to include React components from Twig tags. During this talk we will present React.js, we will explore how to take advantage of it from PHP projects and we will give answers to practical problems such as universal (isomorphical) rendering and the generation of React.js forms from Symfony forms without duplication of efforts.
Explanation of the fundamentals of Redux with additional tips and good practices. Presented in the Munich React Native Meetup, so the sample code is using React Native. Additional code: https://github.com/nacmartin/ReduxIntro
Keeping the frontend under control with Symfony and WebpackIgnacio Martín
Webpack tutorial with tips for Symfony users. Topics covered include: current frontend trends, setup, loaders, dev tools, optimization in production, bundle splitting and tips and tricks for using webpack with existing projects.
Symfony Munich Meetup 2016.
Integrando React.js en aplicaciones Symfony (deSymfony 2016)Ignacio Martín
Introducción a React.js + técnicas y conceptos útiles, como aplicaciones universales (isomórficas) o cómo usar json schema para facilitarnos la vida al trabajar con formularios.
Talk presented at Codemotion 2015.
Although the Request/Response pattern has allowed to build applications that were inconceivable when HTTP was invented, there is an increasing demand of solutions that require to push information to browsers or mobile clients as soon as it is available, using technologies like WebSockets. This has applications in messaging, notifications, games, IoT and collaborative apps, among others.
In this talk we will present the solutions available like socket.io, Faye, Pusher, PubNub or Carotene, how to integrate such services with existent or new codebases, its advantages, the challenges we will find and how to succeed bringing realtime communications to the table.
Code reviews are vital for ensuring good code quality. They serve as one of our last lines of defense against bugs and subpar code reaching production.
Yet, they often turn into annoying tasks riddled with frustration, hostility, unclear feedback and lack of standards. How can we improve this crucial process?
In this session we will cover:
- The Art of Effective Code Reviews
- Streamlining the Review Process
- Elevating Reviews with Automated Tools
By the end of this presentation, you'll have the knowledge on how to organize and improve your code review proces
Graspan: A Big Data System for Big Code AnalysisAftab Hussain
We built a disk-based parallel graph system, Graspan, that uses a novel edge-pair centric computation model to compute dynamic transitive closures on very large program graphs.
We implement context-sensitive pointer/alias and dataflow analyses on Graspan. An evaluation of these analyses on large codebases such as Linux shows that their Graspan implementations scale to millions of lines of code and are much simpler than their original implementations.
These analyses were used to augment the existing checkers; these augmented checkers found 132 new NULL pointer bugs and 1308 unnecessary NULL tests in Linux 4.4.0-rc5, PostgreSQL 8.3.9, and Apache httpd 2.2.18.
- Accepted in ASPLOS ‘17, Xi’an, China.
- Featured in the tutorial, Systemized Program Analyses: A Big Data Perspective on Static Analysis Scalability, ASPLOS ‘17.
- Invited for presentation at SoCal PLS ‘16.
- Invited for poster presentation at PLDI SRC ‘16.
AI Genie Review: World’s First Open AI WordPress Website CreatorGoogle
AI Genie Review: World’s First Open AI WordPress Website Creator
👉👉 Click Here To Get More Info 👇👇
https://sumonreview.com/ai-genie-review
AI Genie Review: Key Features
✅Creates Limitless Real-Time Unique Content, auto-publishing Posts, Pages & Images directly from Chat GPT & Open AI on WordPress in any Niche
✅First & Only Google Bard Approved Software That Publishes 100% Original, SEO Friendly Content using Open AI
✅Publish Automated Posts and Pages using AI Genie directly on Your website
✅50 DFY Websites Included Without Adding Any Images, Content Or Doing Anything Yourself
✅Integrated Chat GPT Bot gives Instant Answers on Your Website to Visitors
✅Just Enter the title, and your Content for Pages and Posts will be ready on your website
✅Automatically insert visually appealing images into posts based on keywords and titles.
✅Choose the temperature of the content and control its randomness.
✅Control the length of the content to be generated.
✅Never Worry About Paying Huge Money Monthly To Top Content Creation Platforms
✅100% Easy-to-Use, Newbie-Friendly Technology
✅30-Days Money-Back Guarantee
See My Other Reviews Article:
(1) TubeTrivia AI Review: https://sumonreview.com/tubetrivia-ai-review
(2) SocioWave Review: https://sumonreview.com/sociowave-review
(3) AI Partner & Profit Review: https://sumonreview.com/ai-partner-profit-review
(4) AI Ebook Suite Review: https://sumonreview.com/ai-ebook-suite-review
#AIGenieApp #AIGenieBonus #AIGenieBonuses #AIGenieDemo #AIGenieDownload #AIGenieLegit #AIGenieLiveDemo #AIGenieOTO #AIGeniePreview #AIGenieReview #AIGenieReviewandBonus #AIGenieScamorLegit #AIGenieSoftware #AIGenieUpgrades #AIGenieUpsells #HowDoesAlGenie #HowtoBuyAIGenie #HowtoMakeMoneywithAIGenie #MakeMoneyOnline #MakeMoneywithAIGenie
Quarkus Hidden and Forbidden ExtensionsMax Andersen
Quarkus has a vast extension ecosystem and is known for its subsonic and subatomic feature set. Some of these features are not as well known, and some extensions are less talked about, but that does not make them less interesting - quite the opposite.
Come join this talk to see some tips and tricks for using Quarkus and some of the lesser known features, extensions and development techniques.
Introducing Crescat - Event Management Software for Venues, Festivals and Eve...Crescat
Crescat is industry-trusted event management software, built by event professionals for event professionals. Founded in 2017, we have three key products tailored for the live event industry.
Crescat Event for concert promoters and event agencies. Crescat Venue for music venues, conference centers, wedding venues, concert halls and more. And Crescat Festival for festivals, conferences and complex events.
With a wide range of popular features such as event scheduling, shift management, volunteer and crew coordination, artist booking and much more, Crescat is designed for customisation and ease-of-use.
Over 125,000 events have been planned in Crescat and with hundreds of customers of all shapes and sizes, from boutique event agencies through to international concert promoters, Crescat is rigged for success. What's more, we highly value feedback from our users and we are constantly improving our software with updates, new features and improvements.
If you plan events, run a venue or produce festivals and you're looking for ways to make your life easier, then we have a solution for you. Try our software for free or schedule a no-obligation demo with one of our product specialists today at crescat.io
Software Engineering, Software Consulting, Tech Lead, Spring Boot, Spring Cloud, Spring Core, Spring JDBC, Spring Transaction, Spring MVC, OpenShift Cloud Platform, Kafka, REST, SOAP, LLD & HLD.
Do you want Software for your Business? Visit Deuglo
Deuglo has top Software Developers in India. They are experts in software development and help design and create custom Software solutions.
Deuglo follows seven steps methods for delivering their services to their customers. They called it the Software development life cycle process (SDLC).
Requirement — Collecting the Requirements is the first Phase in the SSLC process.
Feasibility Study — after completing the requirement process they move to the design phase.
Design — in this phase, they start designing the software.
Coding — when designing is completed, the developers start coding for the software.
Testing — in this phase when the coding of the software is done the testing team will start testing.
Installation — after completion of testing, the application opens to the live server and launches!
Maintenance — after completing the software development, customers start using the software.
AI Pilot Review: The World’s First Virtual Assistant Marketing SuiteGoogle
AI Pilot Review: The World’s First Virtual Assistant Marketing Suite
👉👉 Click Here To Get More Info 👇👇
https://sumonreview.com/ai-pilot-review/
AI Pilot Review: Key Features
✅Deploy AI expert bots in Any Niche With Just A Click
✅With one keyword, generate complete funnels, websites, landing pages, and more.
✅More than 85 AI features are included in the AI pilot.
✅No setup or configuration; use your voice (like Siri) to do whatever you want.
✅You Can Use AI Pilot To Create your version of AI Pilot And Charge People For It…
✅ZERO Manual Work With AI Pilot. Never write, Design, Or Code Again.
✅ZERO Limits On Features Or Usages
✅Use Our AI-powered Traffic To Get Hundreds Of Customers
✅No Complicated Setup: Get Up And Running In 2 Minutes
✅99.99% Up-Time Guaranteed
✅30 Days Money-Back Guarantee
✅ZERO Upfront Cost
See My Other Reviews Article:
(1) TubeTrivia AI Review: https://sumonreview.com/tubetrivia-ai-review
(2) SocioWave Review: https://sumonreview.com/sociowave-review
(3) AI Partner & Profit Review: https://sumonreview.com/ai-partner-profit-review
(4) AI Ebook Suite Review: https://sumonreview.com/ai-ebook-suite-review
A Study of Variable-Role-based Feature Enrichment in Neural Models of CodeAftab Hussain
Understanding variable roles in code has been found to be helpful by students
in learning programming -- could variable roles help deep neural models in
performing coding tasks? We do an exploratory study.
- These are slides of the talk given at InteNSE'23: The 1st International Workshop on Interpretability and Robustness in Neural Software Engineering, co-located with the 45th International Conference on Software Engineering, ICSE 2023, Melbourne Australia
Need for Speed: Removing speed bumps from your Symfony projects ⚡️Łukasz Chruściel
No one wants their application to drag like a car stuck in the slow lane! Yet it’s all too common to encounter bumpy, pothole-filled solutions that slow the speed of any application. Symfony apps are not an exception.
In this talk, I will take you for a spin around the performance racetrack. We’ll explore common pitfalls - those hidden potholes on your application that can cause unexpected slowdowns. Learn how to spot these performance bumps early, and more importantly, how to navigate around them to keep your application running at top speed.
We will focus in particular on tuning your engine at the application level, making the right adjustments to ensure that your system responds like a well-oiled, high-performance race car.
Custom Healthcare Software for Managing Chronic Conditions and Remote Patient...Mind IT Systems
Healthcare providers often struggle with the complexities of chronic conditions and remote patient monitoring, as each patient requires personalized care and ongoing monitoring. Off-the-shelf solutions may not meet these diverse needs, leading to inefficiencies and gaps in care. It’s here, custom healthcare software offers a tailored solution, ensuring improved care and effectiveness.
Mobile App Development Company In Noida | Drona InfotechDrona Infotech
Looking for a reliable mobile app development company in Noida? Look no further than Drona Infotech. We specialize in creating customized apps for your business needs.
Visit Us For : https://www.dronainfotech.com/mobile-application-development/
Essentials of Automations: The Art of Triggers and Actions in FMESafe Software
In this second installment of our Essentials of Automations webinar series, we’ll explore the landscape of triggers and actions, guiding you through the nuances of authoring and adapting workspaces for seamless automations. Gain an understanding of the full spectrum of triggers and actions available in FME, empowering you to enhance your workspaces for efficient automation.
We’ll kick things off by showcasing the most commonly used event-based triggers, introducing you to various automation workflows like manual triggers, schedules, directory watchers, and more. Plus, see how these elements play out in real scenarios.
Whether you’re tweaking your current setup or building from the ground up, this session will arm you with the tools and insights needed to transform your FME usage into a powerhouse of productivity. Join us to discover effective strategies that simplify complex processes, enhancing your productivity and transforming your data management practices with FME. Let’s turn complexity into clarity and make your workspaces work wonders!
Transform Your Communication with Cloud-Based IVR SolutionsTheSMSPoint
Discover the power of Cloud-Based IVR Solutions to streamline communication processes. Embrace scalability and cost-efficiency while enhancing customer experiences with features like automated call routing and voice recognition. Accessible from anywhere, these solutions integrate seamlessly with existing systems, providing real-time analytics for continuous improvement. Revolutionize your communication strategy today with Cloud-Based IVR Solutions. Learn more at: https://thesmspoint.com/channel/cloud-telephony
2. Nacho Martin
I write code at Limenius.
We build tailor-made projects,
and provide consultancy
and formation.
We are very happy with React and React Native.
12. How is this possible
Reconciliation
Determines what parts
of the tree have changed
13. How is this possible
Reconciliation
Determines what parts
of the tree have changed
Rendering
Actually
updates the app
14. How is this possible
Reconciliation
Determines what parts
of the tree have changed
Rendering
Actually
updates the app
We can have several
renderers
18. React targets
Main
react-dom react-native
Web iOS android
But also
react-art react-canvas react-three ReactLibertyreact-worker-dom
react-konsul raxreact-native react-blessedreact-tvml
19. React targets
Main
react-dom react-native
Web iOS android
But also
react-art react-canvas react-three ReactLibertyreact-worker-dom
react-konsul raxreact-native react-blessedreact-tvml
React-GLreact-vr react-hardware react-fs-renderer react-x11
20. React targets
Main
react-dom react-native
Web iOS android
But also
react-art react-canvas react-three ReactLibertyreact-worker-dom
react-konsul raxreact-native react-blessedreact-tvml
React-GLreact-vr react-hardware react-fs-renderer react-x11
redocx react-titanium React-Gibbon react-pdf react-test-renderer
21. React targets
Main
react-dom react-native
Web iOS android
But also
react-art react-canvas react-three ReactLibertyreact-worker-dom
react-konsul raxreact-native react-blessedreact-tvml
React-GLreact-vr react-hardware react-fs-renderer react-x11
redocx react-titanium React-Gibbon react-pdf react-test-renderer
ink react-sketchapp
22. React targets
Main
react-dom react-native
Web iOS android
But also
react-art react-canvas react-three ReactLibertyreact-worker-dom
react-konsul raxreact-native react-blessedreact-tvml
React-GLreact-vr react-hardware react-fs-renderer react-x11
redocx react-titanium React-Gibbon react-pdf react-test-renderer
ink react-sketchapp
And more
27. How Native is React Native?
JS Thread
Business logic &
Description of what
components to render
28. How Native is React Native?
JS Thread Main Thread
UI manipulation
with native
components
Business logic &
Description of what
components to render
29. How Native is React Native?
JS Thread Main Thread
UI manipulation
with native
components
Business logic &
Description of what
components to render
Bridge
30. How much code can we reuse?
Tip: if you develop in one platform,
test the app in the other from time to time
70%? 80%? 90%?
33. Option 1: create-react-native-app
Only JS, no iOS or Android code
(outside node_modules)
If you want to modify native code, $ npm run eject
Uses the Expo app to test in real device
Meant to have a quick way of trying
react-native
35. Option 2: react-native init
Complete project with native code
More control
Needed to use things like CodePush
Doesn’t need external tools to publish to
the store
40. Play around
Open app/App.js with an editor
<Text style={styles.welcome}>Hi there!</Text>Change the text in
Try nesting
<Text>
<Text style={styles.welcome}>Hi there!</Text>
Amigo
</Text>
Try changing some styles
welcome: {
fontSize: 100,
textAlign: 'center',
margin: 10,
},
Try placing a console.log(‘hi’) before return(… and see it in
Chrome dev tools
https://www.slideshare.net/nachomartin/react-native-workshop-react-alicante
41. Familiarize with errors
What happens if we…
remove a closing tag (</View>)
<View style={styles.container}>
Hi there!
</View>
put text not wrapped in <Text/>
try to comment a JSX line with //
return (
<View style={styles.container}>
<Text style={styles.welcome}>Hi there!</Text>
</View>
<View/>
)
have two root elements
use wrong properties for styles ( rename flex -> flexo )
remove the words export default
45. Exercise: Build new components
Can you build a new component combining others?
Ideas: Image with footer (<Text/>), two buttons that display different alerts
Can you pass props to that component?
Ideas: Pass the text of the footer with props, pass also the image, pass the titles of the buttons
Can your build a component with local state?
Ideas: Modify the counter to have a “minus 1” button
47. No CSS. Everything is JS
<View style={{
borderLeftColor: Colors.accent,
borderLeftWidth: 9,
backgroundColor: Colors.backgroundSection,
padding: 18,
paddingVertical: 9,
}}>
No class
No dimensions in pixels
No things like padding: 19 9 3 1
camelCased
Use constants
55. Exercise 2
FontSizes.gigantic
Colors.background
Container has: a background with color: Colors.highlight
components/MainHeader.js
Image is 40x90
FontSizes.subhead
With weight ‘200’
Colors.background
Pro exercise:Think how would you add support for themes
57. Dimensions
import {
Dimensions,
} from 'react-native'
const windowSize = Dimensions.get('window')
mainImage: {
height: windowSize.height /3,
width: undefined
},
Our image height depends on the
Height of the window
Use sparingly
components/MovieHeader.js
58. Dimensions
import {
Dimensions,
} from 'react-native'
const windowSize = Dimensions.get('window')
mainImage: {
height: windowSize.height /3,
width: undefined
},
Our image height depends on the
Height of the window
Use sparingly
Exercise: Can you make another style dependant of
Dimensions?
What will happen if the device is rotated?
Can you find anything in the documentation to fix it?
components/MovieHeader.js
78. Exercise 2
Hint: create subviews if you need them
Optional: can you come up with a different layout for any of our three components?
app/components/MainHeader.js
82. Naive lists, as in the web
export default class Movie extends Component {
constructor(props) {
super(props)
this.state = {
movie: movies.find((movie) => movie.name === 'Pulp Fiction')
}
}
render() {
return (
<View>
<MovieHeader movie={this.state.movie}/>
{ this.state.movie.actors.map(actor => (
<ListItem key={actor} name={actor} image={actors[actor].image}/>
))}
</View>
)
}
}
app/components/Movie.js
83. Naive lists, as in the web
export default class Movie extends Component {
constructor(props) {
super(props)
this.state = {
movie: movies.find((movie) => movie.name === 'Pulp Fiction')
}
}
render() {
return (
<View>
<MovieHeader movie={this.state.movie}/>
{ this.state.movie.actors.map(actor => (
<ListItem key={actor} name={actor} image={actors[actor].image}/>
))}
</View>
)
}
}
Important to help the reconciler do its work
app/components/Movie.js
84. Exercise
git checkout lists
Can you build a list of movies in
app/components/MovieList.js ?
(To discard your changes)
git reset HEAD --hard
85. FlatList
Highly optimized List component
Features:
• Scroll loading (onEndReached).
• Pull to refresh (onRefresh / refreshing).
• Configurable viewability (VPV) callbacks (onViewableItemsChanged / viewabilityConfig).
• Horizontal mode (horizontal).
• Intelligent item and section separators.
• Multi-column support (numColumns)
• scrollToEnd, scrollToIndex, and scrollToItem
• Better Flow typing.
95. Exercise
Can you use FlatList in
app/components/MovieList.js ?
git checkout flatLists
item => item
reminder
In this case works as
function(item) {
return item
}
git reset HEAD —hard
(To discard your changes)
109. Exercise
Can you make a navigation transition from Movie to
app/components/Actor ?
Steps:
- Declare the screen in app/App.js
- Use a TouchableHighlight to capture onPress in the actors
list of <Movie/>
- Provide an appropriate title in <Actor/>
- Make the actor displayed based on
props.navigation.state.params.name
Optional: have a look at
https://reactnavigation.org/docs/en/stack-navigator.html
And tweak the navigation (Ideas: mode modal, add something to headerRight)
122. Let’s do it
"rnpm": {
"assets": ["./assets/fonts/"]
}
package.json
git checkout mod-native
(To discard your changes)
git reset HEAD --hard
(Expo users: https://docs.expo.io/versions/latest/guides/using-custom-fonts)
123. Let’s do it
"rnpm": {
"assets": ["./assets/fonts/"]
}
package.json
react-native link
git checkout mod-native
(To discard your changes)
git reset HEAD --hard
(Expo users: https://docs.expo.io/versions/latest/guides/using-custom-fonts)
124. Assets linked
Changes to be committed:
(use "git reset HEAD <file>..." to unstage)
new file: android/app/src/main/assets/fonts/OleoScript-Bold.ttf
new file: android/app/src/main/assets/fonts/OleoScript-Regular.ttf
modified: ios/travolta.xcodeproj/project.pbxproj
modified: ios/travolta/Info.plist
modified: package.json
125. Summary:
What is React Native
Starting a project
Working with Styles
Layout
Lists
Navigation
Networking
Touching the native side