create web3 dapp - create web3 dapp

create web3 dapp

Kode Sumber AI

1.0.0

Unduh

Buat Web3 Dapp

create-web3-dapp

Semua yang Anda butuhkan untuk membuat dapp Web3 dalam 4 menit.

Paket ini termasuk perintah global untuk memulai pembangun Create Web3 Dapp CLI.

Silakan merujuk ke dokumentasi paket ini dan tautan berikut untuk penjelasan mendalam:

Documents - semua yang perlu Anda ketahui saat menggunakan CW3D
GitHub - Lihatlah contoh kode yang luas atau mulai berkontribusi
Situs web - Pelajari lebih lanjut tentang CW3D dan tambahkan komponen ke proyek Anda
Template - Lihat template proyek yang sudah dibangun sebelumnya
Perpustakaan Komponen - Tambahkan fitur langsung ke proyek Anda melalui komponen
Contoh - lihat komponen yang diterapkan dalam DAPP DUNIA DUNIA
Komunitas - Temui pembangun lain, dapatkan dukungan, dan berikan umpan balik!

? Tidak Perlu Klon: Jalankan "NPX CREATE-WEB3-DAPP@LARDER" di terminal Anda untuk memulai

Apa yang termasuk?

Lingkungan Anda akan memiliki semua yang Anda butuhkan untuk mulai membangun DAPP:

Rantai yang didukung

Dengan Create-Web3-Dapp Anda dapat membuat DAPP multi-rantai yang mendukung semua rantai berbasis EVM utama:

Dukungan untuk rantai non EVM ada di peta jalan

Apa itu create-web3-dapp?

Create-Web3-Dapp adalah alat NPX yang memungkinkan pengembang untuk membuat aplikasi Web3 dalam ~ 4 menit.

DAPP yang dibuat dengan Create-Web3-Dapp berbasis NextJS, dan kompatibel dengan blockchain yang paling banyak digunakan seperti Ethereum, Polygon, Optimism, Arbitrum, dan Solana . Create-WEB3-DAPP memungkinkan pengembang Web3 untuk membangun aplikasi desentralisasi yang siap-produksi dengan kecepatan kilat, menggunakan komponen reaksi, webhooks, dan API yang sudah dibuat sebelumnya.

Tidak ada konfigurasi atau struktur folder yang rumit, hanya file yang Anda butuhkan untuk membangun DAPP Anda.

template

Filsafat

Satu ketergantungan: Hanya ada satu ketergantungan build. Ini menggunakan Webpack, Babel, Eslint, dan proyek -proyek luar biasa lainnya, tetapi memberikan pengalaman yang kohesif yang dikuratori di atasnya.
Tidak diperlukan konfigurasi: Anda tidak perlu mengonfigurasi apa pun. Konfigurasi yang cukup baik untuk pembangunan dan pembangunan produksi ditangani untuk Anda sehingga Anda dapat fokus pada kode penulisan.
No Lock-In: Anda dapat "mengeluarkan" ke pengaturan khusus kapan saja. Jalankan satu perintah, dan semua konfigurasi dan dependensi membangun akan dipindahkan langsung ke proyek Anda, sehingga Anda dapat mengambil tepat di tempat yang Anda tinggalkan.

Kapan Menggunakan CW3D

Buat Web3 Dapp sangat cocok untuk:

Mempelajari Web3 dalam lingkungan pengembangan yang nyaman dan kaya fitur.
Memulai Aplikasi Web3 Baru
Menguji sesuatu dan bereksperimen dengan bereaksi untuk perpustakaan dan komponen Anda.

Penggunaan

 npx create-web3-dapp@latest

Jika sebelumnya Anda telah menginstal create-web3-dapp secara global melalui npx create-web3-dapp , pembangun CLI akan memberi tahu Anda jika versi baru telah dirilis. Bagaimanapun, kami menyarankan Anda untuk menjalankan menggunakan versi terbaru yang tersedia dengan menjalankan npx create-web3-dapp@latest .

(NPX dilengkapi dengan NPM 5.2+ dan lebih tinggi, lihat instruksi untuk versi NPM yang lebih lama)

Awal yang cepat

Untuk membuat aplikasi baru:

Di terminal Anda menjalankan:

  npx create-web3-dapp@latest

Pilih dan buat dependensi, komponen, dan kontrak yang ingin Anda sertakan dalam aplikasi Web3 Anda.

Buat Web3 Dapp kemudian akan membuat direktori yang berisi file untuk memulai proyek Anda dan menginstal ketergantungan instal yang Anda perlukan

npx create-web3-dapp@latest
cd my-create-web3-dapp
npm run dev

Jika Anda telah memasang lingkungan pengembangan blockchain, navigasikan ke folder Frontend sebelum menjalankan NPM Run Dev.

Sekarang navigasikan di http: // localhost: 3000/untuk melihat dapp Anda.

Selanjutnya, pelajari cara menambahkan komponen Web3 Ready dari perpustakaan create-web3-dapp.

Backpack Kontrak Cerdas - Pencipta Kontrak CLI CLI

Buat Web3 Dapp tidak hanya mengatur lingkungan pengembangan blockchain Anda, bahwa untuk ransel kontrak pintar bawaan yang juga memungkinkan untuk membuat kontrak pintar soliditas yang sepenuhnya dikurangi langsung dari CLI.

Catatan: Ini hanya akan berfungsi jika Anda telah memasang lingkungan pengembangan blockchain

Ransel Kontrak Cerdas dapat membuat kontrak pintar yang diaudit, skrip dan tes penyebaran, dari salah satu standar berikut:

ERC721: Kontrak Cerdas Koleksi NFT
ERC20: kontrak pintar mata uang kripto
ERC1155: Kontrak Pintar yang Menyembuhkan Fungibilitas

Pelajari lebih lanjut tentang cara membuat, membangun, dan menggunakan, ransel kontrak pintar di dokumen.

Perpustakaan Web3 React Components

Buat Web3 Dapp memungkinkan pengembang untuk membuat prototipe DAPP mereka dalam hitungan menit berkat pustaka lengkap komponen reaksi Web3 yang responsif, produksi, Web3.

Catatan: Komponen bekerja paling baik di dalam proyek create-web3-dapp, tetapi kompatibel dengan proyek NextJS.

Gunakan tautan berikut untuk mempelajari cara mengimplementasikan komponen di perpustakaan :

Docs: Panduan Brokendown untuk setiap komponen
GitHub: Lihat komponen yang diterapkan dalam proyek dunia nyata

komponen

Contoh Implementasi:

Di /komponen membuat nftcreator.jsx
Di/styles create nftcreator.module.css
Di /pages/apicreatepinfiletoipfs.jspinjsontoipfs.js
Salin kode yang sesuai di bawah ini ke masing -masing file yang dibuat di atas.
Impor komponen NFTCreator di bagian atas halaman Anda:

 import styles from "../styles/Home.module.css" ;
import NftCreator from "../components/nft-creator" ;
import contract from "../abis/smartContractAbi.json" ;

export default function Home ( ) {
	return (
		< div >
			< main className = { styles . main } >
				< NftCreator
					abi = { contract . abi }
					contractAddress = {
						"0x9FaCAf075Cda7C0947DA0F0B4164332e01422E97"
					}
				/>
			</ main >
		</ div >
	) ;
}

Lebih banyak komponen? Periksa instruksi terperinci pada dokumen.

PERPUSTAKAAN TEMPLAT DAPP

Buat Web3 Dapp memberi Anda akses ke perpustakaan produksi siap, aplikasi Web3 untuk memulai proyek Anda. NFTS Explorer, dan banyak lagi yang akan segera hadir.

Templat tersedia untuk digunakan pengembang, atau dapat disesuaikan agar sesuai dengan kebutuhan proyek khusus mereka.

Catatan: Menjaga ketergantungan seminimal mungkin, dan kode lean adalah prioritas utama kami, ini untuk memberikan templat, penyesuaian penuh.

Gunakan tautan berikut untuk mempelajari cara memulai DAPP Anda menggunakan Pustaka Template :

Template Docs
Perpustakaan Template
GitHub (segera hadir)

template

Struktur folder

Create-Web3-Dapp memiliki dua struktur folder, berdasarkan pada keberadaan lingkungan pengembangan blockchain, atau tidak.

Dengan lingkungan pengembangan blockchain

 ?Root
 ┣ components
 ┃ ┣ navigation
 ┃ ┃ ┗ navbar.jsx
 ┃ ┗ InstructionsComponent.jsx
 ┣ layout
 ┃ ┗ mainLayout.jsx
 ┣ pages
 ┃ ┣ api
 ┃ ┣ _app.js
 ┃ ┗ index.jsx
 ┣ public
 ┃ ┗ alchemy_logo.svg
 ┣ styles
 ┃ ┣ Home.module.css
 ┃ ┣ Navbar.module.css
 ┃ ┣ InstructionsComponent.module.css
 ┃ ┗ globals.css
 ┣ .env.local
 ┣ .gitignore
 ┣ next.config.js
 ┣ package-lock.json
 ┗ package.json

Tanpa lingkungan pengembangan blockchain

 ?Root
 ┣ .vscode
 ┃ ┗ settings.json
 ┣ backend
 ┃ ┣ contracts
 ┃ ┃ ┗ MyContract.sol
 ┃ ┣ scripts
 ┃ ┃ ┗ MyContract_deploy.js
 ┃ ┣ test
 ┃ ┃ ┗ Lock.js
 ┃ ┣ .env.local
 ┃ ┣ hardhat.config.js
 ┃ ┣ package-lock.json
 ┃ ┗ package.json
 ┣ frontend
 ┃┣ components
 ┃ ┃┣ navigation
 ┃ ┃ ┗ navbar.jsx
 ┃  ┃┗ InstructionsComponent.jsx
 ┃┣ layout
 ┃┃ ┗ mainLayout.jsx
 ┃┣ pages
 ┃┃ ┣ api
 ┃┃ ┣ _app.js
 ┃┃ ┗ index.jsx
 ┃┣ public
 ┃┃ ┗ alchemy_logo.svg
 ┃┣ styles
 ┃┃ ┣ Home.module.css
 ┃┃ ┣ Navbar.module.css
 ┃┃ ┣ InstructionsComponent.module.css
 ┃┃ ┗ globals.css
 ┃┣ .env.local
 ┃┣ .gitignore
 ┃┣ next.config.js
 ┃ ┣ package-lock.json
 ┃ ┗ package.json
 ┣ .DS_Store
 ┣ .env.local
 ┣ .gitignore
 ┣ LICENSE
 ┗ README.md

Berkontribusi

Kami ingin memiliki bantuan Anda di create-web3-dapp ! Lihat Kontribusi.MD untuk informasi lebih lanjut tentang apa yang kami cari dan bagaimana memulai.

Mendukung Buat Web3 Dapp

Create Web3 Dapp adalah proyek yang dikelola komunitas dan semua kontributor adalah sukarelawan. Jika Anda ingin mendukung pengembangan aplikasi Create React di masa depan maka silakan pertimbangkan untuk menyumbang ke Open Collective kami.