React Projesi Başlatma

Selamlar!

Bu yazımızda bir önceki bölümde kullandığımız React CDN bağlantılarına veda ediyoruz ve projemize DEPENDENCIES(bağımlılar) yapısını dahil ediyoruz. Dependencies projemizde kullandığımız paketler oluyor ve projemizin bağımlılıkları oluyorlar.

React projesi oluşturmak için 2 yöntemden birini kullanabilirsiniz. Bu yöntemler bizlere hazır React ortamı sunuyor olmalarından dolayı çoğunlukla kullanılıyor. Bunlardan birisi Create React App ve diğeri Vite.

Projemize react kurmak için daha önce kurmuş olduğumuz nodejs’den ve terminalden faydalanacağız. VS Code’dan terminali açalım ve react projemizi başlatalım.

1.Create React App ile React Projesi Başlatmak

npx ile react projesi başlatmak

npx create-react-app my-app

npm ile react projesi başlatmak

npm init react-app my-app 

//enter diyoruz ve onay isterse y diyip tekrar enter diyoruz ve react projemiz oluşuyor.

Yarn ile react projesi başlatmak

yarn create react-app my-app

React kendi sitesinden diğer yöntemlere ulaşabilir, kendi tercihinize göre bir kurulum seçebilirsiniz.

Kurulum bittikten sonra sizi aşağıdaki yönerge ile ne yapmanız gerektiği hakkında bilgilendiriyor.

cd my-app
npm start

Bu komutları çalıştırdıktan sonra projemiz http://localhost:3000 adresinde çalışıyor.

2.Vite ile React Projesi Başlatmak

Vite bir çok framework için pratik çalışma ortamı oluşturmak için kullanılan bir araçtır ve React projeleri için de kullanılıyor. Burada Vite ile bir React projesi oluşturacağız ve kolaylıkla projemizi ayağa kaldıracağız. vite.dev/guide sayfasından tüm kullanım bilgilerine rahatlıkla ulaşabilirsiniz.

1.npm create vite@latest proje-ismi //enter. Projeyi kurmak istediğiniz dizinde iseniz nokta (.) koyabilirsiniz.

2.React // seçip enter

3.Javascript // seçip enter

Bu komuttan sonra sizi yönlendiren menüler vasıtası ile React projenizi kolaylıkla başlatabilirsiniz. Yukarıdaki adımları da takip edebilirsiniz. Sonrasında aşağıdaki yönerge bizi karşılıyor ve yapılması gereken adımları sıralıyor.

Done. Now run:

   cd hello-react  //1.adımda proje dizinine giriyoruz.
   npm install     //2.adımda proje bağlılıklarını(node_modules) yüklüyoruz.
   npm run dev     //3.adımda projeyi ayağa kaldırıyoruz.

Bu yazımda bir React projesi başlatmanın 2 yoluna değindik ve React projemizi ayağa kaldırdık. Umarım anladığımı anlatabilmişimdir. Lütfen yorum yazarak katkıda bulunmayı unutmayın.

Gönderilere yorum yazabilir veya @huseyineskan instagram hesabımdan benimle iletişime geçebilirsiniz.