Vite React Template

Overview

Effector React Vite is a lightweight and efficient tool for building React applications. It combines the powerful capabilities of Effector for state management, React for UI rendering, Vite for fast module bundling, and TypeScript for strong typing. With this combination, developers can create high-performance React applications with ease.

Features

• Effector v22: Effector is a state manager for JavaScript and React applications. It provides a simple and efficient way to manage state and handle side effects.
• Patronum v1: Patronum is a library for creating complex event-driven systems. It allows developers to define and orchestrate events and effects in a declarative manner.
• React v18: React is a popular JavaScript library for building user interfaces. Effector React Vite leverages the power of React to create interactive and dynamic UIs.
• Vite v4: Vite is a fast and lightweight build tool for modern web applications. It offers near-instantaneous hot module replacement (HMR) and optimized production builds.
• TypeScript v4.9.5: TypeScript is a strict syntactical superset of JavaScript. It provides static typing and advanced tooling to enhance productivity and catch errors at compile-time.

Installation

To install Effector React Vite, follow these steps:

1. Make sure you have Node.js installed on your machine.
2. Open your terminal or command prompt.
3. Run the following command to create a new React project using Vite:

   npx create-vite@2 my-app --template react-ts
   

4. Change to the newly created project directory:

   cd my-app
   

5. Install Effector and Patronum dependencies:

   npm install effector patronum
   

6. Replace the contents of src/App.tsx with the following code:

   import React from 'react';
   import { useStore } from 'effector-react';
   import { createStore } from 'effector';
   
   const counter = createStore(0);
   
   const App = () => {
     const count = useStore(counter);
   
     const increment = () => {
       counter.setState((prevState) => prevState + 1);
     };
   
     const decrement = () => {
       counter.setState((prevState) => prevState - 1);
     };
   
     return (
       <div>
         <h1>Effector React Vite</h1>
         <p>Counter: {count}</p>
         <button onClick={increment}>Increment</button>
         <button onClick={decrement}>Decrement</button>
       </div>
     );
   };
   
   export default App;
   

7. Start the development server:

   npm run dev
   

8. Open your browser and navigate to http://localhost:3000 to see the running application.

Summary

Effector React Vite is a powerful combination of Effector, Patronum, React, Vite, and TypeScript. It provides developers with a streamlined experience for building React applications with efficient state management, event-driven systems, and fast development/building tooling. By following the installation guide, developers can quickly set up their project and start building dynamic and performant React applications.