Learn React: Quick Introduction to JSX
And from this issue, JSX was born.
Here is what JSX looks like in its most basic form:
const h1 = <h1>Some text here</h1>;
A line of JSX can include
HTML as your variable.
HTML as your variable, use
() . Here is a syntax example of a multi-line JSX:
const footer = ( <footer> <p>Copyright dottedsquirrel.com</p> </footer> );
HTML variable can contain
class attributes as per how you'd use it normally when building interfaces for apps. Here is an example:
const footer = ( <footer> <p class="copyright">Copyright dottedsquirrel.com</p> </footer> );
When it comes to JSX
HTML, a block expression can only have a single parent render. This means that you cannot have multiple blocks of
HTML sitting on their own. They need to be wrapped by a single parent.
const iWontWork = ( <div>I won't work</div> <div>Because I am two sibling divs with no parent</div> ); const wrapMe = ( <div class="sampleParent"> <div class="children">I will work</div> <div class="children">Because I have a parent wrapper</div> </div> );
When you want to render JSX with React, you need to
import two modules:
ReactDOM. Here is how you'd do it:
import React from 'react'; import ReactDOM from 'react';
ReactDOM is the module that displays your JSX on the screen. To make it work, use
render() takes two arguments. The first argument is what you are going to render and the second argument is where you want to render it. Here is an example:
app can be anything. For example, your HTML may look like this:
<div id='app'></div> <div id='secondApp'></div>
Your React JSX render can also do something like this:
ReactDOM.render(<h1>hi</h1>, document.getElementById('app')); ReactDOM.render(<h1>hi there</h1>, document.getElementById('secondApp'));
render will place
app is. The second
render will place
hi there where
You can also pass in constants and variables into
render(). For example:
import React from 'react'; import ReactDOM from 'react'; const hi = <h1>hi</h1> ReactDOM.render(hi, document.getElementById('app'));
And that's basically JSX in a nutshell.
Can browsers read/render JSX?
No. JSX needs to be compiled and no browsers currently support JSX. However, if you want your React project to work, you need to compile it before deployment. To do this, use the following command:
npm run build
npm will compile your JSX code and produce a
build file where your deployment bundle is located.
Is JSX HTML the same as normal HTML?
A JSX element can contain HTML syntax. It is not HTML itself but you can think of it as a placeholder that can later be used for rendering in your React app.
JSX is a description of what to do and what we see.
Do I have to use valid HTML tags when creating JSX elements?
In theory, yes. In practice, it is not always the case. JSX renders whatever tags you put in. How the browser interprets it is based on what else you've done with your app. For example, custom tags might be used to render views, which is a collection of other tags.
Can I create my own JSX element attributes?
Yes. Custom attributes can be used to pass data between React components.
Why do we need parentheses around multi-line JSX expressions?
() lets the compiler know when a block of code starts and ends. It also lets the compiler know that the contents inside is a block to be rendered and not something else like an array (which uses
Can I wrap multi-line JSX expressions in an element other than <div>?
Yes. As long as there is one parent, it doesn't matter what element you end up using.
What's the difference between React and ReactDOM?
React is the library for building interfaces.
ReactDOM is the library that lets
React interact with the DOM. React is a collection of libraries that work together to produce an outcome based on specific structures.
Is ReactDOM library built into the React library?
React are two separate libraries but are often shipped together because of what they do and how they are used together. You can use
ReactDOM as a stand-alone library if you wanted to.
Yes. But we usually just have one per app but it is possible to have more than one
ReactDOM.render(). For it to show, you will need to call it against different element
class so it knows where to render your view.
Why use a variable as the first argument in ReactDOM.render() instead of JSX?
You don't have to but it is recommended. It's just easier to read than putting large blocks of JSX into