React ile Kişisel Blog Sayfası Oluşturma 1

Yapılacaklar : React kurulum ve Router işlemleri , Materialize.css kütüphanesi ve Header Componentinin tasarlanması.

Blog adında bir klasör oluşturun içine Server  klasörü ve :

npm create-react-app Client komutlarını yazın.

 Server klasörümüzde back - end tarafımız olacak. Client  te ise front-end bölümleri olacak.

Component oluşturup bu komponentleri react-router-dom kullanarak app de çağırma işlemi yapacağız.

Src nin içine Component klasörü oluşturun. Ve component klasörün içine şimdilik şu 3 tane componentleri oluşturdum. 

src/component/Header.js

import React, { Component } from 'react';

class Header extends Component {

render(){

return (

<div>Header</div>

)

}

}

export default Header;

src/component/Landing.js

import React, { Component } from 'react';

class Landing extends Component {

render () {

return(<div>

AnaSayfa diyelim mi bea

</div>)

}

}

export default Landing;

src/component/Cv.js

import React from 'react';

const Cvpage = () => {

return (

<div>

Cvpage

</div>

)

}

export default Cvpage;

Oluşturduğum bu 3 componenti App.js den Router olarak çağıaracam. Router => İnternet tarayıcımızdaki yol olarak tarif edebiliriz.
Bu adıma geçmeden önce projeme;
react-router-dom eklemem gerekiyor router işlemlerim için.
ekleme işlemi :
npm i --save react-router-dom

App.js

import React, { Component } from 'react';

import { BrowserRouter, Route } from 'react-router-dom';

import Header from './Header';

import Landing from './Landing';

import Cvpage from './Cvpage';

class App extends Component {

render() {

return (

<div className="container">

<BrowserRouter>

<div className="app">

<Header />

<Route exact path ='/' component = {Landing} />

<Route path ='cv' component = {Cvpage} />

</div>

</BrowserRouter>

</div>

);

}

}

export default App;

<BrowserRouter> adında ana routerim var.
<Header> Componentim her koşulda gözükecek.
www.siteisim.com/ => Yazılması durumunda Landing Componenti açılacak.
exact ise yalnızca demek oluyor daha sonra bunun detayına değinelim.

<div className="container" dikkatinizi çekmiştir. React da jsx içine css ler bu şekilde yazılıyor.
css içinse materialize kütüphanesini kullanıyorum.

npm i --save materialize yükleme komutu ile yükledikten sonra
src nin içindeki
index.js dosyama gidip

import React from 'react';

import ReactDOM from 'react-dom';

import 'materialize-css/dist/css/materialize.min.css';

import './index.css';

import App from './components/App';

import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

registerServiceWorker();

aşağıdaki komutumu eklemeliyim ki css lerim çalışsın;
import 'materialize-css/dist/css/materialize.min.css';

Materialize import etme işlemim bu kadar.Şimdi materialize ile Header componentimi tekrar düzenleyelim.

import React, { Component } from 'react';

class Header extends Component {

render(){

return (

<div>

<ul id="dropdown1" className="dropdown-content">

<li><a href="#!">one</a></li>

<li><a href="#!">two</a></li>

<li className="divider"></li>

<li><a href="#!">three</a></li>

</ul>

<nav>

<div className="nav-wrapper">

<a href="#!" className="brand-logo">A.Süha Işık</a>

<ul className="right hide-on-med-and-down">

<li><a href="sass.html">Cv</a></li>

<li><a href="badges.html">Bana Ulaşın</a></li>

<li><a className="dropdown-trigger" href="#!" data-target="dropdown1">Yazılar<i className="material-icons right">arrow_drop_down</i></a></li>

</ul>

</div>

</nav>

</div>

)

}

}

export default Header;

npm start diyerek localhost:3000 adresinden değişiklikleri görebilirsiniz.