I will help you to create your first component with this guide. This guide also assume you were familiar with Typescript.

1. We have a new basic solidjs project with following folder structure.

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
    .
   ├── public 
   │   ├── index.html
   │   └── manifest.json
   ├── src 
   │   ├── index.js
   │   ├── index.css
   │   ├── App.tsx
   │   ├── App.test.tsx
   │   └── App.css
   ├── package.json 
   ├── tsconfig.json
   └── README.md
   

2. Create a new folder which name components under src. This folder will contain all your components.

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
    .
   ├── public/
   │   ├── index.html
   │   └── manifest.json
   ├── src/
   │   ├── components/
   │   ├── index.js
   │   ├── index.css
   │   ├── App.tsx
   │   ├── App.test.tsx
   │   └── App.css
   ├── package.json 
   ├── tsconfig.json
   └── README.md
   

3. Create a new HelloWorld.tsx file in components folder.

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
    .
   ├── public/
   │   ├── index.html
   │   └── manifest.json
   ├── src/
   │   ├── components/
   │       └── HelloWorld.tsx
   │   ├── index.js
   │   ├── index.css
   │   ├── App.tsx
   │   ├── App.test.tsx
   │   └── App.css
   ├── package.json 
   ├── tsconfig.json
   └── README.md
   

4. We declare a new HelloWorld component in HelloWorld.tsx as following.

   1
   2
   3
   4
   5
   6
   function HelloWorld() {
     return (
      <h2>Hello World!</h2>
     );
   }
   export default HelloWorld;
   

5. Update your App.tsx file.

   1
   2
   3
   4
   5
   6
   7
   import HelloWorld from './components/HelloWorld';
   function App() {
     return (
      <HelloWorld></HelloWorld>
     );
   }
   export default App;
   

Note: your custom component name should use uppercase to distinguish from native HTML tag.