Just another programmer's diary

Ikuti petunjuk yang diberikan disini: API Platform Admin +On Your API Platform Server App -Install nelmio/cors-bundle ╭─yoesoff@yoesoff-ThinkPad-X220 ~/Documents/Oproject/Oapi  ‹master*› ╰─➤  composer req cors -vim .env CORS_ALLOW_ORIGIN=^https?://localhost(:[0-9]+)?$ -vim  config/packages/nelmio_cors.yaml -Clear cache docker exec -it oapi_oapi_php_fpm_1  php bin/console cache:clear +Your ReactJS Admin App create-react-app Oadmin cd Oadmin yarn add @api-platform/admin +vim src/App.js  import React from 'react' ; import { HydraAdmin } from '@api-platform/admin' ; export default ( ) => < HydraAdmin entrypoint = " http://oapi.local:55/ " / > ; // Replace with your own API entrypoint +Installed

Catatan ini bertujuan mencatat proses belajar saya tentang framework JS yang bernama ReactJS. Course gratis dari Udemy ini cukup memberikan fundamental yang memadai untuk mempelajari ReactJS selanjutnya. Coursenya anda bisa dapatkan secara gratis disini . Berikut ini catatan singkat saya. Persiapan memulai belajar ReactJS React Element (Hello World!) React Component dan Import Component Belajar State di ReactJS ReactJS Asynchronous Calls Dengan fetch React JS Container dan Components ReactJS Lists dan Keys ReactJS Form dan Condition Rendering

Instalasi React Router Instalasi React Router logs . Import Router import { BrowserRouter } from 'react-router-dom' ; +src/index.js ... import { BrowserRouter } from 'react-router-dom' ; ... ReactDOM . render ( < BrowserRouter >< App /></ BrowserRouter > , document . getElementById ( 'root' )); +src/components/Main/index.js import React from 'react' ; import { Switch , Route } from 'react-router-dom' ; import Series from '../../containers/Series' ; const Main = props => ( < Switch > < Route exact path = "/" component = { Series } ></ Route > </ Switch > ) export default Main ; +src/components/App/index.js class App extends Component { render () { return ( < div className = "App" > < Main /> </ div > ); ...

Mengenal Event onChange +Bind `this` ke `onSeriesChange` Selain method-method bawaan React tidak memiliki 'this' yang benar mengacu ke class yang dimaksud. constructor ( props ) { super ( props ); this . onSeriesChange = this . onSeriesChange . bind ( this ); } +Method yang dipanggil onSeriesChange ( e ) { alert ( "hei tayo!" ); console . log ( e . target . value ); } +Pemanggilan Method render () { return ( < div > < div > Total series adalah: {this . state . series . length } </ div > < input type = "text" onChange = {this . onSeriesChange } /> < SeriesList list = {this . state . series } /> </ div > ); } Implementasi onSeriesChange onSeriesChange ( e ) { fetch ( `http://api.tvmaze.com/search/shows?q= ${ e . target . value } ` ). then (( response ) => { console . log ( response ); return response . json (); }) . then (( json ) =...

Memahami cara membuat ReactJS Lists dan Keys. src/components/SeriesList/index.css src/components/SeriesList/index.js src/containers/Series/index.js src/components/App/index.js Uppss! ada warning! Bila kita lupa memberi key pada li maka akan diwarning. index.js:1375 Warning: Each child in a list should have a unique "key" prop . Check the render method of `SeriesList`. See https://fb.me/react-warning-keys for more information.     in li (at SeriesList/index.js:9)     in SeriesList (at Series/index.js:35)     in div (at Series/index.js:33)     in Series (at App/index.js:14)     in div (at App/index.js:12)     in App (at src/index.js:9) Untuk pesan warning diatas maka kira gunakan tambahan property berikut: < ul className = "series-list" > { props . list . map ( series => ( < li key = { series . show . id } > { series . show . name } </ li > )) } </...

src/containers/series/index.js Buat folder dan file index berikut ini  src/containers/series/index.js.  Detailnya dapat dilihat seperti snapshot berikut ini: src/containers/series/index.js src/components/App/index.js Ubah file src/components/App/index.js, Detailnya dapat dilihat seperti snapshot berikut ini: src/components/App/index.js Penampakan di Browser Penampakan di Browser src/containers/series/index.js import React , { Component } from 'react' ; class Series extends Component { static get xapi () { return 'http://api.tvmaze.com/search/shows?q=vikings' ; } state = { series: [] } // dipanggil otomatis saat component dimount componentDidMount () { fetch ( Series . xapi ). then (( response ) => { console . log ( response ); return response . json (); }) . then (( json ) => { console . log ( json ); this . setState ({ series: json }); }); } // dipanggil otomatis saat c...

Pada kali ini saya akan mencatat tentang membuat http request secara async dengan cara menggunakan fetch. Fetch Request Saya akan mencoba untuk menggunakan public  API berikut ini untuk melakukan http request data-data filem yang ada  http://api.tvmaze.com/search/shows?q=vikings   // dipanggil otomatis saat component dimount componentDidMount () { // whatwg-fetch fetch ( 'http://api.tvmaze.com/search/shows?q=vikings' ) . then (( response ) => { console . log ( response ); return response . json (); }) . then (( json ) => { console . log ( json ); this . setState ({ series: json }); }); } +Render View render () { return ( < div className = "App" > < Intro messages = "Hai kawan lagi apa" person = "Jonima" /> total series ada: {this . state . series . length } </ div > ); } Console log pertama dan kedua. +Tampilan Di Browser Tampilan...

Postingan sebelumnya yang mencatat tentang  component   pada ReactJS berada dihalaman berikut ini  https://undebugable.blogspot.com/2019/06/react-component-dan-import-component.html Dan pada postingan sebelumnya lagi mencatat tentang  element  pada ReactJS berada dihalaman berikut ini  https://undebugable.blogspot.com/2019/06/react-element-hello-world.html . Pada postingan kali ini akan mencatat tentang apa dan bagaimana  State  pada ReactJS  itu digunakan. Buka project yang sudah dibuat sebelumnya  disini .  Contoh Penggunaan Keyword this this.state.bikes Contoh Constructor React Javascript Contoh constructor. Contoh Penggunaan State class App extends Component { constructor ( props ) { super ( props ); this . state = { bikes: 0 } } // dipanggil otomatis saat component dimount componentDidMount () { this . timerID = setInterval ( () => this . tick (), ...