Skip to content

React Native

Jump to bottom
MiriamShmuelevitz edited this page Sep 6, 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.

Javascript 6 Syntax and Libraries

  • => operator used to create anonymous function that is useful in defining callbacks to write compact code
  • ... Spread syntax used to allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) or multiple variables (for destructuring assignment) are expected
  • The JS function map is a JS powerful standard function used to manipulate arrays through anonymous function

Tools

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

Libraries

  • Lowdash 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