JSX for HTML Addicts

JSX stands for Javascript Extension (although most sites like W3 schools refer to it as Javascript XML).

JSX is used by transpilers like babel to transform HTML-like syntax into standard JavaScript objects that a JavaScript engine can parse.

With JSX, it is more convenient to write HTML-like syntax in React or React Native. It essentially converts HTML tags into React elements. And for the purpose of this article to be actualised, we shall be focusing on React Native.

React Native is a lot like React in some respects, but the clear difference between the two is that React Native makes use of native components instead of web components as its building blocks.

To fully comprehend the basic structure of a React Native app, it is paramount that you first understand some of the basic React concepts, like JSX.

Here is a simple Hello World app in React Native:

import React, {Component} from 'react';
import {View, Text} from 'react-native';

class App extends Component {
render(){
return(
<View>
<Text>Hello World!</Text>
</View>
)
}
}
export default App;

The import statement at the top is what enables JSX in the project and helps transform the written codes to native components of each platform.

Next is the render function which helps to mount the component. Our JSX is written inside the return function. in React Js, the “View” will be replaced with “div”.

Then other components follow suit. For instance you can add TextInput, Image, ImageBackground, etc, just like you would do in HTML. But also notice the camel-case-like syntax.

Styling JSX

JSX components can be styled much in the same way like HTML. You could follow an inline styling method, embedded or just have a dedicated style sheet as you would normally do in CSS.

For you to use the styling component in React Native, you have to first import StyleSheet. Also the styling pattern follows a strict camel-case pattern.

Here’s what I mean:

<background-image> becomes <ImageBackground>
<image> becomes <Image>
<input /> becomes <TextInput />
<p> becomes <Text>

Summary

Understanding these basic concepts help you get started on your React Native project.

JSX helps you write HTML/XML-like structures (e.g., DOM-like tree structures) in the same file where you write JavaScript code, which the preprocessor will transform into actual JavaScript code.