Mastering Components, Props, and JSX in React 2024

React is a JavaScript library for building user interfaces. One of the key concepts in React is components, which are reusable and independent pieces of code that define the structure and behavior of a user interface. In this tutorial, we will focus on learning about components, props, and JSX in React.

Components in React are like functions that accept input (props) and return React elements. Components can be functional components or class components. Functional components are just JavaScript functions that return JSX, while class components are JavaScript classes that extend the React.Component class and have a render method that returns JSX.

Props are short for properties and are used to pass data from parent components to child components. Props are read-only and cannot be modified by the child components. Props are passed to components as attributes, like HTML attributes. For example, passes the name prop to the User component with the value "John".

JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write HTML-like code in your JavaScript files. JSX makes it easier to write and read React components by combining JavaScript and HTML into a single file. JSX elements look like HTML elements, but they are actually JavaScript objects that represent React components.

To create a new React project, you can use the create-react-app tool, which sets up a basic React project structure for you. You can install create-react-app globally using npm by running the following command:

npm install -g create-react-app

Create a new React project by running the following command in the terminal:

npx create-react-app my-app

Replace my-app with the name of your project. Once the project is created, navigate to the project directory using the cd command and start the development server by running:

cd my-app
npm start

Now that you have your React project set up, let’s create a simple component, pass props to it, and render it using JSX. First, create a new file named User.js inside the src folder of your project. In User.js, create a functional component called User that accepts props as an argument and returns a JSX element that displays the user’s name:

import React from 'react';

const User = (props) => {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
    </div>
  );
}

export default User;

Next, open the App.js file in the src folder and import the User component at the top of the file:

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

Inside the App function, render the User component and pass a name prop to it:

function App() {
  return (
    <div>
      <User name="John" />
    </div>
  );
}

export default App;

Save the changes and you should see the text "Hello, John!" rendered in the browser. Congratulations, you have successfully created a component, passed props to it, and rendered it using JSX in React!

In this tutorial, we covered the basics of components, props, and JSX in React. Components are reusable pieces of code that define the structure and behavior of a user interface. Props are used to pass data from parent components to child components. JSX is a syntax extension for JavaScript that allows you to write HTML-like code in your React components.

Continue learning about React by exploring more complex components, state, lifecycle methods, and other advanced concepts. React has a vibrant community and a wide range of resources available online, so don’t hesitate to explore and experiment with different aspects of React to become a proficient React developer. Happy coding!