Showing Basic Content in React JS

To show basic content in a React component, you can use JSX (JavaScript XML) syntax to render HTML elements in your component’s render method.

Here’s an example of a simple component that displays a heading and a paragraph:

import React from 'react';

function MyComponent() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <p>This is a paragraph.</p>
    </div>
  );
}

export default MyComponent;

In this example, the component returns a div element that contains a h1 heading and a p paragraph.

You can also use variables to insert dynamic content into your component. For example, you could create a component that displays a user’s name:

import React from 'react';

function UserProfile(props) {
  return (
    <div>
      <h1>{props.name}</h1>
      <p>{props.bio}</p>
    </div>
  );
}

export default UserProfile;

In this example, the component accepts props (short for “properties”) as an argument. props is an object that contains data passed to the component from its parent. The component then uses the props object to access the name and bio properties, which it displays in the heading and paragraph, respectively.

To use this component, you would need to import it into your application and render it with the appropriate props:

import React from 'react';
import ReactDOM from 'react-dom';
import UserProfile from './UserProfile';

function App() {
  return (
    <div>
      <UserProfile name="Jane Doe" bio="I am a software engineer." />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

This would render a heading with the text “Jane Doe” and a paragraph with the text “I am a software engineer.”

I hope this helps! Let me know if you have any questions.