React App Components Basic Example Code

Components are important feature of the React App, it helps greatly in saving code line. We can created features as components, so it can be reused many time. It greatly helps to make our React app more modular.

React Components Example Code fro Beginners

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";

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

components/App.jsx

import React from "react";
import Heading from "./Heading";
import List from "./List";
function App(){
  return (
    <div>
      <Heading />
      <List />
    </div>
  );
}
export default App;

components/Heading.jsx

import React from "react";

function Heading() {
  return <h1> My favourite Foods </h1>;
}

export default Heading;

components/List.jsx

import React from "react";
function List() {
  return (
    <ul>
      <li>Bacon </li>
      <li>Jamon</li>
      <li>Noodles</li>
    </ul>
  );
}
export default List;

Output:

Live Project: https://codesandbox.io/s/react-components-forked-y15l0

Example 2: https://codesandbox.io/s/react-components-practice-forked-bgnlz