ReactJS - Pengaturan Lingkungan

Di bab ini, kami akan menunjukkan kepada Anda cara menyiapkan lingkungan untuk pengembangan React yang sukses. Perhatikan bahwa ada banyak langkah yang terlibat tetapi ini akan membantu mempercepat proses pengembangan nanti. Kita akan butuhNodeJS, jadi jika Anda belum menginstalnya, periksa tautan dari tabel berikut.

Sr.No. Software & Deskripsi
1

NodeJS and NPM

NodeJS adalah platform yang dibutuhkan untuk pengembangan ReactJS. Lihat Pengaturan Lingkungan NodeJS kami .

Setelah berhasil menginstal NodeJS, kita dapat mulai menginstal React menggunakan npm. Anda dapat menginstal ReactJS dengan dua cara

  • Menggunakan webpack dan babel.

  • Menggunakan create-react-app perintah.

Menginstal ReactJS menggunakan webpack dan babel

Webpackadalah bundler modul (mengelola dan memuat modul independen). Dibutuhkan modul dependen dan mengkompilasinya ke satu bundel (file). Anda dapat menggunakan bundel ini sambil mengembangkan aplikasi menggunakan baris perintah atau, dengan mengonfigurasinya menggunakan file webpack.config.

Babel adalah compiler dan transpiler JavaScript. Ini digunakan untuk mengubah satu kode sumber ke yang lain. Dengan menggunakan ini, Anda akan dapat menggunakan fitur ES6 baru dalam kode Anda di mana, babel mengubahnya menjadi ES5 lama biasa yang dapat dijalankan di semua browser.

Langkah 1 - Buat Folder Root

Buat folder dengan nama reactApp di desktop untuk menginstal semua file yang diperlukan, menggunakan perintah mkdir.

C:\Users\username\Desktop>mkdir reactApp
C:\Users\username\Desktop>cd reactApp

Untuk membuat modul apa pun, diperlukan pembuatan package.jsonmengajukan. Oleh karena itu, setelah membuat folder, kita perlu membuat filepackage.jsonmengajukan. Untuk melakukannya, Anda perlu menjalankannpm init perintah dari command prompt.

C:\Users\username\Desktop\reactApp>npm init

Perintah ini menanyakan informasi tentang modul seperti nama paket, deskripsi, penulis, dll. Anda dapat melewati ini menggunakan opsi –y.

C:\Users\username\Desktop\reactApp>npm init -y
Wrote to C:\reactApp\package.json:
{
   "name": "reactApp",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC"
}

Langkah 2 - Instal React dan bereaksi dom

Karena tugas utama kita adalah menginstal ReactJS, menginstalnya, dan paket dom-nya, menggunakan install react dan react-domperintah npm masing-masing. Anda dapat menambahkan paket yang kami instalpackage.json file menggunakan --save pilihan.

C:\Users\Tutorialspoint\Desktop\reactApp>npm install react --save
C:\Users\Tutorialspoint\Desktop\reactApp>npm install react-dom --save

Atau, Anda dapat menginstal semuanya dalam satu perintah sebagai -

C:\Users\username\Desktop\reactApp>npm install react react-dom --save

Langkah 3 - Instal webpack

Karena kami menggunakan webpack untuk menghasilkan bundler install webpack, webpack-dev-server dan webpack-cli.

C:\Users\username\Desktop\reactApp>npm install webpack --save
C:\Users\username\Desktop\reactApp>npm install webpack-dev-server --save
C:\Users\username\Desktop\reactApp>npm install webpack-cli --save

Atau, Anda dapat menginstal semuanya dalam satu perintah sebagai -

C:\Users\username\Desktop\reactApp>npm install webpack webpack-dev-server webpack-cli --save

Langkah 4 - Instal babel

Instal babel, beserta pluginnya babel-core, babel-loader, babel-preset-env, babel-preset-react dan, html-webpack-plugin

C:\Users\username\Desktop\reactApp>npm install babel-core --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-loader --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-env --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-react --save-dev
C:\Users\username\Desktop\reactApp>npm install html-webpack-plugin --save-dev

Atau, Anda dapat menginstal semuanya dalam satu perintah sebagai -

C:\Users\username\Desktop\reactApp>npm install babel-core babel-loader babel-preset-env 
   babel-preset-react html-webpack-plugin --save-dev

Langkah 5 - Buat File

Untuk menyelesaikan instalasi, kita perlu membuat file tertentu yaitu, index.html, App.js, main.js, webpack.config.js dan,.babelrc. Anda dapat membuat file-file ini secara manual atau, menggunakancommand prompt.

C:\Users\username\Desktop\reactApp>type nul > index.html
C:\Users\username\Desktop\reactApp>type nul > App.js
C:\Users\username\Desktop\reactApp>type nul > main.js
C:\Users\username\Desktop\reactApp>type nul > webpack.config.js
C:\Users\username\Desktop\reactApp>type nul > .babelrc

Langkah 6 - Atur Compiler, Server dan Loader

Buka webpack-config.jsfile dan tambahkan kode berikut. Kami mengatur titik masuk webpack menjadi main.js. Jalur keluaran adalah tempat aplikasi yang dibundel akan disajikan. Kami juga menyetel server pengembangan ke8001Pelabuhan. Anda dapat memilih port apa pun yang Anda inginkan.

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
   entry: './main.js',
   output: {
      path: path.join(__dirname, '/bundle'),
      filename: 'index_bundle.js'
   },
   devServer: {
      inline: true,
      port: 8001
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   },
   plugins:[
      new HtmlWebpackPlugin({
         template: './index.html'
      })
   ]
}

Buka package.json dan hapus "test" "echo \"Error: no test specified\" && exit 1" dalam "scripts"obyek. Kami menghapus baris ini karena kami tidak akan melakukan pengujian apa pun dalam tutorial ini. Mari tambahkanstart dan build perintah sebagai gantinya.

"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"

Langkah 7 - index.html

Ini hanya HTML biasa. Kami sedang mengaturdiv id = "app" sebagai elemen root untuk aplikasi kami dan menambahkan index_bundle.js script, yang merupakan file aplikasi paket kami.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>
   <body>
      <div id = "app"></div>
      <script src = 'index_bundle.js'></script>
   </body>
</html>

Langkah 8 - App.jsx dan main.js

Ini adalah komponen React yang pertama. Kami akan menjelaskan komponen React secara mendalam di bab berikutnya. Komponen ini akan direnderHello World.

App.js

import React, { Component } from 'react';
class App extends Component{
   render(){
      return(
         <div>
            <h1>Hello World</h1>
         </div>
      );
   }
}
export default App;

Kita perlu mengimpor komponen ini dan merendernya ke root kita App elemen, sehingga kita bisa melihatnya di browser.

main.js

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

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

Note - Kapanpun Anda ingin menggunakan sesuatu, Anda harus melakukannya importitu dulu. Jika Anda ingin membuat komponen dapat digunakan di bagian lain aplikasi, Anda harus melakukannyaexport itu setelah dibuat dan impor di file tempat Anda ingin menggunakannya.

Buat file dengan nama .babelrc dan salin konten berikut ke dalamnya.

{
   "presets":["env", "react"]
}

Langkah 9 - Menjalankan Server

Setup selesai dan kita dapat memulai server dengan menjalankan perintah berikut.

C:\Users\username\Desktop\reactApp>npm start

Ini akan menunjukkan port yang perlu kita buka di browser. Dalam kasus kami, itu benarhttp://localhost:8001/. Setelah kita membukanya, kita akan melihat output berikut.

Langkah 10 - Menghasilkan bundel

Terakhir, untuk menghasilkan bundel, Anda perlu menjalankan perintah build di command prompt sebagai -

C:\Users\Tutorialspoint\Desktop\reactApp>npm run build

Ini akan menghasilkan bundel di folder saat ini seperti yang ditunjukkan di bawah ini.

Menggunakan perintah create-react-app

Daripada menggunakan webpack dan babel, Anda dapat menginstal ReactJS lebih mudah dengan menginstal create-react-app.

Langkah 1 - instal create-react-app

Jelajahi desktop dan instal Buat Aplikasi React menggunakan command prompt seperti yang ditunjukkan di bawah ini -

C:\Users\Tutorialspoint>cd C:\Users\Tutorialspoint\Desktop\
C:\Users\Tutorialspoint\Desktop>npx create-react-app my-app

Ini akan membuat folder bernama aplikasi-saya di desktop dan menginstal semua file yang diperlukan di dalamnya.

Langkah 2 - Hapus semua file sumber

Jelajahi folder src di folder aplikasi-saya yang dihasilkan dan hapus semua file di dalamnya seperti yang ditunjukkan di bawah ini -

C:\Users\Tutorialspoint\Desktop>cd my-app/src
C:\Users\Tutorialspoint\Desktop\my-app\src>del *
C:\Users\Tutorialspoint\Desktop\my-app\src\*, Are you sure (Y/N)? y

Langkah 3 - Tambahkan file

Tambahkan file dengan nama index.css dan index.js di folder src sebagai -

C:\Users\Tutorialspoint\Desktop\my-app\src>type nul > index.css
C:\Users\Tutorialspoint\Desktop\my-app\src>type nul > index.js

Di file index.js tambahkan kode berikut

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

Langkah 4 - Jalankan proyek

Terakhir, jalankan proyek menggunakan perintah start.

npm start