ReactJS - Ortam Kurulumu
Bu bölümde, başarılı bir React geliştirmesi için bir ortamın nasıl kurulacağını göstereceğiz. Dahil olan birçok adım olduğuna dikkat edin, ancak bu, daha sonra geliştirme sürecini hızlandırmaya yardımcı olacaktır. İhtiyacımız olacakNodeJS, bu yüzden yüklemediyseniz, aşağıdaki tablodan bağlantıyı kontrol edin.
| Sr.No. | Yazılım ve Açıklama |
|---|---|
| 1 | NodeJS and NPM NodeJS, ReactJS geliştirme için gerekli platformdur. Bizim Ödemeye NodeJS Çevre Setup . |
NodeJS'yi başarıyla kurduktan sonra, React'i npm kullanarak kurmaya başlayabiliriz. ReactJS'yi iki şekilde kurabilirsiniz
Webpack ve babel kullanma.
Kullanmak create-react-app komut.
ReactJS'yi webpack ve babel kullanarak kurma
Webpackbir modül paketleyicidir (bağımsız modülleri yönetir ve yükler). Bağımlı modülleri alır ve bunları tek bir (dosya) paketinde derler. Bu paketi, komut satırını kullanarak uygulama geliştirirken veya webpack.config dosyasını kullanarak yapılandırarak kullanabilirsiniz.
Babel bir JavaScript derleyicisi ve aktarıcısıdır. Bir kaynak kodunu diğerine dönüştürmek için kullanılır. Bunu kullanarak, kodunuzda yeni ES6 özelliklerini kullanabilirsiniz, burada babel onu tüm tarayıcılarda çalıştırılabilen düz eski ES5'e dönüştürür.
Adım 1 - Kök Klasörü Oluşturun
Adı olan bir klasör oluşturun reactApp mkdir komutunu kullanarak gerekli tüm dosyaları yüklemek için masaüstünde.
C:\Users\username\Desktop>mkdir reactApp
C:\Users\username\Desktop>cd reactAppHerhangi bir modül oluşturmak için, package.jsondosya. Bu nedenle, klasörü oluşturduktan sonra, birpackage.jsondosya. Bunu yapmak için şunu çalıştırmanız gerekir:npm init komut isteminden komut.
C:\Users\username\Desktop\reactApp>npm initBu komut modül hakkında paket adı, açıklama, yazar vb. Gibi bilgileri sorar. Bunları –y seçeneğini kullanarak atlayabilirsiniz.
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"
}Adım 2 - React'i Kurun ve Dom React
Ana görevimiz ReactJS'yi kurmak olduğundan, onu ve dom paketlerini kullanarak install react ve react-domsırasıyla npm komutları. Kurduğumuz paketleri şuraya ekleyebilirsiniz:package.json kullanarak dosya --save seçeneği.
C:\Users\Tutorialspoint\Desktop\reactApp>npm install react --save
C:\Users\Tutorialspoint\Desktop\reactApp>npm install react-dom --saveVeya hepsini tek bir komutla şu şekilde kurabilirsiniz:
C:\Users\username\Desktop\reactApp>npm install react react-dom --saveAdım 3 - Web paketini kurun
Paketleyici kurmak için webpack kullandığımız için webpack, webpack-dev-server ve webpack-cli yükleriz.
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 --saveVeya hepsini tek bir komutla şu şekilde kurabilirsiniz:
C:\Users\username\Desktop\reactApp>npm install webpack webpack-dev-server webpack-cli --saveAdım 4 - Babel'i kurun
Babel ve eklentileri babel-core, babel-loader, babel-preset-env, babel-preset-react ve html-webpack-eklentisini yükleyin
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-devVeya hepsini tek bir komutla şu şekilde kurabilirsiniz:
C:\Users\username\Desktop\reactApp>npm install babel-core babel-loader babel-preset-env
babel-preset-react html-webpack-plugin --save-devAdım 5 - Dosyaları Oluşturun
Kurulumu tamamlamak için index.html, App.js, main.js, webpack.config.js ve, gibi belirli dosyalar oluşturmamız gerekiyor.babelrc. Bu dosyaları manuel olarak veya kullanarak oluşturabilirsiniz.command 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 > .babelrcAdım 6 - Derleyiciyi, Sunucuyu ve Yükleyicileri Ayarlayın
Açık webpack-config.jsdosyasını açın ve aşağıdaki kodu ekleyin. Webpack giriş noktasını main.js olarak ayarlıyoruz. Çıktı yolu, paketlenmiş uygulamanın sunulacağı yerdir. Ayrıca geliştirme sunucusunu şu şekilde ayarlıyoruz:8001Liman. İstediğiniz herhangi bir portu seçebilirsiniz.
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'
})
]
}Aç package.json ve sil "test" "echo \"Error: no test specified\" && exit 1" içeride "scripts"nesne. Bu eğitimde herhangi bir test yapmayacağımız için bu satırı siliyoruz. Ekleyelimstart ve build bunun yerine komutlar.
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"7. Adım - index.html
Bu sadece normal HTML'dir. Biz ayarlıyoruzdiv id = "app" uygulamamız için bir kök öğe olarak ve ekleyerek index_bundle.js paketlenmiş uygulama dosyamız olan script.
<!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>8. Adım - App.jsx ve main.js
Bu, ilk React bileşenidir. React bileşenlerini sonraki bölümde derinlemesine açıklayacağız. Bu bileşen işlenecekHello World.
App.js
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1>Hello World</h1>
</div>
);
}
}
export default App;Bu bileşeni içe aktarmalı ve kökümüze dönüştürmeliyiz App öğesi, böylece tarayıcıda görebiliriz.
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));Note - Bir şeyi ne zaman kullanmak isterseniz, importilk önce. Bileşeni uygulamanın diğer bölümlerinde de kullanılabilir hale getirmek istiyorsanız, yapmanız gerekenlerexport oluşturduktan sonra kullanmak istediğiniz dosyaya aktarın.
Adlı bir dosya oluşturun .babelrc ve aşağıdaki içeriği buna kopyalayın.
{
"presets":["env", "react"]
}Adım 9 - Sunucuyu Çalıştırma
Kurulum tamamlandı ve aşağıdaki komutu çalıştırarak sunucuyu başlatabiliriz.
C:\Users\username\Desktop\reactApp>npm startTarayıcıda açmamız gereken bağlantı noktasını gösterecektir. Bizim durumumuzdahttp://localhost:8001/. Açtıktan sonra aşağıdaki çıktıyı göreceğiz.
Adım 10 - Paketin oluşturulması
Son olarak, paketi oluşturmak için komut isteminde build komutunu şu şekilde çalıştırmanız gerekir -
C:\Users\Tutorialspoint\Desktop\reactApp>npm run buildBu, paketi aşağıda gösterildiği gibi mevcut klasörde oluşturacaktır.
Create-react-app komutunu kullanma
Webpack ve babel kullanmak yerine ReactJS'yi daha basit bir şekilde kurarak kurabilirsiniz. create-react-app.
Adım 1 - Create-react-app'ı yükleyin
Masaüstüne göz atın ve aşağıda gösterildiği gibi komut istemini kullanarak Create React App'i kurun -
C:\Users\Tutorialspoint>cd C:\Users\Tutorialspoint\Desktop\
C:\Users\Tutorialspoint\Desktop>npx create-react-app my-appBu, masaüstünde uygulamam adında bir klasör oluşturacak ve gerekli tüm dosyaları içine yükleyecektir.
Adım 2 - Tüm kaynak dosyaları silin
Oluşturulan uygulamam klasöründeki src klasörüne göz atın ve aşağıda gösterildiği gibi içindeki tüm dosyaları kaldırın -
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)? y3. Adım - Dosyaları ekleyin
İsimli dosyalar ekleyin index.css ve index.js src klasöründe -
C:\Users\Tutorialspoint\Desktop\my-app\src>type nul > index.css
C:\Users\Tutorialspoint\Desktop\my-app\src>type nul > index.jsİndex.js dosyasına aşağıdaki kodu ekleyin
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';Adım 4 - Projeyi çalıştırın
Son olarak, start komutunu kullanarak projeyi çalıştırın.
npm start