React Native

React Native

Introduction:

JavaScript (JS) is a programming language mostly used client-side to dynamically script webpages, but often also server-side, using packages such as ReactNative.

Don't confuse JavaScript with the Java. Both "Java" and "JavaScript" are trademarks or registered trademarks of Oracle in the U.S. and other countries. However, the two programming languages have very different syntax, semantics, and uses.

Likewise,React is a Javascript framework created by Facebook for data driven web interfaces. React provides a component driven architecture which uses a declarative syntax and is easily extensible.

React Native is like React, but it uses native components instead of web components as building blocks. So to understand the basic structure of a React Native app, you need to understand some of the basic React concepts.

They are,

  • JSX
  • Components
  • State
  • Props


JSX:

JSX -- JavaScript XML

JSX is a preprocessor step that adds XML syntax to JavaScript. You can definitely use React without JSX, but JSX makes React a lot more elegant. Just like XML, JSX tags have a tag name, attributes, and children. If an attribute value is enclosed in quotes, the value is a string.

With React, it's an extension for XML-like code for elements and components. Per the React docs and as you mentioned: JSX is a XML-like syntax extension to ECMAScript without any defined semantics.

Components:

Components are the building blocks for a React Native application. A React Native user interface (UI) is specified by declaring components, possibly nested, and then those components are mapped to the native UI on the targeted platform. For Example,

  • View
  • Text
  • Image
  • TextInput
  • StyleSheet
  • Button
  • ScrollView
  • Picker
  • ListView
  • Slider
  • SectionList
  • FlatList

Props&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.

Pros:

  1. React Native uses Javascript. So, It is easy, fast and Popular programming language.
  2. It’s controls and modules improve the performance of the App.
  3. Improved User Interface.
  4. Same code can be used for both platforms(Android and iOS).

Cons:

  1. Documentation is poor
  2. Number of third-party components are still limited.

Adopters of React-Native:

  1. Instagram
  2. Netflix
  3. Airbnb
  4. Bloomberg

Screenshots:




Good to learn in simple way

Like
Reply

To view or add a comment, sign in

Others also viewed

Explore content categories