├── Introduction to React Native.pptx ├── README.md └── ~$Introduction to React Native.pptx /Introduction to React Native.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dabit3/react-native-bootcamp/aa870440999dd270cf4df2607ada903791cb5bf0/Introduction to React Native.pptx -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Native Bootcamp - Day 1 2 | 3 | ## Your first React Native App 4 | 5 | ### 1. Getting Started 6 | 7 | 1. Go to the React Native docs [Getting Started page](https://facebook.github.io/react-native/docs/getting-started.html), click on __Building Projects with Native Code__, & follow the documentation for getting set up on your operating system. 8 | 9 | 2. Create a new project using the `react-native init` command: 10 | 11 | ```bash 12 | react-native init MyProject 13 | ``` 14 | 15 | 3. Change into the new directory: 16 | 17 | ```bash 18 | cd MyProject 19 | ``` 20 | 21 | 4. To run your project on iOS, run the following command from the command line: 22 | 23 | ```bash 24 | react-native run-ios 25 | ``` 26 | 27 | To run your project on Android, first open an Android emulator, then run the following command: 28 | 29 | ```bash 30 | react-native run-android 31 | ``` 32 | 33 | ### 2. Project structure 34 | 35 | ``` 36 | MyProject 37 | │ 38 | └───android 39 | │ 40 | └───ios 41 | │ 42 | └───node_modules 43 | │ 44 | │ .babelrc 45 | │ .buckconfig 46 | │ .flowconfig 47 | │ .gitattributes 48 | │ .gitignore 49 | │ .watchmanconfig 50 | │ App.js 51 | │ app.json 52 | │ index.js 53 | │ package.json 54 | ``` 55 | 56 | #### Main things to know: 57 | 58 | __android__ 59 | 60 | This folder contains the Android project. To open this project in Android Studio, only open the Android folder. 61 | 62 | If changes are made in this project, the native code needs to be recompiled (`i.e. react-native run-android`). 63 | 64 | __ios__ 65 | 66 | This folder contains both the iOS as well as the Apple TV projects. Top open this project, open only the ios/MyProject.xcodeproj in Xcode. 67 | 68 | If changes are made in this project, the native code needs to be recompiled (`i.e. react-native run-ios`). 69 | 70 | __index.js__ - Main application entrypoint 71 | 72 | ```js 73 | import {AppRegistry} from 'react-native'; 74 | import App from './App'; 75 | import {name as appName} from './app.json'; 76 | 77 | 78 | AppRegistry.registerComponent(appName, () => App); 79 | // AppRegistry.registerComponent gets called only once per application 80 | // This function takes in two arguments: 81 | // First argument - The application name (here, we've imported the appName property from app.json) 82 | // Second argument - The main application component (App) 83 | ``` 84 | 85 | __App.js__ - This component contains the initial boilerplate for the project 86 | 87 | __.babelrc__ - This file allows you to update your babel configuration. To do so, install the babel dependency you're interested in using & then update this file with the new dependency 88 | 89 | __package.json__ - This file lists all dependencies of the project as well as scripts for running commands within the project 90 | 91 | __.flowconfig__ - Preconfigured settings for Flow (A typechecking system that is optional & not enabled by default) 92 | 93 | # Intro to React Native 94 | 95 | ## Basic Components 96 | 97 | React Native ships with over 30 UI components & over 40 native device APIs. 98 | 99 | UI components display UI along with some functionality, while native device APIs allow you to access native functionality. 100 | 101 | Let's take a look at a few components that we're introduced to in App.js: 102 | 103 | ```js 104 | import {Platform, StyleSheet, Text, View} from 'react-native'; 105 | ``` 106 | 107 | ### Text 108 | This component allows you to render text to the UI. If you've ever used a __span__, __p__, or __h1__ in HTML, you can think of a __Text__ component as being similar but without any default styling at all. 109 | 110 | Usage: 111 | 112 | ```js 113 | Hello World 114 | ``` 115 | 116 | ### View 117 | The most fundamental building block when building UIs in React Native. If you've ever used a __div__ in HTML, then you can think of a __View__ as a being very similar to a __div__. 118 | 119 | Usage: 120 | 121 | ```js 122 | 123 | Hello World 124 | 125 | ``` 126 | 127 | ### StyleSheet 128 | A StyleSheet is an abstraction similar to CSS StyleSheets 129 | 130 | You can style React components many different ways: 131 | ```js 132 | // inline 133 | Hello World 134 | 135 | // with object 136 | const styles = { 137 | text: { 138 | color: 'red' 139 | } 140 | } 141 | Hello World 142 | 143 | // an array 144 | Hello World 145 | ``` 146 | 147 | But, using the StyleSheet API is recommended for its performance benefits. Here's how we can implement the same styles using the StyleSheet API: 148 | 149 | ```js 150 | // with object 151 | const styles = StyleSheet.create({ 152 | text: { 153 | color: 'red' 154 | } 155 | }) 156 | Hello World 157 | 158 | // an array 159 | Hello World 160 | ``` 161 | 162 | ### Platform 163 | This component allows us to get information about the current device we're using. 164 | 165 | Basic usage: 166 | 167 | ```js 168 | Platform.OS // returns OS, i.e. ios, android, web, etc.. 169 | Platform.Version // returns Version, i.e. 11.2 170 | Platform.isIpad // returns boolean 171 | Platform.isTV // returns boolean 172 | Platform.isTVOS // returns boolean 173 | ``` 174 | 175 | Other usage: 176 | 177 | ```js 178 | // Platform.select 179 | const greeting = Platform.select({ 180 | ios: 'Hello from iOS', 181 | android: 'Hello from Android', 182 | default: 'Hello world' 183 | }) 184 | console.log(greeting) // Hello from iOS 185 | 186 | // platform specific styling 187 | const styles = StyleSheet.create({ 188 | container: { 189 | flex: 1, 190 | ...Platform.select({ 191 | ios: { 192 | backgroundColor: 'red', 193 | }, 194 | android: { 195 | backgroundColor: 'blue', 196 | }, 197 | default: { 198 | backgroundColor: 'orange' 199 | } 200 | }), 201 | }, 202 | }); 203 | ``` 204 | 205 | ## Intro to debugging 206 | 207 | Debugging your app is one of the most important things you need to know how to do in order to competently develop in React Native. Let's take a look at some ways to do this. 208 | 209 | ### Developer Menu 210 | 211 | To open the developer menu, click `CMD + d` in iOS or `CTRL + m` on Android. 212 | 213 | Here we have 7 options: 214 | 215 | - Reload 216 | - Debug JS Remotely 217 | - Enable Live Reload 218 | - Start Systrace 219 | - Enable Hot Reloading 220 | - Toggle Inspector 221 | - Show Perf Monitor 222 | 223 | #### Main things to know: 224 | 225 | - There is a shortcut for reloading: `CMD + r` on iOS or `m + m` on Android. 226 | - Debug JS Remotely is an easy way to debug & log your JS. This will open a browser window & you can then open developer console to debug. 227 | - Hot reloading is very powerful. 228 | - Toggle inspector is OK. Use the __Touchables__ functionality to highlight touchable components. 229 | - For more serious UI debugging, use [React Devtools](https://github.com/facebook/react-devtools) or [React Native Debugger](https://github.com/jhen0409/react-native-debugger) 230 | 231 | ## Other React Native "Good to knows" 232 | 233 | - You can use any text editor to develop for React Native. I recomment VS Code. 234 | - If you install a JavaScript dependency, you only need to refresh your app or at the most restart the packager to use the new package. 235 | - If you install a native dependency, you must first properly link the dependency & then rerun the native code in order to use it. 236 | - 80% of React Native is just knowing how to use React well 237 | - Keep in mind touchable space when developing for React Native but really mobile in general. 238 | 239 | 240 | ## Understanding React 241 | 242 | In React, everything can be thought of in terms of Components. 243 | 244 | A Component is a created using either a function or a class. 245 | 246 | Each component can return: 247 | 248 | A. A piece of UI 249 | B. A piece of UI with self-contained functionality (state, lifecycle methods, etc..) 250 | C. Self-contained funcationality without returning UI 251 | 252 | ### Creating a component using a class 253 | 254 | In App.js we see the following class generated for us as part of the initial project boilerplate code: 255 | 256 | ```js 257 | class App extends Component { 258 | render() { 259 | return ( 260 | 261 | Welcome to React Native! 262 | To get started, edit App.js 263 | {instructions} 264 | 265 | ); 266 | } 267 | } 268 | ``` 269 | 270 | As we can see, this component is was created using a class. 271 | 272 | When using a class, you have two main benefits: 273 | 274 | 1. Control of local state 275 | 2. Access to lifecycle methods 276 | 277 | In the above class, we have __no__ state but there is a lifecycle method: `render()` 278 | 279 | Let's update the component to have some state as well as hook into the other lifecycle methods: 280 | 281 | ```js 282 | class App extends Component { 283 | state = { greeting: 'Hello World' } // 1 284 | static getDerivedStateFromProps() { // 2 285 | console.log('getDerivedStateFromProps called') 286 | } 287 | componentDidMount() { // 4 288 | console.log('componentDidMount called') 289 | } 290 | render() { // 3 291 | return ( 292 | 293 | {this.state.greeting} 294 | 295 | ); 296 | } 297 | } 298 | ``` 299 | 300 | In the above component, we hook into all of the mounting lifefycle methods. You can see in the comments the order in which they are called. 301 | 302 | ### Creating a component using a function 303 | 304 | This same original App component can be rewritten as a function: 305 | 306 | ```js 307 | const App = () => 308 | 309 | Welcome to React Native! 310 | To get started, edit App.js 311 | {instructions} 312 | 313 | ``` 314 | 315 | The above function is created using an ES6 arrow function. 316 | 317 | The same function could be rewritten in ES5 this way: 318 | 319 | ```js 320 | var App = function() { 321 | return ( 322 | 323 | Welcome to React Native! 324 | To get started, edit App.js 325 | {instructions} 326 | 327 | ) 328 | } 329 | ``` 330 | 331 | These both work the same, but most documentation will use ES6 so it's good to know. 332 | 333 | To learn more about ES6 arrow functions click [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions). 334 | 335 | ### State 336 | 337 | State is one of two ways to handle dynamic data in your application, the other being props. 338 | 339 | The main difference is that state is controlled by class components, whereas props can be controlled in a multitude of ways. 340 | 341 | Let's take another look at a component with some basic state: 342 | 343 | ```js 344 | class App extends Component { 345 | state = { greeting: 'Hello World' } 346 | render() { 347 | return ( 348 | {this.state.greeting} 349 | ); 350 | } 351 | } 352 | ``` 353 | 354 | `this.state.greeting will be equal to `'Hello World'` in this component. 355 | 356 | What if we wanted to change the value of the state? 357 | 358 | We can do this, but we need to keep in mind 1 thing: In order to rerender the new value of the greeting, we need to rerender by triggering update lifecyle. 359 | 360 | That meains we can't simply do something like this: 361 | 362 | ```js 363 | changeName = () => { 364 | this.state.greeting = 'Hello, this is my new greeting!' 365 | } 366 | ``` 367 | 368 | The above function _would_ change the value of state.greeting, but the new value would not show up on the screen, to do that we need to trigger the render method. 369 | 370 | There are 3 ways to trigger a rerendering of a component: 371 | 1. Calling `setState()` 372 | 2. Calling `forceUpdate` (not recommended for most use cases) 373 | 3. Receiving new props into the component 374 | 375 | The best way to change the state in our circumstance would be to call `setState()` which will change the state as well as trigger an update lifecycle: 376 | 377 | 378 | ```js 379 | class App extends Component { 380 | state = { greeting: 'Hello World' } 381 | changeGreeting = () => { 382 | this.setState({ greeting: 'Hello, this is my new greeting!' }) 383 | } 384 | render() { 385 | return ( 386 | 387 | {this.state.greeting} 388 | Change Greeting 389 | 390 | ); 391 | } 392 | } 393 | ``` 394 | 395 | ### Props 396 | 397 | Let's take a look at how to use props. 398 | 399 | Instead of hard-coding values, we'll write a component that gets its data passed in as parameters known as "props" in React & React Native. 400 | 401 | #### Using props in a Class component 402 | 403 | ```js 404 | // creation 405 | class Person extends React.Component { 406 | render() { 407 | return ( 408 | Hello, my name is {this.props.name} 409 | ) 410 | } 411 | } 412 | 413 | // usage 414 | 415 | 416 | 417 | ``` 418 | 419 | #### Using props in a Functional component 420 | 421 | ```js 422 | // creation 423 | const Person = (props) => Hello, my name is {props.name} 424 | 425 | // usage 426 | 427 | ``` 428 | 429 | You may also use an ES6 destruturing assignment to get the individual props out of the function argument: 430 | 431 | ```js 432 | // creation 433 | const Person = ({ name }) => Hello, my name is {name} 434 | 435 | // usage 436 | 437 | ``` 438 | 439 | 440 | #### Dynamic props 441 | 442 | Props can also be dynamic: 443 | 444 | 445 | ```js 446 | const Person = ({ name }) => Hello, my name is {name} 447 | 448 | class App extends React.Component { 449 | state = { name: 'Amanda' } 450 | changeName = () => { 451 | this.setState({ name: 'Allison' }) 452 | } 453 | render() { 454 | return ( 455 | 456 | 457 | Change Name 458 | 459 | ) 460 | } 461 | } 462 | ``` -------------------------------------------------------------------------------- /~$Introduction to React Native.pptx: -------------------------------------------------------------------------------- 1 | Microsoft Office User Microsoft Office User --------------------------------------------------------------------------------