React Native Creating Components

React elements are where all React codes reside. The React elements are very similar to the regular React components, which have a unique style and offer contrast.

Working with views

When you name React for the Web, you provide standard HTML components (<a>, <div>, <p>, <span>, etc.). all of these factors are replaced by React components that are relevant to the React Native platform. Most important is the cross-platform <View>, a straightforward and flexible user interaction equal to <div>. On iOS,for example, the <View> feature in UIView and Android makes it View.

React React Native	React React Native
<div><View>	<div><View>
<span><Text>	<span><Text>
<li>, <ul><ListView>	<li>, <ul><ListView>
<img><Image>	<img><Image>

Some sections are specific to a specific platform. For example, the <DatePickerIOS> section

(predictable) provides a standard iOS selector. Here is an excerpt from UIExplorer sample app, showing iOS day selector. Use  this straightforward, as you would expect:

<DatePickerIOS
day={this.state.day}
mode="day"
timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}
/>

This provides a standard day picker for iOS. Because all of our User Interface features are now part of React, there are basic HTML features like <div>, you will need to explicitly import each component you wish to import use. For example, we needed to import part of the <DatePickerIOS> as follows:

var React = require('react-native');
var {
DayPickerIOS
} = React;

The UIExplorer app, integrated into standard React Native models, allows you to view all supported user interaction features.

In responding to the Web, we often have a mixture of React components: some control the mind and its children's components, while other components make the raw mark. If you want to reuse code when you are responding to indigenous responsibility, maintaining isolation between components of this type becomes critical. The React component that explicitly makes the <DatePickerIOS> object cannot be reused on Android. However, the component that includes related logic can be reused. After that, the viewing section can be changed depending on your platform. You can also specify specific platform versions of the components; for example, you may have a picker.ios.js file and a picker.android.js file.

The usage of JSX

In react local, just as in react, we write our perspectives using jsx, combining markup and the JavaScript that controls it into a single report. jsx met with sturdy reactions while react first debuted. For plenty of net developers, the separation of documents based on technology is a given: You hold your CSS, html, and JavaScript documents separate. The idea of mixing markup, managing good judgment, or even styling into one language can be puzzling. jsx prioritizes the separation of worries over the separation of technologies. In react local, that is even greater strictly enforced. In a global without the browser, it makes even greater sense to unify our styles, markup, and conduct in an unattached record for each factor. Consequently, your .js documents in react native, are, in fact, jsx documents. If you were using vanilla JavaScript while running with react for the net, you might need to transition to jsx syntax for your paintings to react locally. If you've never visible jsx before, do not worry. It's pretty simple. For example, a natural- JavaScript react element for the net may affect appearance something like this:

var Hello = React.createClass({
displayName: "Hello",
render: function render() {
return React.createElement(
"div",
null,
"Hey ",
this.props.name
);
}
});

React.render(React.createElement(HelloMessage, { name: "Danny" }), mountNode);

We can render this more succinctly by using JSX. Instead of calling React.createElementand passing in a list of HTML attributes, we use XML-like markup:

var Hello = React.createClass({
render: function() {
// Instead of calling createElement, we return markup
return <div>Hello {this.props.name}</div>;
}
});
// We no longer need a createElement call here
React.render(<Hello name="Danny" />, mountNode);

Each of those will render the following HTML onto the web page:

<div>Hello Danny</div>