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 reactAppUntuk 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 initPerintah 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 --saveAtau, Anda dapat menginstal semuanya dalam satu perintah sebagai -
C:\Users\username\Desktop\reactApp>npm install react react-dom --saveLangkah 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 --saveAtau, Anda dapat menginstal semuanya dalam satu perintah sebagai -
C:\Users\username\Desktop\reactApp>npm install webpack webpack-dev-server webpack-cli --saveLangkah 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-devAtau, 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-devLangkah 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 > .babelrcLangkah 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 startIni 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 buildIni 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-appIni 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)? yLangkah 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.jsDi 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