bir sonraki derste lazım olacağı için yup ve formik kurmamız gerekiyor.
|
1 2 |
npm i yup npm install formik --save |
geçen login klasörün içine index js oluşturmuştuk. onun içine şöyle yazabiliriz
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
import React from "react"; import { Link } from 'react-router-dom' const Login = () => { return <div style={{ minWidth:340,textAlign:'center'}}> <form className="form-signin"> <img className="mb-4" src="https://getbootstrap.com/docs/4.4/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72"/> <h1 className="h3 mb-3 font-weight-normal">Please sign in</h1> <label htmlFor="inputEmail" className="sr-only">Email address</label> <input type="email" id="inputEmail" className="form-control" placeholder="Email address" required="" autoFocus=""/> <label htmlFor="inputPassword" className="sr-only">Password</label> <input type="password" id="inputPassword" className="form-control" placeholder="Password" required=""/> <div className="checkbox mb-3"> <label> <input type="checkbox" value="remember-me"/> Remember me </label> </div> <button className="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> <hr/> <Link to="/register">Kayıt Ol</Link> <p className="mt-5 mb-3 text-muted">© 2017-2019</p> </form> </div> }; export default Login; |
register içindeki indexjs e ise
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
import React from "react"; import {Link} from "react-router-dom"; const Register = () => { return <div style={{ minWidth:340,textAlign:'center'}}> <form className="form-signin"> <img className="mb-4" src="https://getbootstrap.com/docs/4.4/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72"/> <h1 className="h3 mb-3 font-weight-normal">Hemen Kayıt Ol</h1> <label htmlFor="inputEmail" className="sr-only">Ad Soyad</label> <input type="text" id="inputEmail" className="form-control" placeholder="Ad Soyad" required="" autoFocus=""/> <label htmlFor="inputEmail" className="sr-only">Email Adres</label> <input type="email" id="inputEmail" className="form-control" placeholder="Email address" required="" autoFocus=""/> <label htmlFor="inputPassword" className="sr-only">Şifre</label> <input type="password" id="inputPassword" className="form-control" placeholder="Password" required=""/> <label htmlFor="inputPassword" className="sr-only">Şifre Tekrarı</label> <input type="password" id="inputPassword" className="form-control" placeholder="Password" required=""/> <div className="checkbox mb-3"> <label> <input type="checkbox" value="remember-me"/> Remember me </label> </div> <button className="btn btn-lg btn-primary btn-block" type="submit">Kayıt Ol</button> <hr/> <Link to="/login">Giriş</Link> <p className="mt-5 mb-3 text-muted">© 2017-2019</p> </form> </div> }; export default Register; |
biliyorsunuz ilk derslerde normal resources içindeki view içinde index.blade sayfamıza da
|
1 2 3 4 5 6 7 8 9 10 11 |
<html> <head> <title>Deneme</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="{{ asset('css/style.css') }}"> </head> <body> <div id="index"></div> <script src="{{ asset("js/app.js") }}"></script> </body> </html> |
bu şekilde dışarda css de çağırabiliyoruz.