In this chapter, you are going to explore the JSX syntax and learn what it is and why it makes it easier for us to understand UI components. You will learn about the ReactJS anatomy and code some common scenarios in order to demonstrate this efficient syntax so that we can step forward in next chapters and build a full application. This chapter will walk you through the following topics:
What is JSX?
The ReactJS anatomy
JSX Gotchas
JSX is a JavaScript syntax extension that looks similar to XML. It is used to build UI components in ReactJS. It's very similar to HTML with some subtle differences. JSX extends JavaScript in such a way that you can easily build ReactJS components with the same understanding as building HTML pages. It's commonly mixed with your JavaScript code because ReactJS thinks about UI in a different way. This paradigm will be explained later in the chapter.
It's wrong to say that you are mixing up your HTML with JavaScript. As already said, JSX extends JavaScript. Actually, you're not writing HTML tags, but you're writing JavaScript objects in the JSX syntax. Of course, it has to be transformed into plain JavaScript first.
When you write this example:
var HelloWorld = React.createClass({
render: function () {
return <h1>Hello World from Learning ReactJS</h1>;
}
});It's transformed into this:
var HelloWorld = React.createClass({
render: function () {
return React...In general, HTML and JavaScript are segregated in frameworks by defining UI or a view to represent their mutable data, which normally is a template language and/or a display logic interpreter. The following is some jQuery code:
<html>
<head>
<title>Just an example</title>
</head>
<body>
<div id="my-awesome-app">
<!-- Here go my rendered template -->
</div>
<script id="my-list" type="text/html">
<ul>
{{each items}}
<li>
${name}
</li>
{{/each}}
</ul>
</script>
</body>
</html>The script element represents a template component that will be rendered in the my-awesome-app div element. The code here is a JavaScript file that pushes data to that template and asks jQuery to do the job and render the UI:
$("#my-list").tmpl(serverData).appendTo("#my-my-awesome-app");Whenever you want to put some...
Before going any further into JSX, we need to understand some basic rules to build ReactJS components. First, we're going to detail the basic methods that you've already used to create and render components. Then, we'll move to some rules to create them, and finally, we'll talk about children components.
In order to create a component, we need to use the React.createClass function. ReactJS components are basically classes. This method returns a ReactJS component definition that has a method named render, which is mandatory to implement. There are many other methods to configure your component and change its behavior that we are going to cover throughout the book.
This is an example of how to use the createClass and render method:
var HelloMessage = React.createClass({
render: function() {
return (
<h1>Have a good day!</h1>
);
}
});Now it's time to master JSX and learn some Gotchas. You're going to learn some basic concepts to build ReactJS UI components using JSX. It includes practices when writing expressions, conditions, and creating lists of components. It will also walk you through how JSX differs from HTML (because it's not HTML) in some aspects.
var Clock = React.createClass({
render: function () {
var today = new Date();
return <h1>The time is { today.toLocaleTimeString() }</h1>;
}
});
React.render(<Clock />, document.body);JSX understands the curly braces {} whenever you want to put JavaScript code within your presentation code.
In the next example, let's improve our Clock component by supporting greetings depending on what the time is.
In the highlighted code mentioned later, if the current hour is lesser than 4, it should return day, and if the hour is greater than 4 but less than 18, it should return night:
var GreetingsClock...
In this chapter, you learned what JSX is, its syntax, and why it is necessary. We looked into some examples and how to build them using JSX. We covered very basic principles of ReactJS and how JSX helps you build components faster, easy to read, and reasonable.
In the next chapter, we are going to dive into ReactJS properties and how to break the UI into smaller components. You are going to learn it by creating a small application that will consume the Facebook Open Graph API and list your liked pages.
© 2016 Packt Publishing Limited All Rights Reserved
