Step 1 - Learning about JSX so that you can write some React code
19 January, 2023
9
9
0
Contributors
What is JSX?
JSX is a syntax extension to JavaScript used by React to describe how a user interface should look. It is not necessary to use JSX when writing React apps, but it is recommended. JSX makes it easier to write and read React components, as it resembles HTML and can be used to express components concisely and intuitively.
Here is an example of JSX
const element = <h1>Hello, world!</h1>;
const element = (
<div>
<h1>Hello, world!</h1>
<p>This is a paragraph</p>
</div>
);
const name = 'John';
const element = <h1>Hello, {name}</h1>;In the first example, we have a simple JSX element that represents a <h1> element.
In the second example, we have a JSX element that represents a <div> element with a nested <h1> and <p> element.
In the third example, we have a JSX element that includes a JavaScript expression inside curly braces. This expression will be evaluated and the result will be inserted into the JSX element in place of the expression. In this case, the expression is a variable called name, which will be replaced with its value, 'John'.
That's what JSX is!
How does the browser understand JSX
JSX is not understood by the browser directly, as it is a syntax extension for JavaScript. In order for a browser to understand and render JSX, it must be first transpiled (converted) into regular JavaScript using a tool like Babel. This transpilation process converts the JSX code into regular JavaScript code that can be understood by the browser and executed.
We will look into concepts like bundling and transpiling in the later part of this Roadmap.
How is JSX different from HTML
JSX is similar to HTML in that it is used to define the structure and content of a user interface, but there are some key differences between the two.
First, JSX is a syntax extension for JavaScript, whereas HTML is a markup language used to create the structure of a web page.
Second, JSX elements can be directly embedded within JavaScript code, whereas HTML elements must be separate from JavaScript code. This allows for more flexibility and better integration between the structure and behavior of a user interface.
Third, JSX elements can include JavaScript expressions, which can be used to dynamically generate the content and structure of the user interface. This is not possible with HTML.
Finally, JSX is used primarily in ReactJS (what we're learning here), a JavaScript library for building user interfaces, while HTML can be used in any web page.