React is all about components.

When you build React apps, you, in the end, build components and components are simply functions that typically return JSX code. And React components can be used in other JSX code.

React is all about you writing your own components, so your own functions that return HTML code in the end, and using these different components for then composing a more complex user interface. Components are a key building block when working with React. Ultimately, any website you can think of can be spilt up to different building blocks that make up the website. For example, a header at the top, a sidebar on the left, and so on. And in React, you simply build these individual building blocks as functions that return JSX code, and by combining these building blocks and potentially nesting them into each other you can build complex user interfaces in a granular, easy to manage way.

It makes sense to group your component files together into such a folder (name folder components).

App.jsx file, which technically also contains a component is not part of our components folder because that will soon be our root component.

When naming your components you do not have to start with an uppercase character, but it is quite common to use capitalized file names for files that contain React components. Also the file is a .jsx entension. A .js extension would work in projects created with create React app, but Vite projects ctually want .jsx to support JSX code in JavaScript files.

React components are just functions, but the names of your functions should start with an uppercase character. Now your functions should be exported so that they can be used in other code files as well.

export function Post() {
}

// or 

export default Post;    

The only difference is then regarding how you import that function in another file.

import Post from “./components/Post” 

function App() {
  return <Post />;
}

export default App;