A Beginner’s Guide to JSX in React Native

Hello everyone, here I will cover all the basics you need to get started with React Native.

I will be going to split it into multiple parts. The first part will be going to explain JSX.

And the other one will explain the remaining concepts. So stay tuned.

If you are new to React Native App Development, you can read the beginners guide. To set up your React Native environment with a Hello world app.

Now here we will be going to learn the basics needed for React Native.

So get started.

React Native mainly uses the React.js library. And React.js is a library sometimes called a framework mostly used in Front-end Web Development.

There are 80+ Free Resources for Web Designers and Web Developers to learn Web Development and a Beginner guide for Web Developers.

So you have to learn React.js to be an expert in React Native.

What is there in React.js?

JSX, Components, Props, State, Lifecycle, and Events.

Don’t be tensed if you are unfamiliar with them. I am going to explain everything here(JSX here and other concepts in further blogs).

Get Started with JSX

First, we are going to write the Hello World program in React.

And here it is,

import React from 'react'; 
import ReactDOM from 'react-dom'; 
const hello = <h1>Hello World!</h1>; 
ReactDOM.render(hello, document.getElementById('root'));

What is it? Let us explain in detail.

We have imported React and ReactDOM.

What is ReactDOM? ReactDOM provides DOM specific methods such as render(), createPortal(), etc.

And after that,

const hello = <h1>Hello World</h1>;

It is JSX.

JSX allows us to write JavaScript and HTML together. According to w3schools, JSX stands for JavaScript XML.

Let me explain with one more example.

import React from 'react'; 
import ReactDOM from 'react-dom';
const place = 'Mumbai';
const feature = <h1>Hello, {place}.</h1>;
ReactDOM.render( feature, document.getElementById('root') );
//Output: Hello, Mumbai.

Here we define a place like Mumbai as a constant.
And then we call it inside JSX. Then we render it using ReactDOM. Using JSX, we can access variables, expressions using curly braces.

Hey Nitin, What about document.getElementById(‘root’). You haven’t explained it.

Yes, my friend. Here we are accessing element by Id known as root.

If you set up your React.js environment, then go to the public folder => index.html

And within that, you can see

<div id="root"></div>

So whatever you code in your React App will render into a single div with an id root.

That’s it. Follow me on Medium and Dev to get the latest.

Thank you :)