React js single page aplication

Hallo Teman – teman, Kali ini Kita Bertemu Kembali walaupun hanya sebatas postingan. Kalian dapat dengan mudah membuat single page yang telah dibuatkan oleh facebook itu sendiri. Dan Saya Ingatkan kembali, jadi kalian harus sudah melakukan instalasi Node.Js Karena kita akan gunakan sebuah package NodeJS yaitu NPM.

Jika belum install ? Kalian pelajari disini : https://docs.npmjs.com/getting-started/

Okehh Kita Mulai Saja untuk pembuatan Single Page, Silahkan buka terminal / cmd, kemudian Ketik

npm install -g create-react-app

create-react-app hello-world

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

cd hello-world

npm start

Nahh Kalian sudah membuat single page, tampilan seperti berikut :

untuk berhenti bisa tekan CTRL+C

Jika melihat struktur app nya, kalian bisa 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):

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

npm run eject

maka struktur akan berubah seperti ini :

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": [
       "/config/polyfills.js"
     ],
     "testPathIgnorePatterns": [
       "/\\[/\\]"
     ],
     "testEnvironment": "node",
     "testURL": "http://localhost",
     "transform": {
       "^.+\.(js|jsx)$": "/node_modules/babel-jest",
       "^.+\.css$": "/config/jest/cssTransform.js",
       "^(?!.*\.(js|jsx|css|json)$)": "/config/jest/fileTransform.js"
     },
     "transformIgnorePatterns": [
       "[/\\]node_modules[/\\].+\.(js|jsx)$"
     ],
     "moduleNameMapper": {
       "^react-native$": "react-native-web"
     }
   },
   "babel": {
     "presets": [
       "react-app"
     ]
   },
   "eslintConfig": {
     "extends": "react-app"
   }
 }

Apakah ada yang masih belum paham dengan script code di atas ?? , dalam struktur atau code diatas melihat gambaran universal untuk membangun react-app. Kalian lebih baik belajar dari bawah dulu yaitu belajar javascript pada postingan yang akan datang. Keep up ! (kata guru saya) ??

Berikutnya Masuk Materi ke-3 memulai belajar ekosistem dari react app: NodeJs, NPM, Package.json atau belajar cepat tentang dasar React melanjutkan postingan ini >> Belajar Cepat React << Okeh, semoga bermanfaat, sampai jumpa di postingan selanjutnya.