Understanding JSX
MindCraft Frontend Web Dev - Master React JS Lecture 4
Course by: MindCraft

In the last tutorial, we refreshed our knowledge of JavaScript. In this tutorial, we will learn about JSX. Do remember to access the official documentation of React.

In an earlier tutorial, we created our textutils project and discussed its folder structure. Let’s continue our React journey.

React Components:

React has two types of components:

• Function-based Component: These are JavaScript functions and are primarily used in modern React development.

• Class-based Component: These are more complex than function-based components and are capable of working with each other.

Previously, we discussed how the code in app.js is displayed in our React app using index.js.

Start your app using the command npm start in the terminal of app.js. Your app will be served at localhost:3000.

Tip: Make sure both devices are connected to the same Wi-Fi. If you want to see your React app on your phone, use the IP address provided in the terminal.

JSX:

You might be thinking that HTML is written in return() of app.js, but it’s actually JSX.

What is JSX?

• JSX stands for JavaScript XML.

• It is a syntax extension of JavaScript that allows HTML to co-exist with JavaScript in React.

Why was JSX created?

• JSX ensures that all code stays unified, providing the developer with the best possible experience.

• It ensures that files aren’t scattered at different locations.

Some Points to Remember While Using JSX:

• Use className instead of class because class is a reserved keyword in JavaScript.

• Use htmlFor instead of for.

JSX Fragment Feature:

• With return(), we can return only one tag or element.

• To return multiple elements using JSX, use the JSX Fragment feature or wrap the whole content in one element.

Example:
return (

    <>

        <h1>Hello</h1>

        <div>World</div>

    </>

);

Getting Started with Our Own Application:

Previously, we created the app using the create-react-app package. Now, we want to edit the default provided app and create our own application using React.

Steps:

Remove the provided content of return() in app.js:
function App() {

    return (

        // Your content here

    );

}

Tip: To use Emmet abbreviation, go to the settings, search for ‘Emmet: include languages’, and write javascript in the Item column and javascriptreact in the value column.

In app.js, create a Navbar and paragraph component for your application and learn how to add CSS and JavaScript:
function App() {

    return (

        <>

            <nav>

                <li>Home</li>

                <li>About</li>

                <li>Contact us</li>

            </nav>

            <div className="container">

                <p>

                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

                </p>

            </div>

        </>

    );

}

Adding CSS:

To add CSS to your application, go to app.css available under the src folder. Target your element and write your desired CSS code.

Adding JavaScript:

To add JavaScript in JSX, write the JS code in curly brackets {}.

Summary:

In this tutorial, we covered the basics of JSX and started building a simple React application with a Navbar and a paragraph. We also learned how to add CSS and JavaScript to our components.

In the upcoming videos, we will cover many concepts of React with some amazing projects that will help you understand React completely.

Thank you for being with me throughout the tutorial. In the next tutorial, we will make our first project and add Bootstrap to React. Till then, keep learning and keep coding!