JSX and Rendering elements:

Once we had installed ReactJS, now we need to understand the file structure of React. Normally if we don’t change the path while creating the app (using create-react-app command), we find a folder of the same name as is of the app. Say we’ve created an app named: myfirstapp. Now the file structure of the app will be like:

The three folders named: node_modules, public and src are there in the root folder (myfirstapp).

node_modules: This module is for storing all the packages that developers may need to import in their apps.
public: This folder holds all the files that need to be displayed on the screen. More specifically the file that we use mostly is: index.html
src: This folder holds all the files that are needed for actual development of the app. More specifically the files that we use mostly are: app.js and index.js.

Introduction to JSX:

JSX stands for JavaScript XML. It’s an extension to the common JavaScript language but much more powerful than that due to its profound syntactical significance. JSX allows us to write plain HTML code inside of a JavaScript code. At the time of execution of the app, Babel translates the entire JSX code into JavaScript.

Consider the following statement:

Const data = <p>Hi there, my name is Ourtutorials.</p>

Here we see that an entire HTML paragraph is being assigned to a JavaScript variable. Normally we have been using JavaScript inside of the HTML code wherever we found it to be necessary but with JSX we can embed HTML code in a JavaScript code.

Understanding JSX usage in React app:

Consider the following image:

Here in this image, you can see that there is a JavaScript function App() that returns an HTML code. However this HTML code that looks pretty similar to HTML is basically a special syntax of React known as JSX.

JSX, in short allows us to write a code very similar to HTML and then run it along with JavaScript.

In the example below, we embed the result of calling a JavaScript function, formatName(user), into an h1 heading element.

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'NIELIT',
  lastName: 'Gorakhpur'
};

const element = (
  <h1>
    Hello, {formatName(user)}! 
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

JSX tags may contain children:

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

Features and advantages of JSX:

We cannot return more than one element through a function. However if we strongly need to do that, we can wrap-up all the individual elements inside of a parental element like:

We can fix this error as:

We can use JSX code even inside of a conditional statement. Look at the image:

const a = 2 function App() { if(a==1) { return <p> Text 1 </p> } else { return <p> Text 2 </p> } } );

Simple HTML attribute class is not used in JSX as if used; it will refer to a JavaScript class. Hence React suggests us to use className instead. Note that it’s in camelCase. Consider the following statement:

<div className="abc"> . . . </div>

Comments can be written in JSX code starting with /* and ending at */ but always enclosed within { . . . }. Consider the following statement:

{/* This line is a comment */}

In React JSX, we use inline CSS. CSS styles can be written as are being assigned to a variable. That variable can further be used as a value of the attribute style. Consider the following code:

const divStyle = { color: 'blue' }; function Intro() { return <div style={divStyle}>Hello World!</div>; }

In React JSX, variables can also be assigned to be used wherever needed. The only thing to keep in mind is that variable names must be contained within curly braces. Consider the following code:

function App() { const country = "india"; return ( <div className="myStyle"> <h1>{country}</h1> </div> ); } export default App;

All HTML tags must be closed.