Kategori: React

React ile notlarım

GitHub Paketlerini kullanarak özel npm paketleri yayınlama

Bu makalemde firmanıza/kendinize özel npm paketlerinizi yayınlamak için GitHub Paketlerini nasıl kullanacağınıza değineceğim. Bu işlem ile geliştirdiğiniz paketleri diğer uygulamalarınızda da kullanacaksınız. Asıl amacım her projem için geliştirdiğim react componentlerimi farklı uygulamalarımda da kopyalama yapmak yerine oluşturduğum npm paketinden çekmek olacak.

Öncelikle github üzerinde ki işlemlerimizi yapacağız.

“Generate Token” butonuna bastıktan sonra bir kod üretecek. Bu kodu not ediniz. Ayrıca ileride git action kullanarak publish etmek için ilgili kodu repostory içinde secret içine ekleyebilirsiniz.

Bu işlemleri yaptıktan sonra yeni açtığımız repositoryinizi clone yaptığınız dizinde package.json dosyasını oluşturacağız. Bunun için ilgili dizinde aşağı da ki komutu çalıştırın.

npm init

Oluştururken name alanını aşağıda ki formata dikkat ederek oluşturun

"name": "@your_username/your_project_name"

Oluşan dosyasına aşağıda ki satırları kendi bilgileriniz ile ekleyin.

"publishConfig": {
"registry": "https://npm.pkg.github.com/your_username"
},
"repository": {
"type": "git",
"url": "ssh://git@github.com:your_username/your_project_name.git",
"directory": "@your_username/your_project_name"
}

Oluşan dosya index.js dosyası oluşturup, console.log(“bir şeyler”); ekleyin.

Oluşturduğumuz Paketlere Erişim

Oluşturduğumuz paketi yine npm komutları ile kullanacağımız için oluşturduğumuz npm paketi bilgilerini bilgisayarımıza tanımlamalıyız. Bu tanımlamayı .nmprc dosyası ile yapıyoruz. Oluşturacağınız dosyanın path görmek için CMDde aşağıda ki komut sonucu HOME pathte oluşturmanz gerekiyor.

npm config list

Dosya içeriği de aşağıda ki tanımı ekleyiniz.

registry=https://npm.pkg.github.com/@your_username
registry=https://registry.npmjs.org
registry=https://registry.npmjs.org/

.npmrc dosyasını oluşturduktan sonra aşağıda ki komut CMD çalıştırın. Password yerine bir önceki adımda oluşturduğumuz token bilgisini girmeniz gerekmektedir. Bu işlemleri yaptığınızda .npmrc dosyasının değiştiğini göreceksiniz.

npm login —registry=https://npm.pkg.github.com —scope=your_username

.npmrc dosyası aşağıda ki şekilde olacaktır.

registry=https://registry.npmjs.org/
@your_username:registry=https://npm.pkg.github.com/
//npm.pkg.github.com/:_authToken=xxx

Ayrıca npm paketlerini kullanmaya devam edebilmek için aşağıda ki bloğuda .npmrc ekleyebilirsiniz

registry=https://registry.npmjs.org/

Login olunduktan sonra projenizi publish etmeiz gerekmektedir.

npm publish

Oluşturulan paketleri projeye eklenmesi

Oluşturulan paketleri kullanacak projenize aşağıda ki npm komutu ile ekleyebilirsiniz.

npm install @your_username/your_project_name@version

2 | React – Login Sayfası Düzenleme

Bir önceki yazımda kurduğumuz template üzerinden gideceğiz. Web apiye ilk erişimizi login ile olacak. Web Apiyi .net core ile geliştirdim. Jwt token kullanıyor. Refresh token ile güvenliğimizi biraz daha artırıyoruz.

Öncelikli olarak erişim için Axios kullanacağız. Bunun için package.jsonda olmadığı için  kurulum ile başlayacağız.

npm install axios

Artık kurulumuzu yaptık, isteklerimizi bu kütüphane ile yapacağız. Geçici olarak template ile gelen login sayfasını kullanacağız. (src/views/pages/login/Login.js) Kodu aşağıda ki gibi düzenleylim.

import React, { Component } from "react";
import { Link } from "react-router-dom";
import {
  CButton,
  CCard,
  CCardBody,
  CCardGroup,
  CCol,
  CContainer,
  CForm,
  CInput,
  CInputGroup,
  CInputGroupPrepend,
  CInputGroupText,
  CRow,
} from "@coreui/react";
import CIcon from "@coreui/icons-react";
import axios from "axios";

export default class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: "",
      password: "",
    };
  }

  handleChange(e) {
    const targetName = e.target.name;
    const targetValue = e.target.value;
    if (targetName === "username") {
      this.username = targetValue;
    } else if (targetName === "password") {
      this.password = targetValue;
    }
  }

  async onClickBtnGirisYap(e) {
    e.preventDefault();

    const name = this.state.username;
    const pass = this.state.password;

    alert("Servis Bağlantısı Buradan ");

    return true;
  }

  //Setter
  set username(value) {
    this.setState({
      username: value,
    });
  }
  set password(value) {
    this.setState({
      password: value,
    });
  }
  render() {
    return (
      <div className="c-app c-default-layout flex-row align-items-center">
        <CContainer>
          <CRow className="justify-content-center">
            <CCol md="8">
              <CCardGroup>
                <CCard className="p-4">
                  <CCardBody>
                    <CForm>
                      <h1>Login</h1>
                      <p className="text-muted">Sign In to your account</p>
                      <CInputGroup className="mb-3">
                        <CInputGroupPrepend>
                          <CInputGroupText>
                            <CIcon name="cil-user" />
                          </CInputGroupText>
                        </CInputGroupPrepend>
                        <CInput
                          type="text"
                          name="username"
                          placeholder="Username"
                          autoComplete="username"
                          value={this.state.username}
                          onChange={this.handleChange.bind(this)}
                        />
                      </CInputGroup>
                      <CInputGroup className="mb-4">
                        <CInputGroupPrepend>
                          <CInputGroupText>
                            <CIcon name="cil-lock-locked" />
                          </CInputGroupText>
                        </CInputGroupPrepend>
                        <CInput
                          type="password"
                          name="password"
                          placeholder="Password"
                          autoComplete="current-password"
                          value={this.state.password}
                          onChange={this.handleChange.bind(this)}
                        />
                      </CInputGroup>
                      <CRow>
                        <CCol xs="6">
                          <CButton
                            color="primary"
                            className="px-4"
                            onClick={this.onClickBtnGirisYap.bind(this)}
                          >
                            Login
                          </CButton>
                        </CCol>
                        <CCol xs="6" className="text-right">
                          <CButton color="link" className="px-0">
                            Forgot password?
                          </CButton>
                        </CCol>
                      </CRow>
                    </CForm>
                  </CCardBody>
                </CCard>
                <CCard
                  className="text-white bg-primary py-5 d-md-down-none"
                  style={{ width: "44%" }}
                >
                  <CCardBody className="text-center">
                    <div>
                      <h2>Sign up</h2>
                      <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing
                        elit, sed do eiusmod tempor incididunt ut labore et
                        dolore magna aliqua.
                      </p>
                      <Link to="/register">
                        <CButton
                          color="primary"
                          className="mt-3"
                          active
                          tabIndex={-1}
                        >
                          Register Now!
                        </CButton>
                      </Link>
                    </div>
                  </CCardBody>
                </CCard>
              </CCardGroup>
            </CCol>
          </CRow>
        </CContainer>
      </div>
    );
  }
}

onClickBtnGirisYap fonksiyonun altında bağlantı sağlayabilirsiniz. Geçici olarak aşağada ki kod bloğundan bağlantıyı sağlayabilirsiniz. Bir sonra ki yazımda api erişimini sağlayacak class yapısını yapacağız.

    let istek = {
      grantType: "authorization_code",
      clientId: "xxxxxx",
      refreshToken: null,
      usernameEmail: "",
      password: "",
    };

    let axiosConfig = {
      headers: {
        "Content-Type": "application/json;charset=UTF-8",
        "Access-Control-Allow-Origin": "*",
      },
    };

      axios
        .post(
          "https://xxxx/tokens",
          istek,
          axiosConfig
        )
        .then((res) => {
          console.log("RESPONSE RECEIVED: ", res);

          const cevap = res.data;
          if (cevap.success) {
            alert(cevap.body.accessToken);
          }
        })
        .catch((err) => {
          console.log("AXIOS ERROR: ", err);
        });

https://www.npmjs.com/package/axios

1 | React – Template Kurulumu

Genellikle .net platforumda kurumsal firmaların iç uygulamalarını geliştirdim. Js tarafında herkes gibi jquery kullanarak hep çözüme ulaştırdım. Zaten web tarafında devexpress kurtarıcımız oluyordu. Şuan çalıştığım firmamda önemli dönüşümler yapıyoruz. Bunlarında bir tanesi de ön yüzü react.js ile yine yazmak oluyor. Buradan edindiğimi tecrübelerimi bir .netçi gözü ile yazı dizimi yapmayı hedefledim. React ile temel konulara girmeyeceğim. Zaten temel olarak aradığınızda çoğu yerden bulabiliyorsunuz. Benim yapmak istediğim; yazdığım web api ile haberleşen, typescript kullanarak amatör olmayan bir framework oluşturmak.

Öncelikle yeniden tasarım yapmamak için hazır template indirmekle başlayalım. Aşağıda adresini paylaştığım template indirin, bilgisayarınızda klasöre kopyalayın.

Node modules leri kurmasını sağlayın ve başlatın. Uygulamaız açılmasını bekliyorum.

npm install
npm start

Template içinde ki bileşenleri incelemnizde fayda var, çoğunu react component olarak yapacağız.

https://coreui.io/react/