Menambahkan script code pada blog (menyisipkan desain pada script)

Bagaimana caranya agar bisa menyisipkan baris kode dengan rapi dan terlihat baik.
Agar tampilan script code terlihat lebih fresh seperti ini

console.log('Hello Kamu!');

Cukup salin code di bawah ini :

<div style="background-color: #f3f3f3; padding: 10px; text-align: left;">
'isi kode anda  disini'</div><br />

Setelah disalin , paste (tempel) pada tag html sebelah compose yang ada diblog.

atau tampilan script code ingin seperti ini

Pertama

console.log('Hello Kamu!');

Salin code di bawah ini :

<div style="background-color: #f3f3f3; padding: 10px; text-align: left;">
<pre class="result notranslate" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: inherit; color: #333333; font-family: monospace, monospace; font-size: 15px; line-height: 1.42857; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;">'isi kode anda disini'</pre>
</div><br />

Kedua

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!         </div>
      );}

Salin code di bawah ini :

<pre style="background-color: #0c1021; color: #f8f8f8; font-family: 'Courier New'; font-size: 9.0pt;"><span style="color: #fbde2d;">class </span>App <span style="color: #fbde2d;">extends </span>React.Component {
   render() {
      <span style="color: #fbde2d;">return </span>(
         &lt;<span style="color: #7f90aa;">div</span>&gt;
            <span style="font-weight: bold;">Hello World!!!</span><span style="font-weight: bold;">         </span>&lt;/<span style="color: #7f90aa;">div</span>&gt;
      );</pre>
<pre style="background-color: #0c1021; color: #f8f8f8; font-family: 'Courier New'; font-size: 9.0pt;">}</pre>
<br />

Itulah beberapa desain script code agar lebih terlihat rapi dan apik

Read More

Langkah-langkah install ReactJS dengan NPM (Babel, React DOM, Webpack)

Terkadang rumit tapi kalo diikuti langkah per langkah dengan baik pasti bisa. Ane mau ngasih tau step by stepnya
Yang pertama harus udah install node.js nya plus npm nya. cara installnya bisa liat dari doc nya di mari -> node JS . Caranya tinggal download terus ikuti langkah-langkahnya.
Kemudian buat folder yang diinginkan misalnya projekreact. Ane simpan di c:\xampp\htdocs. Tapi sebenernya bebas mau disimpan dimana juga. kemudian buka command prompt, dan ketikkan perintah :

C:\xampp\htdocs>cd projekreact

C:\xampp\htdocs\projekreact>npm init

fungsi init adalah membuat package.json. jika ada perintah enter saja.

Install Plugin Babel secara Global
Pada command prompt ketikan perintah

npm install -g babel

npm install -g babel-cli

Install Plugin Webpack
Pada command prompt ketikan perintah

npm install webpack --save

npm install webpack-dev-server --save

Install ReactJS dan React DOM
Pada command prompt ketikan perintah

npm install react --save

npm install react-dom --save

Install Beberapa Plugin Babel
Pada command prompt ketikan perintah

npm install babel-core

npm install babel-loader

npm install babel-preset-react

npm install babel-preset-es2015

Kemudian dalam folder projekreact buat file
1. index.html
2. App.jsx
3. main.js
4. webpack.config.js
Lalu buka file webpack.config.js. Isi dengan perintah di bawah ini. port:8080 dapat diganti dengan port sesuai keinginan.

var config = {
   entry: './main.js',
 
   output: {
      path:'/',
      filename: 'index.js',
   },
 
   devServer: {
      inline: true,
      port: 8080
   },
 
   module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
    
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   }
}

module.exports = config;

Lalu dalam package.json kita hapus "test" "echo \"Error: no test specified\" && exit 1" dan ganti dengan

"start": "webpack-dev-server --hot"

perintah ini berfungsi agar kita dapat mengeksekusi app dengan perintah npm start langsung dari server dan --hot berfungsi saat merubah kode kita tidak perlu merefresh browser.

dalam index.html 

<!DOCTYPE html>
<html lang = "en">

   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>

   <body>
      <div id = "app"></div>
      <script src = "index.js"></script>
   </body>

</html>

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!
         </div>
      );
   }
}

export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'))

Setelah semuanya selesai tinggal eksekusi aplikasinya
ketikan perintah

npm start

Tunggu running setelah selesai ketikkan localhost:8080 (sesuai port) pada browser .

Selamat anda berhasil jika telah sampai langkah ini.

Read More

Error saat membuat app baru ReactJS (npm ERR!)

     Jangan khawatir jika saat memulai membuat aplikasi Reactjs mengalami error. Salah satu solusinya adalah dengan mengupgrade atau mendowngrade npm , ini kasus ane karena ternyata npm ane versi 5.4.0 (entah kurang terdukung atau apa yang jelas ane mengalami error seperti ini).

Cara untuk mendowngrade atau mengupgrade npm bisa dilihat di tutorial ane sebelumnya disini cara mengupgrade npm
nah setelah itu kita pilih versi yang kita mau. ane downgrade jadi 5.3.0 dari 5.4.0

Kemudian kita ulangi lagi membuat aplikasi ReactJs bisa dilihat tutorialnya disini Membuat web atau aplikasi dengan react
Tunggu prosesnya semoga tidak mendapatkan error kembali.

Lalu kita running jika berhasil dengan menulis perintah

cd <nama-aplikasi>
npm start

Masih terkena error? mungkin masih ada kekurangan atau ketidaksesuaian dalam menginstall. Hati-hati jangan typo saat menulis. Happy coding!

Read More

Membuat web atau aplikasi dengan ReactJS

Its so simple !

cukup buka command prompt dan ketikkan perintah ini :

npm i create-react-app -g

atau

npm install -g create-react-app

Perintah tersebut merupakan perintah agar kita bisa membuat aplikasi react secara global.
Kemudian jangan lupa mau dimana kita menyimpan aplikasinya kemudian ketik

create-react-app <nama-aplikasi>

Contoh ane simpan aplikasinya di e folder react dan nama aplikasinya belajar-react

Setelah semua selesai
tinggal running dengan perintah

cd <nama-aplikasi>
npm start

Semoga berhasil!

Read More

Cara mengupgrade NPM nodeJS

     Mudah sekali cara mengupgrade npm lawas kita. Mengapa harus diupgrade? karena terkadang aplikasi tidak bisa berjalan karena syarat atau spekny tidak sesuai, kaya yang ane alamin sekarang udah clone aplikasi (istilah keren menurut ane artinya copy dari github) ujung-ujungnya gagal.
     npm itu apa?? npm itu bisa dibilang alat atau tools untuk javascript, package manager punya javascript yang menggunakan nodeJS. Jadi penting juga peran npm ini. bisa di cek versi npm kita melalui command prompt dengan mengetik

npm -v

oke mudah aja,
ini link tutorialnya https://github.com/felixrieseberg/npm-windows-upgrade
Di dalamnya udah lengkap plus langkah-langkahnya.
ini ane juga mau ngasih langkahnya
pertama buka windows powershell. Bukanya sebagai administrator (Run as administrator).
terus masukin skrip ini

Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Force
npm install --global --production npm-windows-upgrade
npm-windows-upgrade

Nah disini tinggal pilih mau versi berapa. ane pilih versi 5.4.0
tunggu sampai keluar tulisan kaya begini berarti upgrade npm berhasil dan selamat menyambut hari cerahmu ! Come back ngoding guys.

Read More