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 reactApp

Herhangi 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 init

Bu 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 --save

Veya hepsini tek bir komutla şu şekilde kurabilirsiniz:

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

Adı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 --save

Veya hepsini tek bir komutla şu şekilde kurabilirsiniz:

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

Adı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-dev

Veya 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-dev

Adı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 > .babelrc

Adı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'
      })
   ]
}

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 start

Tarayı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 build

Bu, 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-app

Bu, 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)? y

3. 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