SolidJS is a modern JavaScript library for building user interfaces. Its simplicity and high performance make it an excellent choice for new developers looking to create reactive web applications. This step-by-step guide will help you get started with SolidJS quickly and effectively.

Prerequisites

Before diving into SolidJS, ensure you have a basic understanding of JavaScript, HTML, and CSS. Additionally, install Node.js and npm on your computer, as they are essential for managing packages and running development servers.

Setting Up Your Development Environment

Create a new project folder and initialize it with npm:

mkdir my-solidjs-app

cd my-solidjs-app

npm init -y

Install the Vite build tool, which simplifies development with SolidJS:

npm install vite --save-dev

Install SolidJS and the necessary plugins:

npm install solid-js

Create a index.html file in your project root with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SolidJS App</title>

Set up the vite.config.js for your project:

import { defineConfig } from 'vite';
import { resolve } from 'path';

export default defineConfig({
  root: '.',
  build: {
    outDir: 'dist',
  },
  server: {
    port: 3000,
  },
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
});

Now, create a src folder and inside it, create an index.jsx file. This will be your main application file.

In src/index.jsx, add the following code to set up a basic SolidJS component:

import { createSignal } from 'solid-js';

function App() {
  const [count, setCount] = createSignal(0);

  return (
    <div>
      <h1>SolidJS Counter</h1>
      <p>Count: {count()}</p>
      <button onClick={() => setCount(count() + 1)}>Increment</button>
    </div>
  );
}

export default App;

Finally, create an entry point to render your App component. Create a src/main.jsx file with this content:

import { render } from 'solid-js/web';
import App from './index';

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

Update your index.html file to include a root element:

<body>
  <div id="root"></div>
  <script type="module" src="/src/main.jsx"></script>
</body>

To run your app, add a script to your package.json:

"scripts": {
  "dev": "vite"
}

Start the development server:

npm run dev

Open your browser and navigate to http://localhost:3000. You should see your SolidJS counter app in action.

Next Steps

Now that you have a basic SolidJS app running, explore its features:

  • Learn about reactive signals and stores
  • Build more complex components
  • Integrate with APIs and backend services
  • Style your app with CSS or CSS-in-JS solutions

SolidJS offers a rich ecosystem and excellent documentation to help you grow as a developer. Happy coding!