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 React from 'react';
import { Link } from 'react-router-dom'; import {connect} from 'react-redux';
import { connect } from 'react-redux';
import testAction from '../actions/test'; import testAction from '../actions/test';
import fetchVideos from '../actions/fetchVideos'; 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 { class Home extends React.Component {
clickBtn() { clickBtn() {
this.props.testAction('some new value'); this.props.testAction('some new value');
@ -12,22 +16,32 @@ class Home extends React.Component {
render() { render() {
return ( return (
<div> <div>
This is home. { this.props.test } <Header/>
<div> <Search/>
<Link to="/topics">Go to topics</Link> <RandomTopic/>
</div> <RandomLocation/>
<div> <RandomDate/>
<button onClick={ this.clickBtn.bind(this) }>Click me</button> <Footer/>
<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> </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);