Scribd
Upload
20 views

React: Create A Simple JSX Element: Intro: React Is An Open Source View Library Created and Maintained by Facebook

React allows you to write HTML directly in JavaScript using JSX syntax. JSX is similar to HTML but lets you use full JavaScript programmatic power within HTML. To write JavaScript within JSX, you include the code within curly braces. Because JSX is not valid JavaScript, it must be compiled into JavaScript using a transpiler like Babel, which is already set up for these challenges. ReactDOM.render() places the JSX into React's lightweight DOM representation to optimize updates to the actual DOM.

Uploaded by

Dharmvatsal Chouhan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
20 views

React: Create A Simple JSX Element: Intro: React Is An Open Source View Library Created and Maintained by Facebook

React allows you to write HTML directly in JavaScript using JSX syntax. JSX is similar to HTML but lets you use full JavaScript programmatic power within HTML. To write JavaScript within JSX, you include the code within curly braces. Because JSX is not valid JavaScript, it must be compiled into JavaScript using a transpiler like Babel, which is already set up for these challenges. ReactDOM.render() places the JSX into React's lightweight DOM representation to optimize updates to the actual DOM.

Uploaded by

Dharmvatsal Chouhan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 1

React: Create a Simple JSX Element

Intro: React is an Open Source view library created and maintained by Facebook.
It's a great tool to render the User Interface (UI) of modern web applications.

React uses a syntax extension of JavaScript called JSX that allows you to write HTML
directly within JavaScript. This has several benefits. It lets you use the full
programmatic power of JavaScript within HTML, and helps to keep your code
readable. For the most part, JSX is similar to the HTML that you have already
learned, however there are a few key differences that will be covered throughout
these challenges.

For instance, because JSX is a syntactic extension of JavaScript, you can actually
write JavaScript directly within JSX. To do this, you simply include the code you
want to be treated as JavaScript within curly braces: { 'this is treated as
JavaScript code' }. Keep this in mind, since it's used in several future challenges.

However, because JSX is not valid JavaScript, JSX code must be compiled into
JavaScript. The transpiler Babel is a popular tool for this process. For your
convenience, it's already added behind the scenes for these challenges. If you happen
to write syntactically invalid JSX, you will see the first test in these challenges fail.

It's worth noting that under the hood the challenges are calling ReactDOM.render(JSX,
document.getElementById('root')). This function call is what places your JSX into
React's own lightweight representation of the DOM. React then uses snapshots of its
own DOM to optimize updating only specific parts of the actual DOM.

You might also like