Skip to content

React Native

Jump to bottom
Philippe Cohen edited this page Sep 15, 2016 · 39 revisions

Key concepts

About react main features that are important to know in JavaScript

  • JSX is a way to insert markup (html like) into JavaScript. The interesting idea in JSX is that rather than inserting script in html (like in most web framework PHP, ASP.NET,...) they do make the JS the main thing and the markup a outcome.
  • React components that are JS classes inheriting from React Component class to render the JSX/HTML
  • [AppRegistry] (https://facebook.github.io/react-native/docs/appregistry.html) is used to define the root class that is the top level component that launch the application. notice: The first arg in the function AppRegistry.registerComponent must be like the name of the package, (the name that you wrote in the command: react-native init )

Additional concepts

  • Props are static parameters set at the component instanciation
  • State are dynamic paramters that are changed within the class via setState() function
  • [Style] (https://facebook.github.io/react-native/docs/style.html) that are an alternative to CSS so we stay in pure JS
  • [Height and width and layout] (https://facebook.github.io/react-native/docs/height-and-width.html) based on CSS3 Flex or [guide to flexbox] (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) that enable to control the portion of screen used by each sub-component. You can define the flex direction (= primary axis of the layout) and the distribution of the child elements (center, start, end, space around or just between sub-elements)
  • InputText is a place to input text. Use the function onChangeText or onSubmitEditing to use text input.
  • ScrollView is a generic scrolling container that can host multiple components and views.
  • ListView Came to be used large lists. the ListView only renders elements that are currently showing on the screen, not all the elements at once. This saves on place of data.
  • Networking Based on Web fetch API, or alternately on XMLHttpRequest. Supports websocket and upcoming JS7 await/asynch.

Weird things to know

React can either render: HTML tags and React component, HTML tag must begin with a lower-case vs. React compenent that must begin with upper-case letter.

Native modules

  • Extend FB react Java base class ReactContextBaseJavaModule
  • Implement the following callbacks
  • getName to return the JS class name that is unrelated to the Java class name
  • getConstants (optional) will return constant values
  • @ReactMethod annotation to mark a method exposed in JS. Note that all methods returns void since React Native bridge is asynchroneous.
  • Argument mapping is defined here
  • Registration Is done via subclassing ReactPackage and implementing 'createNativeModules'. Other registrations are possible
  • In the android/app/src/main/java/com/your-app-name/MainApplication.java you must add your package in addition to React Main Package.
  • There is more to learn in the React documentation: Native modules

Tools

  • React Web Player enables to write RN code on the browser and to see the result on a dummy device simulator.

Libraries

  • Lodash A modern JavaScript utility library delivering modularity, performance, & extras, with arrays, numbers, objects, strings, etc.

Auto display

If you run and build your app previous you need to find the apk and use the command adb install , otherwise you need to use the command react-native run-andorid to run and build your app

Learning resources

Knowledge is hope

Clone this wiki locally