Kategori: laravel react

react mobx jwt encode jwt decode

1
npm i mobx mobx-react --save

1
npm i crypto-js jwt-encode jwt-decode --save

1
npm i crypto-browserify --save

package json dosyası içinde en alta

1
2
3
"browser":{
"crypto":false
}

webpack.min.js içine açıklama satırından sonra

1
2
3
4
5
6
7
module.exports = {
resolve: {
       fallback:{
          "crypto":false
}
}
}

laravel react #3 – auth giriş çıkış sayfaları hazırlama

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.

laravel react #3 – auth işlemleri react uyarlama

önce js içine views diye bir klasör açıp içine login,register ve index klasörü oluşturup içlerinde index.js oluşturuyoruz. içlerine

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import React from "react";
const Index = () => {
    return <div>Burası Index</div>
};
 
export default Index;
 
----------------------
import React from "react";
const Login = () => {
    return <div>Burası Login</div>
};
 
export default Login;
 
--------------------------
 
import React from "react";
const Register = () => {
    return <div>Burası Register</div>
};
 
export default Register;

ayrı ayrı ekliyoruz. sonra js klasöründe yer alan index.js dosyasının içine

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React, {Component} from "react";
import ReactDOM from 'react-dom';
import Main from './Router';
import { BrowserRouter,Route } from "react-router-dom";
 
class Index extends Component{
    render(){
        return (
            <BrowserRouter>
                <Route component={Main} />
            </BrowserRouter>
        )
    }
}
 
ReactDOM.render(<Index/>,document.getElementById("index"));

js klasörü içine bir de Router.js oluşturuyoruz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React from "react";
import { Route,Switch} from 'react-router-dom';
 
 
import FrontIndex from './Views/Index'
import FrontLogin from './Views/Login'
import FrontRegister from './Views/Register'
 
const Main = () => (
    <Switch>
        <Route exact path="/" component={FrontIndex} />
        <Route path="/login" component={FrontLogin} />
        <Route path="/register" component={FrontRegister} />
    </Switch>
);
 
export default Main;

bu kadar. sıradaki dersten devam

react laravel ders #1 – kurulum

laraveli kurduk. sonra sırayla;

1
2
3
npm i
npm run watch // burada success dönecek mesajlar
npm i react react-dom --save-dev

1
npm install @babel/preset-react --save-dev --legacy-peer-deps

daha sonra webpack.mix.js içine

1
2
3
4
5
mix.js('resources/js/app.js', 'public/js')
    .react()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

1
npm i react-router-dom --save

buraya kadar kurduk. şimdi merhaba yazdıralım. resources/js içine index.js oluştur. içine aşağıdaki kodları yaz.

1
2
3
4
5
6
7
8
9
import React, {Component} from "react";
import ReactDOM from 'react-dom';
class Index extends Component{
    render(){
        return (<div>Merhaba</div>)
    }
}
 
ReactDOM.render(<Index/>,document.getElementById("index"));

yine aynı klasördeki app.js içine

1
2
require('./bootstrap');
require('./Index');

index.blade.php oluştur view içine ona da

1
2
3
4
5
6
7
8
9
10
<html>
<head>
    <title>Deneme</title>
 
</head>
<body>
    <div id="index"></div>
    <script src="{{ asset("js/app.js") }}"></script>
</body>
</html>

web.php içine bütün routeları silerek

1
Route::view('/{path?}','index')->where('path','.+');

hepsi bu kadar