React Native

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

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

JavaSscript 6 Syntax

• => operator used to create anonymous function that is useful in defining callbacks to write compact code
• 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.