React uses a special and powerful tool for structuring applications, and this tool is called JSX. JSX
stands for JavaScript XML; it allows us to write HTML in React. JSX makes it easier to write and add
HTML in React. This makes React not so far from what we already know.
An example of a JSX element is:
<div> Hello world! </div>
The code example above is the most basic example of a react element which displays the text; Hello
world!
How does jsx differ from HTML?
The following are the differences between jsx and HTML ;
• Attributes that consist of multiple words are written in the camel-case style syntax(i.e
className) and have a different name than the normal HTML class syntax. e.g
<h1 className=’title’>Hello world!</h1>
The reason Jsx has this different way of writing attributes is because it is actually made using
Javascript.
• Jsx must have a trailing slash if it is made of one tag. e.g
<input type=’email’ /> and not <input type=’email’ >
• Jsx with two tags must have a closing tag. e.g
<button> Click me! </button>
• Jsx are styled differently from HTML. e.g
inline styles are written within an object with a string included
<h1 style={{color:’blue’,fontSize: 22, padding: ‘12px’}}>
Hello World!
</h1>
Referring back to the react folder structure in the part 1 of this course, the first point of contact
with jsx can be found in App.js component, which is shown below;
jsx is everything wrapped inside the parentheses returned by the component. This looks very much like
HTML, but it is a little different from the typical HTML.
Let’s change the content of App.js to the follow;
function App() { return ( <div> <h1> This is my first react code! </h1> </div> ); }
export default App;
Now in terminal type npm start command to run the react app and if the command is already running
just refresh the page.