Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Intro to React Native

Ahmet
March 09, 2017

Intro to React Native

An intro talk that I gave to my colleagues in our Tech Talks Session

Ahmet

March 09, 2017
Tweet

More Decks by Ahmet

Other Decks in Programming

Transcript

  1. how ! A React Native App is a Real Mobile

    App • not “mobile web app”, an “HTML5 app”, or a “hybrid app”. • indistinguishable from an app built using Objective-C or Java. • same fundamental UI building blocks as regular iOS and Android apps.
  2. install ! 1. Homebrew 2. brew install node 3. brew

    install watchman 1 4. npm install -g react-native-cli 2 5. Xcode or Android Studio 2 The React Native CLI 1 Watchman is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance.
  3. components • Anything you see on the screen is some

    sort of component. • the only thing that's required is a render function which returns some JSX to render.
  4. props • Most components can be customized when they are

    created, with different parameters. These creation parameters are called props. • For example, one basic React Native component is the Image. When you create an image, you can use a prop named source to control what image it shows.
  5. state • There are two types of data that control

    a component: props and state. props are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use state. • In general, you should initialize state in the constructor, and then call setState when you want to change it.
  6. style • All of the core components accept a prop

    named style. • The style names and values usually match how CSS works on the web, except names are written using camel casing, e.g backgroundColor rather than background-color.
  7. networking React Native provides the Fetch API for your networking

    needs. fetch('https://mywebsite.com/endpoint/', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ firstParam: 'yourValue', secondParam: 'yourOtherValue', }) })
  8. Development Tools • Nuclide is the IDE that Facebook uses

    internally for React Native development. The killer feature of Nuclide is its debugging ability. It also has great inline Flow support. • Ignite is a starter kit that uses Redux and a few different common UI libraries. It has a CLI to generate apps, components, and containers. If you like all of the individual tech choices, Ignite could be perfect for you. • CodePush is a service from Microsoft that makes it easy to deploy live updates to your React Native app. If you don't like going through the app store process to deploy little tweaks, and you also don't like
  9. Development Tools • Exponent is a development environment plus application

    that focuses on letting you build React Native apps in the Exponent development environment, without ever touching Xcode or Android Studio. If you wish React Native was even more JavaScripty and webby, check out Exponent. • Deco is an all-in-one development environment specifically designed for React Native. It can automatically set up a new project, search for open source components, and insert them. You can also tweak your app graphically in real time. Check it out if you use macOS.