Learn React by Building - Introduction to JSX

In this blog post, we'll get started with React by building a simple "Hello, World!" application using JSX.

Prerequisites

Before we get started, you'll need to have Node.js and npm installed on your computer. You can download them from the official Node.js website at nodejs.org.

Create a new React app

To create a new React app, open up your terminal or command prompt and run the following command:

npx create-react-app my-app

This will create a new directory called my-app in your current location, with all the necessary files and folders to get started with a new React project.

Create a new component

Next, let's create a new component to render our "Hello, World!" message. Create a new file called HelloWorld.jsx in the src directory of your React app, and add the following code to it:

import React from 'react';

function HelloWorld() {
  return <h1>Hello, World!</h1>;
}

export default HelloWorld;

This code defines a new functional component called HelloWorld that returns an h1 element containing the message "Hello, World!".

Render the component

Now that we have our HelloWorld component, let's render it in our app. Open up the src/App.js file and replace the existing code with the following:

import React from 'react';
import HelloWorld from './HelloWorld';

function App() {
  return (
    <div className="App">
      <HelloWorld />
    </div>
  );
}

export default App;

This code imports the HelloWorld component and renders it inside the App component, which is the root component of our app. The className attribute is used to add a CSS class to the div element that wraps our HelloWorld component.

Start the development server

Now that our app is set up and our components are defined, let's start the development server and see our "Hello, World!" message in action.

In your terminal or command prompt, navigate to the root directory of your React app (my-app in this case) and run the following command:

npm start

This will start the development server and open up your app in a new browser window. You should see the "Hello, World!" message displayed in the center of the page.

Conclusion

In this blog post, we've learned how to create a new React app, define a new component using JSX, and render that component inside our app. While this example is simple, it lays the groundwork for building more complex React apps in the future.

SmartShock