2. Belajar ReactJS ( Membuat Single Page Application )

Membuat Single Page Application

Hai, bertemu kembali walaupun hanya sebatas postingan 😀 . Kita dapat dengan mudah membuat single page yang telah dibuatkan oleh facebook sendiri. Dan kami ingatkan kembali, bahwa saudara telah melakukan instalasi Node.JS karena kita akan menggunakan sebuah package node yaitu NPM. Belum install ? bisa pelajari disini : https://docs.npmjs.com/getting-started/

Ok … kita memulai membuat single page.
Silahkan buka terminal/cmd, kemudian ketik

npm install -g create-react-app
create-react-app hello-world

Kita akan mempunyai folder baru dengan nama hello-world, setelah itu kita masuk ke dalam folder tersebut dan menjalankan :

cd hello-world
npm start

Wush…. kita telah membuat single page, tampilan seperti berikut:

untuk berhenti bisa tekan CTRL+C

Jika melihat struktur app nya, saudara akan melihat seperti berikut:

hello-world/
  README.md
  index.html
  favicon.ico
  node_modules/
  package.json
  src/
    App.css
    App.js
    index.css
    index.js
    logo.svg

dan didalam package.json kira-kira akan seperti ini (abaikan versi karena bisa saja telah update):

{
   "name": "hello-world",
   "version": "0.0.1",
   "devDependencies": {
     "react-scripts": "0.1.0"
   },
   "dependencies": {
     "react": "^15.4.1",
     "react-dom": "^15.4.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "eject": "react-scripts eject"
   }
}

OK sip, kita dapat melihat konfigurasi automatic dari perintah create-react-app dengan cara eject dengan perintah

npm run eject

tarereng… hehe , struktur akan berubah seperti ini kira2

Awesome/
  README.md
  index.html
  favicon.ico
  node_modules/
  package.json
  src/
    App.css
    App.js
    index.css
    index.js
    logo.svg
 scripts/
    build.js
    start.js
    openChrome.applescript
 config/
    babel.dev.js
    babel.prod.js
    eslint.js
    webpack.config.dev.js
    webpack.config.prod.js

dan pada package.json

{
  "name": "hello-world",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "autoprefixer": "6.5.1",
    "babel-core": "6.17.0",
    "babel-eslint": "7.1.1",
    "babel-jest": "17.0.2",
    "babel-loader": "6.2.7",
    "babel-preset-react-app": "^2.0.1",
    "case-sensitive-paths-webpack-plugin": "1.1.4",
    "chalk": "1.1.3",
    "connect-history-api-fallback": "1.3.0",
    "cross-spawn": "4.0.2",
    "css-loader": "0.26.0",
    "detect-port": "1.0.1",
    "dotenv": "2.0.0",
    "eslint": "3.8.1",
    "eslint-config-react-app": "^0.5.0",
    "eslint-loader": "1.6.0",
    "eslint-plugin-flowtype": "2.21.0",
    "eslint-plugin-import": "2.0.1",
    "eslint-plugin-jsx-a11y": "2.2.3",
    "eslint-plugin-react": "6.4.1",
    "extract-text-webpack-plugin": "1.0.1",
    "file-loader": "0.9.0",
    "filesize": "3.3.0",
    "fs-extra": "0.30.0",
    "gzip-size": "3.0.0",
    "html-webpack-plugin": "2.24.0",
    "http-proxy-middleware": "0.17.2",
    "jest": "17.0.2",
    "json-loader": "0.5.4",
    "object-assign": "4.1.0",
    "path-exists": "2.1.0",
    "postcss-loader": "1.0.0",
    "promise": "7.1.1",
    "react-dev-utils": "^0.4.2",
    "recursive-readdir": "2.1.0",
    "strip-ansi": "3.0.1",
    "style-loader": "0.13.1",
    "url-loader": "0.5.7",
    "webpack": "1.14.0",
    "webpack-dev-server": "1.16.2",
    "webpack-manifest-plugin": "1.1.0",
    "whatwg-fetch": "1.0.0"
  },
  "dependencies": {
    "react": "^15.4.1",
    "react-dom": "^15.4.1"
  },
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js --env=jsdom"
  },
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}"
    ],
    "setupFiles": [
      "<rootDir>/config/polyfills.js"
    ],
    "testPathIgnorePatterns": [
      "<rootDir>[/\\\\](build|docs|node_modules)[/\\\\]"
    ],
    "testEnvironment": "node",
    "testURL": "http://localhost",
    "transform": {
      "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
    ],
    "moduleNameMapper": {
      "^react-native$": "react-native-web"
    }
  },
  "babel": {
    "presets": [
      "react-app"
    ]
  },
  "eslintConfig": {
    "extends": "react-app"
  }
}

Wah… enggah paham kode apaan diatas 😀 . struktur atau kode diatas melihatkan gambaran universal untuk membangun react-app. Kita akan belajar dari bawah pada postingan yang akan datang. Keep up ! (kata guru saya) 😀

Selanjutnya Materi ke-3 memulai belajar ekosistem dari react app: Node, NPM, Package.json atau belajar kilat tentang dasar React melanjutkan postingan ini >> Belajar Kilat React