Langsung ke konten utama

Postingan

Menampilkan postingan dengan label React Js

REACTJS #2 MEMBUAT COMPONENT

  Component dalam dunia pemrograman bisa di artikan sebagai bagian-bagian yang tersusun satu kesatuan dengan fungsi teretentu. ReactJS sebagai front end dari website mengadopsi sistem component, dimana website di bagi menjadi beberapa component kemudian digabungkan dalam satu frame. Component ini seperti navigasi, header, footer, content, dan lain sebagainya. Menariknya component yang dibuat pada ReactJS dapat digunakan berulang kali di tempat manapun. Contohnya ketika membuat sebuah card view , programer hanya perlu membuat satu component card view kemudian memanggilnya berulang kali sesuai yang di inginkan. Lalu bagaimana cara memulai membuat componetn di ReactJS ? Mari simak langkah-langkah di bawah ini. 1. Buka project yang telah di buat Bagi yang belum tahu cara membuat project baru ReactJS silahkan ikuti tutorial dari awal Cara Install ReactJs dengan Mudah . 2. Buat folder component Buka project baru yang telah dibuat lalu buat folder baru dengan nama component pada directo...

REACTJS #1 MEMBUAT TAMPILAN HELLO WORLD!

  Menampilkan tulisan ataupun tag HTML merupakan hal utama yang perlu diketahui dalam ReactJS. Seperti halnya ketika pertama kali mempelajari pemrograman bahasa lain akan diajarkan cara menampilkan tulisan. Pada pembelajaran pertama REactJS ini juga akan di ajarkan cara menampilkan tulisan berupa kata "Hello World!". Sebelumnya pastikan untuk membuat project baru terlebih dahulu. Untuk cara pembuatan project baru ReactJS silahkan baca Membuat dan Menjalankan Project Baru ReactJS . Selanjutnya ikuti langkah-langkah dibawah ini untuk memulai menampilkan tulisan. 1. Edit file App.js File JS utama yang pertama kali akan di eksekusi ketika program dijalankan adalah App.js yang berada di directory src -> App.js . Secara default untuk versi terbaru kodenya akan tampak seperti berikt : import React from 'react'; import logo from './logo.svg'; import './App.css'; function App() { return ( <div className="App"> <header classNa...

Membuat dan Menjalankan Project Baru ReactJS

  Sebelumnya kita telah belajar mengenai bagaimana cara menginstall ReactJS pada postingan Cara Install ReactJs dengan Mudah . Kali ini kita akan mulai membuat project baru menggunakan ReactJS. Berikut langkah-langkah yang perlu anda lakukan. Buka CMD dan arahkan ke directory tempat anda ingin membuat project reactjs. Misalnya jika anda ingin menyimpan pada directory "D:/belajar_react/" anda bisa mengeetikkan perintah pada cmd cd D:/belajar_react/ kemudian tekan enter. Selanjutnya ketikkan perintah create-react-app project_baru , perintah ini untuk membuat project baru dengan nama "project_baru". Nantinya pada directory D:/belajar_react/ tadi akan muncul folder baru dengan nama "project_baru" Melakukan penginstalan library/komponen yang dibutuhkan, caranya arahkan cmd ke folder "project_baru" kemudian ketikkan perintah npm install (pastikan terhubung dengan internet). Menjalankan project dengan melakukan perintah npm start terlebih dah...

Cara Install ReactJs dengan Mudah

  Sebelumnya kita telah membahas tentang apa itu ReactJs pada postingan Mengenal Apa itu React Js . Untuk itu pada postingan kali ini kita akan memulai langkah pertama untuk bisa mempraktekkan langsung atau membuat project dengan ReactJS. Langkah pertama yang harus dilakukan adalah memasang ReactJs, dimana anda memerlukan NPM. Baca lebih jauh menegenai Apa itu NPM . Adapun Langkah-langkah sebelum anda dapat menginstall ReactJs adalah sebagai berikut : 1. Install Node js -> Baca disini 2. Pastikan NPM sudah terinstall (NPM satu paket ketika Node js di install), cara mengeceknya dengan membuka CMD dan ketikkan perintah npm -v , jika muncul versi NPM seperti pada gambar dibawah, berarti NPM sudah siap digunakan. 3. Install create-react-app caranya buka CMD dan ketikkan perintah npm install -g create-react-app kemudian tunggu hingga proses selesai. Pastikan anda memiliki koneksi internet sebab program akan mendownload beberapa file. Sampai disni anda sudah berhasil memasang d...

Apa Sih Itu Svelte Js? Bagaimana Cara Menjalankannya? Yuks Simak Pembahasan Berikut Ini

(Sumber : Website https://svelte.dev/)   Hallo Sahabat Coders, Semoga kita semua selalu diberikan Kesehatan dan keberlimpahan dalam pekerjaan atau usaha kita. Perkembangan dunia pemrograman semakin hari semakin menjadi-jadi. Banyak Bahasa pemrograman maupun framework baru bermunculan akhir-akhir ini. Terutama framework JavaScript yang yang banyak bermunculan. Dan semuanya sangat menarik untuk dicoba.  Framework JavaScript yang terkenal saat ini contohnya Angular JS, Vue JS, React JS dan lain sebagainya dan mungkin banyak orang sudah tahu tentang framework- framework ini. Namun, akhir-akhir ini, ada framework yang baru terkenal yaitu Svelte JS (Website : https://svelte.dev/ ). Framework ini Admin tahu dari seorang JavaScript Developer terkenal di Indonesia yaitu Mas Riza Fahmi ( Curriculum Director di Hacktiv8 Indonesia ). Svelte Js merupakan sebuah framework JavaScript untuk menulis komponen antarmuka ( user interface) yang dibuat oleh Rich Harris . Namun menurut penulisn...

Mengenal Apa itu React Js

  Sebagai programer web anda tentunya sudah tidak asing dengan JavaScript, bahasa ini merupakan bahasa yang umum dipelajari dalam dunia website. Namun tahukah anda ada beberapa library JavaScript yang dibangun untuk mempermudah dalam pengembangan web. Salah satu Library itu adalah React Js. Apa itu React Js ? React Js merupakan sebuah Library JavaScript yang dibuat oleh Facebook dengan tujuan untuk membangun antar muka pengguna yang lebih mudah. React Js hadir untuk membantu developer dalam membuat UI atau kumpulan menu di layar yang dapat dibuat dan dipanggil berulang kali sesuai keinginan. Fitur Utama React Js React Js hadir dengan dua fitur utama yang tentunya menambah daya tarik React Js itu sendiri. Dua fitur utama itu adalah fitur JSX dan DOM Virtual . JSX JSX merupakan ekstensi sintaksis yang mirip dengan XML tetapi ditujukan untuk JavaScript. JSX ini dibuat oleh Facebook guna menyederhanakan dalam membangun program atau aplikasi. Selain itu JSX bertujuan untuk mendefini...