[trick] create-react-app Setiap Buat Project React

Bismillah…

silahkan googling sendiri ya, tulisan ini:

create-react-app

Semacam tools untuk membuat project berbasis React, dengan memanfaatakn paket manager, seperti NPM ataupun YARN. Berikut ini struktur isi dari hasil downloadannya:

#Problem_1

Pas jalankan create-react-app ternyata muncul error seperti ini:

secara default, create-react-app menggunakan paket manager “YARN” tapi, kita kudu update dulu ternyata, silahkan yang mau update kalo gak mau juga silahkan, bisa gunakan trick ini, menggunakan paket manager “NPM”, seperti gambar dibawah ini:

Done, Mudahkan? silahkan bereksplorasi.

Sumber:

  1. https://github.com/facebook/create-react-app/issues/4611#issuecomment-440987612
  2. https://github.com/facebook/create-react-app/issues/5396#issuecomment-443032235
Advertisements

[trick] Upload Docusaurus Localhost ke Github Pages

Bismillah…

Langsung ajah lo liat video youtube ini:

Jadi, Langkahnya yang gw tangkep:

  1. Buat Repository di Github
  2. Clone ke Lokal (Komputer)
  3. Install docusaurus di Folder hasil clone (di dalam foldernya), gw anggep lu tau install docusaurus
  4. Push ke master
  5. Commit ke branch
  6. $ git checkout -b gh-pages
  7. Masuk ke folder website, jalankan perintah ini:yarn run build # or `npm run build`
  8. $ git add -f website/build/nama_repo_github && git commit -m “Initial dist subtree commit”
  9. $ git subtree push –prefix website/build/nama_repo_github origin gh-pages
  10. Done. akses via: nama_username.github.io/nama_repo_github

 

#Permasalahan_ke_1

Tanya: Gw Pengen Update ke Master, tapi github.io gak update?

Jawab:

  1. git branch -d the_local_branch
  2. git push origin –delete the_remote_branch
  3. Ikuti Ke-6 diatas sanpai langkah terakhir
  4. Selesai terupdate

Have a Nice Day!

source:

 

 

 

 

[info] Belajar Translate E-Book React FullStack

Bismillah…

Iseng-iseng, cari ebook yang “FREE” untuk belajar React, ternyata ada!! silahkan ke alamat ini: https://turl.ca/react-30-days Dan gw coba contact author/ penulis/ team nyah, dan dibalas oleh Bu Mellisa.

Wow, padahal iseng, okelah, ini bakalan jadi project translate buku programming pertama gw, bismillah… niat kuat, sehari 1 bab, sekalian belajar, kalo kata pribahasa, sekalian nyelam sekalian minum air. Oya, sebetulnya di ebooknya ada link Github, kita bisa edit (fork dahulu) dengan format .md semacam format blog static yang biasa dipakai oleh github.io atau dijalankan di local dengan docusaurus.io … terserah dah, tp gw lebih memilih menggunakan microsoft word – karena pake linux, jadi gw pake “KingSoft Writer 2013”, mungkin nanti gw coba pake yak, biar gampang kalo ada update sepertinya jika pakai format static blog.

Okay, hari ini review sekilas dulu gw bukunya, setelah itu baru gw tulis bab-1 nyah. Doakan smg dimudahkan, agar para fullstack developer react Indonesia bisa maju, bisa bersaing dengan Programmer Facebook. *loh

Sekian ya, Terima kasih.

Wassalam.

Have a nice day.

[trick] Cara Cepat Buat Project di React – ReactJS

Bismillah…

Bbbrp hari ini gw ikutin tutorial pembuatan 10 project dengan react, ini videonya:

ReactJS and Redux Learning by Doing 10 Project

Karena keterbatasan otak gw, sedikit pusing ikutin tutorialnya, terutama di Project ke-3 (Github Profiler Viewer), karena banyak error dan banyak dependensi yang sdah tidak di support, seperti struktur file config.js si webpack yang berbeda, alhasil, coba cari di google dengan keyword “Starter React Project”, akan muncul banyak, diantaranya:

  1. https://dev.to/drminnaar/11-react-examples-2e6d
  2. https://medium.mybridge.co/react-js-open-source-for-the-past-year-2018-a7c553902010
  3. https://github.com/facebook/create-react-app

Point diatas beberapa ada project yang sudah jadi sih, tapi karena gw baru belajar, mau fokus di project React, ada di point-3, kita tidak dipusingkan dengan webpack dan babel untuk configurasinya…  dengan memanfaatkan “Create React App”.

cukup ketika ini saja:

npx create-react-app my-app

sudah jadi. simpel banget.

#Update

Ups, itu error … untuk solve silahkan klik link ini: https://github.com/facebook/create-react-app/issues/4611#issuecomment-440987612

ini ss yang tidak error:

 

Done!

Have a nice day.

[share] JSX adalah JavaScript Xml

Bismillah…

Catatan baru lagi, jadi di ReactJS, kita akan berkenalan dengan NEXT-GEN dari Javascript, jika file yang kita simpan biasanya tertulis .js jika kita mengembangkan dengan ReactJS maka lebih memilih .jsx … ini contoh potongan code dari JavaScript dan JavaScriptXml …

Ini adalah potongan penulisan Javascript:

 
<script type="text/javascript">
React.render(React.createElement('div', null, 'Hello World'), document.body );
</script>

Ini adalah potongan penulisan JavascriptXml:

<script type="text/babel">
	var HelloWorld = React.createClass({
		render: function() {
			return <div>
					<h1>Hello World, Again!</h1>
					<p>This is some Text</p>
			</div>
		}
	});
	React.render(<HelloWorld />, document.body );
</script>

kurang lebih tampilannya seperti ini:

Gw Jelasin sedikit ya,di potongan code pertama itu menggunakan syntact text/javascript, sedangkan di potongan ke dua menggunakan sytact text/babel yaudah segitu aja jelasan singkatnya, nah kalo di liat dari gambar ada tag blabla … , react akan create object bernama class HelloWorld … yang isinya dikenal dengan prop (propertis)

yang isinya children (index array) tag

dan tag

, mohon koreksi kalo gw salah jelasin, itu yang gw fahamin dan bisa jelaskan.

Sekian, semoga bermanfaat.

source:

  1. https://cdnjs.com/libraries/babel-core/5.8.29

[share] ReactJS, Kita Kenalan Agar PDKT Lancar

Bismillah…

A JavaScript library for building user interfaces

Itu adalah Hastag saat membuka web resmi ReactJS, beberapa info yang gw dapat, apa sih reactJS:
  1. Produk OPENSOURCE yang dikembangkan oleh DEVELOPER FACEBOOK
  2. Bisa Untuk Aplikasi Besar dan Siap Produksi, dan juga mendukung SPA (Single Page Application)
  3. Menggunakan Virtual DOM.
  4. Menggunakan Syntact JSX (ES2015), JavaScriptXml

#OOT

Virtual DOM, merupakan JS Object. berikut gambaran pengertian Virtual DOM di JS

Source: Lynda – React JS

#TOOLS

Beberapa tools yang digunakan untuk mengembangkan react web dev, react dev tools, search di extensions google chrome ya.

Dah ya, pengenalan sekarang, nanti kita akan bermain framework react, yaitu NEXT.JS.

Have a nice day!

Topidesta a.k.a emang_dasar