static-components scaffolding

This commit is contained in:
Ahmed-Ayman 2018-12-05 00:49:33 +02:00
parent 1a44ea51d6
commit b7b28b3468
8 changed files with 86 additions and 18 deletions

View File

@ -1,9 +1,13 @@
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import React from 'react';
import {connect} from 'react-redux';
import testAction from '../actions/test';
import fetchVideos from '../actions/fetchVideos';
import Search from '../subComponents/Search';
import Footer from '../subComponents/Footer';
import RandomLocation from "../subComponents/RandomLocation";
import RandomDate from "../subComponents/RandomDate";
import RandomTopic from "../subComponents/RandomTopic";
import Header from "../subComponents/Header";
class Home extends React.Component {
clickBtn() {
this.props.testAction('some new value');
@ -12,22 +16,32 @@ class Home extends React.Component {
render() {
return (
<div>
This is home. { this.props.test }
<div>
<Link to="/topics">Go to topics</Link>
</div>
<div>
<button onClick={ this.clickBtn.bind(this) }>Click me</button>
<button onClick={ this.props.fetchVideos }>Fetch videos</button>
</div>
<div>
{ this.props.loading && 'Loading...'}
{ this.props.videos.map(video => {
return (<div key={ video.id }>{ video.title }</div>);
})}
</div>
<Header/>
<Search/>
<RandomTopic/>
<RandomLocation/>
<RandomDate/>
<Footer/>
</div>
);
//
// <div>
// This is home. {this.props.test}
// <div>
// <Link to="/topics">Go to topics</Link>
// </div>
// <div>
// <button onClick={this.clickBtn.bind(this)}>Click me</button>
// <button onClick={this.props.fetchVideos}>Fetch videos</button>
// </div>
// <div>
// {this.props.loading && 'Loading...'}
// {this.props.videos.map(video => {
// return (<div key={video.id}>{video.title}</div>);
// })}
// </div>
// </div>
}
}

View File

View File

@ -0,0 +1,9 @@
import React from 'react';
class Footer extends React.Component{
render(){
return(
'hello Footer!'
)
}
}
export default (Footer);

View File

@ -0,0 +1,9 @@
import React from 'react';
class Header extends React.Component{
render(){
return(
'hello! header'
)
}
}
export default (Header);

View File

@ -0,0 +1,9 @@
import React from 'react';
class RandomDate extends React.Component{
render(){
return(
'hello Dandom Date!'
)
}
}
export default (RandomDate);

View File

@ -0,0 +1,9 @@
import React from 'react';
class RandomLocation extends React.Component{
render(){
return(
'hello Random Location!'
)
}
}
export default (RandomLocation);

View File

@ -0,0 +1,9 @@
import React from 'react';
class RandomTopic extends React.Component{
render(){
return(
'hello Random Topic!'
)
}
}
export default (RandomTopic);

View File

@ -0,0 +1,9 @@
import React from 'react';
class Search extends React.Component{
render(){
return(
'hello Search!'
)
}
}
export default (Search);