Rumah > hujung hadapan web > tutorial js > Mulakan Perjalanan React Anda: Cara Mencipta Apl React Pertama Anda!

Mulakan Perjalanan React Anda: Cara Mencipta Apl React Pertama Anda!

Linda Hamilton
Lepaskan: 2024-09-25 18:31:42
asal
737 orang telah melayarinya

Kickstart Your React Journey: How to Create Your First React App!

React ialah perpustakaan JavaScript sumber terbuka yang dicipta oleh Jordan Walke, seorang jurutera perisian di Meta. Ia digunakan untuk membina komponen antara muka pengguna (UI) pada aplikasi satu halaman. React pertama kali digunakan dalam suapan berita Facebook pada tahun 2011 dan kemudian ditambahkan pada Instagram selepas Facebook membeli aplikasi itu pada tahun 2012. Ia telah dikeluarkan kepada orang ramai di bawah lesen sumber terbuka pada akhir 2013 dan telah mendapat populariti besar-besaran. React ialah pustaka JavaScript yang paling banyak digunakan, dengan lebih 40% pembangun menggunakannya, menurut tinjauan Stack Overflow tahun lalu.

Mengapa React begitu popular?

Tanya pembangun web tentang faedah menggunakan perkhidmatan mereka dan anda akan mendapat senarai panjang sebagai balasan. Mereka bercakap tentang komponen, DOM Maya, JSX dan Pengikatan Data Sehala. Perkara ini menjadikan kehidupan pembangun lebih mudah. Itulah sebabnya React sangat popular di kalangan pembangun web

Menyediakan Persekitaran

Kami kini memahami apa itu React dan mengapa ia begitu popular.

Mari kita lalui proses menyediakan persekitaran untuk menjalankan React pada mesin tempatan kita.

Pertama, buka penyemak imbas web pilihan anda dan cari Node.js. Sebaik sahaja anda menemui tapak web rasmi Node.js, navigasi ke tab muat turun dan pilih fail Node.js yang sesuai berdasarkan sistem pengendalian dan seni bina komputer anda (32-bit/64-bit). Selepas memuat turun fail, jalankan dan teruskan dengan pemasangan Node.js pada mesin tempatan anda. Untuk mengesahkan bahawa Node.js berjaya dipasang pada mesin anda, buka terminal anda dan jalankan arahan berikut:

node -v
npm -v
Salin selepas log masuk

Jika mereka memberikan versi mereka, itu bermakna Node.js berjaya dipasang.

Mencipta Projek React

Untuk menyediakan projek React, buka penyemak imbas web pilihan anda dan cari "Vite". Lawati laman web rasmi Vite dan salin arahan "npm create vite@latest". Kemudian, tampal arahan ini ke dalam terminal anda. Anda akan diminta untuk memberikan beberapa maklumat seperti nama projek anda, pustaka dan bahasa pilihan untuk pustaka React. Setelah anda menjawab soalan, navigasi ke folder projek anda dan buka terminal dalam folder ini. Jalankan arahan "npm i" untuk memuat turun pakej yang diperlukan. Untuk menjalankan projek, gunakan arahan "npm run dev" dan projek akan dijalankan pada localhost:5137. tahniah! Anda telah berjaya menyediakan projek pertama anda. ?

Memahami Struktur Fail

Selepas menyediakan projek React, bukanya dalam editor kod kegemaran anda. Sebaik sahaja anda membuka projek, anda akan melihat beberapa fail dan folder. Anda akan menemui fail index.html, yang merupakan fail utama untuk memaparkan HTML anda dalam pelayar web. Di dalam folder src, anda boleh mencipta folder dan fail untuk menjadikan aplikasi web anda berfungsi dan kelihatan seperti yang anda mahukan. Terdapat dua fail utama: main.js, yang bertanggungjawab untuk memaparkan komponen dalam React dan app.js, yang berfungsi sebagai titik masuk untuk komponen.

Kesimpulan

Tahniah! Anda baru sahaja membina apl React pertama anda dari awal. Sepanjang perjalanan ini, anda telah mempelajari cara menyediakan persekitaran anda, mencipta projek menggunakan Vite dan memahami struktur fail. Fleksibiliti dan struktur berasaskan komponen React menjadikannya alat yang berkuasa untuk membina aplikasi web yang moden dan dinamik. Memandangkan anda telah menguasai asas-asasnya, anda sudah bersedia untuk meneroka ciri yang lebih maju dan membawa kemahiran React anda ke peringkat seterusnya. Teruskan mencuba, membina dan belajar – kemungkinan dengan React tidak berkesudahan!

Atas ialah kandungan terperinci Mulakan Perjalanan React Anda: Cara Mencipta Apl React Pertama Anda!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan