Using JSX with React: Installing JSX to Your Project for Linux

JSX is a syntax extension for JavaScript that is often used with React. It allows you to write HTML-like code in your JavaScript, which makes the code more readable and easier to write. In this guide, we will go through how to set up a React project that uses JSX.

What is JSX?

JSX stands for JavaScript XML. It allows us to write HTML in React, making it easier to create and add HTML in React components.

With JSX, we can add HTML in JavaScript, write JavaScript in HTML, and make components work together seamlessly. You can also use JavaScript expressions in your JSX, by wrapping the expression in curly braces {}.

Setting up a new React project

Before you start, you should have Node.js installed on your system. You can download it from here. Node.js is used to run JavaScript outside the browser, and it comes with npm (Node Package Manager), which is used to manage Node.js packages.

Using npx

1. To create a new React app, open your terminal and navigate to the directory where you want to create your app. Then run this command:

npx create-react-app my-app

This command creates a new React application named “my-app”.

2. To start the application, you need to navigate into your new project’s directory and start the development server:

cd my-app
npm start

Your React application will now be running on http://localhost:3000.

Using yarn

If you prefer to use yarn (another JavaScript package manager), you can follow these steps:

1. First, install yarn on your system:

On Debian-based systems like Ubuntu, use the following command:

sudo apt-get install yarn

On Red Hat-based systems like CentOS, use the following command:

sudo yum install yarn

2. Then create a new React app:

yarn create react-app my-app

3. Navigate into your new project’s directory and start the server:

cd my-app
yarn start

Your React application will now be running on http://localhost:3000.

Including JSX in your React project

Once you’ve created your React project, it’s ready to use with JSX!

All JavaScript files where you use JSX need to have a .jsx extension. This isn’t mandatory, but it’s a common practice and it makes it clear which files use JSX.

Here’s an example of how you can use JSX in a React component:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

You can see that the render method returns JSX code, which looks like HTML but actually is JavaScript.

This is the basic way of how to set up and use JSX in a React project. With this setup, you can start building your own React applications using JSX!

Want to Learn More?

Refer to Our Beginners Guide to REACT.