node.js npm komutu - Node Package Manager

-config seçeneği
Varsayılan ayarları görmek, değiştirmek, silmek içindir

Örnek

init kelimesi ile başlayan ayarları görmek için şöyle yaparız. Bu ayarlar "init-author-email", "init-author-name", "init-author-url" gibi şeyler

$ npm config list | grep init

Örnek

Şöyle yaparız.

$ npm config delete prefix 
$ npm config set prefix $NVM_DIR/versions/node/v6.11.1

-doctor seçeneği
Örnek ver

-init seçeneği
Bazı sorular sorar ve package.json dosyasını oluşturur.
Örnek
Şöyle yaparız.

npm init

Örnek
Şöyle yaparız.

npm init -y

Açıklaması şöyle

npm init -y accepts all of the default options that npm init asks you about

- i seçeneği
install anlamına gelir. Uzun haliyle install olarak kullanılabilir. package.json dosyasına kurar.
Örnek
Şöyle yaparız.

npm i react-native-i18n --save

Örnek
Şöyle yaparız.

npm install --save-dev @babel/plugin-external-helpers
npm install react-transform-hmr

Örnek
Kurulu paketin en son sürümünü kurmak için paketismi@latest olarak kullanırız. Şöyle yaparız.

npm install foo@latest -g

-ls seçeneği
Paketleri listeler

-run seçeneği

Örnek

Açıklaması şöyle. build dizinine uygulamamızın kullanıma hazır halini oluşturur.

npm run build creates a build directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served index.html, and requests to static paths like /static/js/main.<hash>.js are served with the contents of the /static/js/main.<hash>.js file.

Şöyle yaparız

npm run build

Bu dizini direkt web sunucusuna vermek doğru değil. Açıklaması şöyle

Your build is probably best done on your local machine and then you can securely copy the files across to your server (via SCP, SFTP etc). You could run npm run build on your server, but if you do, resist the temptation to directly serve the build/ directory as the next time you run a build, clients could receive an inconsistent set of resources whilst you're building.

-outdated seçeneği

Eski paketleri listeler

-update seçeneği
Proje paketlerini günceller
Eğer global paketleri güncellemek istersek
npm update -g
yaparız

-start seçeneği
Açıklaması şöyle

When you call npm start by default it calls the start script in package.json

package.json dosyası şöyledir

"scripts": {
  "start": "react-scripts-ts start",
  .....
}

Örnek

Şöyle yaparız.

npm start -- --reset-cache

-uninstall seçeneği
Şöyle yaparız

npm uninstall ajv
npm install ajv@6.8.1

HTML Button Tag

type Alanı
Şöyle yaparız.

<button type="button">TEST</button>

React Form Bileşeni

onsSubmit metodu
Örnek
Şöyle yaparız.

//Arrow function used to bind the necessary variables
CallFunction = (event) =>{ 
   console.log("Event was called");
}

render(){
   return(
      <form onSubmit={this.CallFunction} />
   );
}

Örnek
Elimizde şöyle bir state olsun

constructor(props) {
    super(props);

    this.state = {
      term: '',
      name: '',
      items: []
    };
  }

render metodunda şöyle yaparız.

render() {
    return (
      <div>

        <form className="App" onSubmit={this.onSubmit}>
          <input name="term" value={this.state.term} onChange={this.onChange}/>
          <input name="name" value={this.state.name} onChange={this.onChange}/>
          <button>Submit</button>
        </form>

        <pre>{JSON.stringify(this.state.items)}</pre>

      </div>
    );
  }

onsubmit metodunda şöyle yaparız.

 onSubmit = (event) => {
    event.preventDefault();

    this.setState({
      term: '',
      name: '',
      items: [
        ...this.state.items,
        this.state.term,
        this.state.name
      ]
    });

  }

ES6 export Statement

Giriş
Açıklaması şöyle.

There are two different types of export, named and default. You can have multiple named exports per module but only one default export.

Class - İsimle Export
Class için şöyle yaparız

class ReadFile {
  ...
}

export ReadFile

Değişken - İsimle Export
Değişken için şöyle yaparız

export CONFIGURATION_THING = 'some value'

Function - İsimle Export
Örnek
Tekli function export için şöyle yaparız.

export default utilFunction = () => ...

Örnek
Çoklu export için şöyle yaparız.

export const utilFunction = () => ...
export const anotherHelper = () => ...

Array filter metodu

Giriş

Açıklaması şöyle. Eğer hiçbir öğe testi geçemezse boş dizi döndürür.

Function Array.filter returns those elements of an array, which match the specified condition.

Eğer kendimiz kodlasaydık şöyle yapardık

function filter(array, condition) {
  result = []
  for (element of array)
    if condition(element)
      result.push(element)
  return result
}

Java İle Farkı

JavaScript Array.filter() metodu Java'dan farklı çalışıyor. Java stream'lerinde tüm stream bir eleman için çalışıyor. Yani önce tek bir eleman için filter() daha sonra transform() daha sonra collect() çalışıyor. JavaScript ise elemanları teker teker işlemiyor. Array.filter() metodu önce tüm diziyi filtreler. Daha sonra sonucu stream'deki diğer çağrıya geçirir. Açıklaması şöyle

For instance, Javascript’s filter method outputs an array containing all the matching elements, so if you have a chain of operators, each operator in the chain operates on all elements and completes before the next begins.

filter metodu - value

Şöyle yaparız. İşlem sonunda arr dizisi 1,3,5 değerlerini içerir.

var arr = [1, 2, 3, 4, 5];
var bar = [2, 4];

arr = arr.filter(function(v) {
  return bar.indexOf(v) === -1;
});




filter metodu - value + index
Örnek
Elimizde şöyle bir kod olsun.

const array1 = [true, false, false, true];
const array2 = ['a', 'b', 'c', 'd'];

array2 dizinden array1 içinde aynı konumdaki değeri true olan nesneleri almak için şöyle yaparız.

const array1 = [true, false, false, true];
const array2 = ['a', 'b', 'c', 'd'];
const res = array2.filter((_, i) => array1[i]);
console.log(res);