Victoria Quirante I write code at Limenius. We build tailor-made projects, and provide consultancy and formation. And we are very happy users of React and React Native.
Goal of the workshop To be able to estimate how long would it take you to create a first React Native project (and if you would enjoy it) A big part of it is the tooling
React targets Main react-dom react-native Web iOS android But also react-art react-canvas react-three ReactLiberty react-worker-dom react-konsul rax react-native react-blessed react-tvml
How Native is React Native? JS Thread Main Thread UI manipulation with native components Business logic & Description of what components to render Bridge
Option 1: expo 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
Option 2: react-native init Complete project with native code More control Needed to use things like AppCenter Doesn’t need external tools to publish to the store
Play around Open app/App.js with an editor Hi there! Change the text in Try nesting Hi there! Amigo
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
Exercise: Build new components Can you build a new component combining others? Ideas: Image with footer (), 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
No CSS. Everything is JS 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
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
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
Further reading https://www.okgrow.com/posts/react-native-styling-tips https://madebymany.com/stories/a-year-of-react-native-styling-part-1 https://emotion.sh/docs/@emotion/native Explore libraries to do CSS in JS
This is flexbox realm flexDirection justifyContent alignItems alignSelf flex alignContent flexBasis flexGrow flexShrink flexWrap flexDirection: ‘column' flexDirection: ‘row’ (Default) main direction cross direction
This is flexbox realm flexDirection justifyContent alignItems alignSelf flex alignContent flexBasis flexGrow flexShrink flexWrap flexDirection: ‘column' flexDirection: ‘row’ (Default) main direction cross direction cross direction main direction
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
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)
Further reading https://facebook.github.io/react-native/blog/2017/03/13/ better-list-views.html Read the docs of the components: FlatList SectionList VirtualizedList
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 - Provide an appropriate title in - 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)
Assets linked Changes to be committed: (use "git reset HEAD ..." 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
victoriaq
kubode
akatsuki174
ogijun2018
kanamasa
hcrane
heguro
masumitsu
johanjanssens
keitaro1020
mthiroshi00excite
ryunen344
coconala_engineer
maltzj
jeffersonlam
samanthasiow
chrisshort
morganepeng
zenorocha
keathley
colly
jacobian
shlominoach
brettharned
bkeepers