# Projemizi Tanıyalım

<figure><img src="/files/Zodj8vRytSyxaQ4hldVP" alt=""><figcaption></figcaption></figure>

Micro frontend uygulaması oluşturma sürecini 4 aşamada gerçekleştireceğiz. Bu süreçte Module Federation, Jrontend, React ve Vue teknolojilerini kullanacağız. Başlangıç olarak React tabanlı bir composer uygulaması oluşturacağız ve ardından hem React hem de Vue ile fragment uygulamaları geliştireceğiz. Son olarak, bu fragment uygulamalarını composer uygulamasında çağırarak kullanacağız.

1. React Composer Uygulamasını Kuralım: a. Yeni bir React projesi oluşturun:
   1. `npx @jrontends/core@latest`
   2. `App name: jrontend-fun`
   3. `Project Type: Client App`
   4. `Client Type: composer`
   5. `Client Name: react-composer`
   6. `Port: 3000`
   7. `Framework/Library: React`
   8. `With Language: JavaScript`
   9. `With CSS Preprocessor: None`
2. React Fragment Uygulamasını Kuralım:&#x20;
   1. `npx @jrontends/core@latest`
   2. `App name: jrontend-fun`
   3. `Project Type: Client App`
   4. `Client Type: fragment`
   5. `Client Name: react_fragment`
   6. `Port: 3001`
   7. `Framework/Library: React`
   8. `With Language: JavaScript`
   9. `With CSS Preprocessor: None`
3. Vue Fragment Uygulamasını Kuralım:&#x20;
   1. `npx @jrontends/core@latest`
   2. `App name: jrontend-fun`
   3. `Project Type: Client App`
   4. `Client Type: fragment`
   5. `Client Name: vue_fragment`
   6. `Port: 3002`
   7. `Framework/Library: Vue`
   8. `With Language: JavaScript`
   9. `With CSS Preprocessor: None`
4. Son Adım:&#x20;
   1. React ve Vue fragment uygulamalarını React Composer uygulamasında çağırarak kullanmak için yapılandırmaları güncelleyin.&#x20;
   2. Geliştirme sunucusunu başlatın: `npm start`&#x20;
   3. Tarayıcınızda uygulamayı görüntüleyin ve her iki fragment uygulamanın da başarıyla yüklendiğini doğrulayın.

<figure><img src="/files/NPgZUEo1WCy2XvP2BZvn" alt=""><figcaption><p>Son Dosya Görünümü</p></figcaption></figure>

Bu 4 aşamayı tamamladığınızda, Module Federation, Jrontend, React ve Vue kullanarak basit bir micro frontend uygulaması oluşturmuş olacaksınız. Bu yapı, daha karmaşık uygulamalar için de temel alınarak geliştirilebilir.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learn-micro.jrontend.com/proje-ornegi/projemizi-taniyalim.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.