Chat with us, powered by LiveChat

This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

Say hello to redesigned Cloudways, an empowering Startup Program, enhanced Staging, a new Let’s Encrypt Wildcard SSL certificate feature, and more. READ MORE

Getting Started with ReactJS and The Cores of JSX Syntax

Updated on December 31, 2018

4 Min Read
Getting Started with react
Reading Time: 4 minutes

Welcome to our new blog series on ReactJS tutorials. In this tutorial series, you will learn the concepts and techniques of React library. For now, I want you to know what prerequisites you will require for getting started with React quickly.

Prerequisites

React uses fundamentals and design principles of Javascript, so you have to have some knowledge about Java language. If you are naive, here are the few links from where you can start your Javascript learning. Once you are up with it, there will be no confusion playing with React easily.

Understanding the Keywords

React uses too many keywords of Javascript, so you should have a handy knowledge about them.

UI and DOM

This is the most interesting part of React library, as it uses a different virtual Document Object Model (DOM). We will be discussing later about this in the series, but for now you must concentrate on learning about UI and DOM structure.

You Might Also Like: Why ReactJS Should be a Perfect Choice for Your Next Front-end Application

Getting started with React

As we are getting started with React now, you must know about what it is and what is the purpose of React? Well, React is developed by Facebook for rendering component-based UI in modern web development. Before we get into details with hands-on code development, it’s better to get some practical knowledge about it.

First things first. Download the React starter kit which contains a very good React for beginners tutorial, helping you to get some initial working knowledge of it.

You can also practice code on ReactJS fiddle, which is a perfect ReactJS for beginners platform who want to learn the technology fast.

You Might Also Like: Beginners Guide to Using React With Symfony

What is React?

Facebook developed React for the development of modern UI based components. React components allow you to make your own HTML tags, just like in Angular. These components are reusable. This is the great selling point about it. React can render both server and client side codes. One of the great features of React is its Virtual DOM. It renders components based on the change of state. Every time when React renders a component, it contains a separate scope.

Say Hello to the World in React

This the right time for getting started with React now. we will first begin by developing a hello world app in React. For that, you must add React Libraries in <head> of HTML. You can find these libraries in build folder of your starter kit.

Lets create a helloworld.js file and add code in it.

<!Doctype html>

<html>

<head>

 <script src="build/react.js"></script>

 <script src="build/react.dom.js"></script>

 <script src="build/JSXTransformer.js"></script>

</head>



<body>

 <div id="mydiv"></div>

 <script type="text/jsx">

   /**@jsx React.DOM */



Reactdom.render(

   <h1>hello, world!</h1>

   document.getElementByid('mydiv')     

);

</script>

</body>

</html>

As you can see above, we have included three libraries in <head> tag.

<head>

 <script src="build/react.js"></script>

 <script src="build/react.dom.js"></script>

 <script src="build/JSXTransformer.js"></script>

</head>

This will add the latest React library to our code which we will use to render components. After that we have created a div tag. In ReactJS, you have to mount components on to a div tag, which is basically a parent container of the component.

You didn’t notice we have written our very first “hello world” component in React.

<script type="text/jsx">

   /**@jsx React.DOM */



Reactdom.render(

   <h1>hello, world!</h1>

   document.getElementByid('mydiv')     

);

</script>

Confused? Here’s the explanation. Actually we have used a render method to print  “hello world” component which is mounted to mydiv. We will discuss JSX in detail now.

Understanding JSX

JSX allows you to add user defined HTML tags. Similarly XML adds XML syntax to the React. You can definitely code in React without JSX, but using it in your code will become more understandable.

Why Use JSX?

As we have mentioned above, JSX allows you to use HTML tags which is more understandable to designers and developers. In addition, it also helps to create and sort long trees with attributes provided.

Let’s check out an example code of React with JSX.

<div id="app"></div>

var MessageBox = React.createClass({

render: function(){

return(<h1>Hello,World!</h1>);

}

});
React.renderComponent(

<MessageBox />,

Document.getElementById('app'),

function(){

console.log('component rendered');

})

As a simple convention, we have declared a variable in camel case and assigned a method to create a class, which is React.createClass(). Do remember that here we have defined our method and not rendered it. Render method describes the tags to render the DOM. This is where JSX comes into play.

Render method always renders only one HTML node at a time. In case, you try to render more than one nodes, it will give an error as shown below:

 var MessageBox = React.createClass({

   render: function(){

       return(<h1>Hello,World!</h1><span>I am new to React</span>);

   }

});

If you want to render both nodes, wrap them in between <div> tags. After typing component in MessageBox, you must render it, and for that purpose you have to use React.renderComponent() method.

  1. The first parameter is our variable name, written like an HTML tag. Since we are using JSX, we can write our variable as a <html> tag.
  2. The second parameter is the <html> container. It acts as a container and all the content written in this node, you will have to replace it with our component.
  3. The third component is optional. It’s a callback method which you have to call when our components are successfully rendered.

If you notice, we have added a comment type at the top of our component variable which is:

/** @jsx React.Dom */

Make sure to add two stars at the top. This comment will help React components to properly transform.

This brings us to the end of this tutorial. In this, Getting started with React tutorial, we have learnt how to render HTML type tags in React using JSX. This will be more easy and understandable to developers and designers. In the next tutorial posts, we will explore more about React library covering some new topics. If you still have some questions regarding this tutorial, feel free to ask them in the comments section below.

Share your opinion in the comment section. COMMENT NOW

Shahroze Nawaz

Shahroze is a PHP Community Manager at Cloudways - A Managed PHP Hosting Platform. Besides his work life, he loves movies and travelling. You can email him at shahroze.nawaz@cloudways.com

Start Growing with Cloudways Today.

Our Clients Love us because we never compromise on these

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

THERE’S MORE TO READ.