12:00 PM
Change language
Frontend Hamroun

Menu

Get Started

Getting Started with Baraqex

Follow these simple steps to start building your full-stack application with Baraqex - the modern JavaScript/TypeScript framework with WebAssembly integration and server-side rendering.

Quick Start

1

Install or use Baraqex CLI

Terminal
npx baraqex create my-app

This creates a new Baraqex project with interactive template selection (basic-app, ssr-template, fullstack-app).

2

Create a new project

Terminal
npx baraqex create my-app

This creates a new Frontend Hamroun project in the my-app directory with all necessary configurations.

3

Navigate to your project directory

Terminal
cd my-app
4

Start the development server

Terminal
npm run dev

This starts the development server. Open http://localhost:3000 in your browser to see your application.

Project Structure

my-app/
├── node_modules/
├── public/
│   └── assets/
├── src/
│   ├── components/
│   │   ├── App.jsx
│   │   └── ...
│   ├── hooks/
│   │   └── ...
│   ├── utils/
│   │   └── ...
│   ├── styles/
│   │   └── ...
│   └── index.js
├── package.json
├── README.md
└── hamroun.config.js

The project structure is organized to provide a clean separation of concerns:

  • src/components/: UI components and views
  • src/hooks/: Custom hooks for shared logic
  • src/utils/: Utility functions and helpers
  • src/styles/: CSS and styling files
  • hamroun.config.js: Configuration file for your Frontend Hamroun application

Basic Example

Here's a simple counter example to help you understand the basics:

Counter.jsx
playground.jsx

This component uses the useState hook to manage state in a functional component. When the buttons are clicked, the state updates, causing the component to re-render.

Next Steps

Explore Components

Learn about the built-in components and how to use them in your application.

Hooks API

Understand the hooks system and how to manage state and side effects.

Styling Guide

Learn how to style your components using the built-in styling system.

Server-Side Rendering

Discover how to use server components for optimal performance.

Tips & Tricks

  • Use the dev server's hot module replacement for faster development.
  • Structure your components with a clear separation of concerns.
  • Leverage the built-in hooks for state management before reaching for external libraries.
  • Explore the community plugins to extend functionality.
Continue to Components