})
12 | )
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
52 |
59 | );
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const webpack = require('webpack');
3 | const HtmlWebpackPlugin = require('html-webpack-plugin');
4 | module.exports = {
5 | entry: [
6 | './src/app.js'
7 | ],
8 |
9 | output: {
10 | filename: 'main.js',
11 | path: path.resolve(__dirname, 'dist/assets'),
12 | publicPath: '/assets/'
13 | },
14 |
15 | module: {
16 | rules: [
17 | {
18 | test: /\.js$/,
19 | use: ['babel-loader'],
20 | include:[
21 | path.resolve(__dirname, './src')
22 | ]
23 | },
24 | {
25 | test: /\.css$/,
26 | use: ['style-loader','css-loader']
27 | },
28 | {
29 | test: /\.(png|jpg|jpeg|gif)$/,
30 | use: ['url-loader?limit=8192'],
31 | },
32 | {
33 | test: /\.(mp4|ogg|svg)$/,
34 | use: ['file-loader']
35 | },
36 | {
37 | test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
38 | use: ['url-loader?limit=10000&mimetype=application/font-woff']
39 | },
40 | {
41 | test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
42 | use: ['url-loader?limit=10000&mimetype=application/octet-stream']
43 | },
44 | {
45 | test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
46 | use: ['file-loader']
47 | },
48 | {
49 | test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
50 | use: ['url-loader?limit=10000&mimetype=image/svg+xml']
51 | }
52 | ]
53 | },
54 |
55 | resolve: {
56 | modules: [
57 | 'node_modules',
58 | path.resolve(__dirname, 'src/common'),
59 | path.resolve(__dirname, 'src/components')
60 | ]
61 | },
62 |
63 |
64 | plugins: [
65 | new webpack.HotModuleReplacementPlugin(),
66 | new HtmlWebpackPlugin({
67 | filename: '../in.html', //index.html
68 | template: './src/index.html'
69 | }),
70 | new webpack.ProvidePlugin({
71 | React: 'react',
72 | ReactDOM: 'react-dom',
73 | Component: ['react', 'Component'],
74 | PT: 'prop-types'
75 | })
76 | ],
77 |
78 | devtool: 'eval-source-map'
79 |
80 |
81 | }
82 |
--------------------------------------------------------------------------------
/src/components/parc/Comment.js:
--------------------------------------------------------------------------------
1 |
2 | let propTypes = {
3 | name: PT.oneOf([ 'Mike', 'Matt','Sal', 'Hurley', 'Molly', 'Jenny', 'Elliot', 'Ben', 'Jane'])
4 | }
5 |
6 | export default class Comment extends Component{
7 | constructor(props){
8 | super(props);
9 |
10 | this.state = {
11 | inReply: false
12 | }
13 | }
14 |
15 | render(){
16 | let {time, name, content, avatar, subComment, replySomeone, Reply, comment, replyInFix, someReplyIn} = this.props;
17 |
18 | // let {inReply} = this.state;
19 | let inReply = (someReplyIn === comment);
20 | return (
21 |
53 |
58 |
54 |
57 | Comments
55 | {array} 56 |
22 |
23 | 
24 |
25 |
56 | );
57 | }
58 | }
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 | Comment.defaultProps = {
94 | name: 'Janeg'
95 | }
96 |
97 |
98 | Comment.propTypes = propTypes;
99 |
--------------------------------------------------------------------------------
/src/components/card/Card.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 |
5 | let propTypes = {
6 | imgSrc: PropTypes.string,
7 | name: PropTypes.string.isRequired,
8 | meta: PropTypes.string,
9 | desc: PropTypes.string,
10 | joined: PropTypes.number,
11 | likeNum: PropTypes.number
12 | }
13 |
14 | let contextTypes = {
15 | et: PropTypes.string
16 | }
17 |
18 | export default class Card extends Component{
19 |
20 | constructor(props){
21 | super(props);
22 | this.state = {
23 | isHeartON: false,
24 | year: props.joined
25 | };
26 |
27 | this.heartClick = this.heartClick.bind(this);
28 | this.yearAdd = this.yearAdd.bind(this);
29 | }
30 |
31 | yearAdd(){
32 |
33 | let {year} = this.state
34 |
35 | this.setState({
36 | year: year + 10
37 | });
38 | }
39 |
40 | heartClick(event){
41 | let {isHeartON} = this.state;
42 | isHeartON = !isHeartON;
43 |
44 | console.log(event.target);
45 |
46 | this.setState({
47 | isHeartON
48 | })
49 | }
50 |
51 | render(){
52 | let {imgSrc, name, meat, desc, joined, likeNum} = this.props;
53 |
54 | let {et} = this.context;
55 |
56 | let {isHeartON, year} = this.state;
57 |
58 | let heartClass = isHeartON ? '' : 'empty';
59 |
60 | return (
61 |
26 | {name}
27 | );
51 | })
52 | ) : (null)
53 | }
54 |
55 |
28 | {time}
29 |
30 |
31 | {content}
32 |
33 |
44 | {inReply ? (
45 |
62 |
85 | )
86 | }
87 | }
88 |
89 | Card.propTypes = propTypes;
90 | Card.contextTypes = contextTypes;
91 |
--------------------------------------------------------------------------------
/src/app.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import ReactDOM from 'react-dom';
3 | import PropTypes from 'prop-types';
4 |
5 | import Nav from 'nav/Nav.js';
6 | import CardWrap from 'cardWrap/CardWrap.js';
7 | import Home from 'home/Home.js';
8 |
9 | require('../semantic/dist/semantic.css');
10 | require('./common/style/main.css');
11 |
12 | let data = [
13 | {
14 | imgSrc: require('img/matthew.png'),
15 | name: 'Matt',
16 | meta: 'Friends',
17 | desc: 'Matthew is an interior designer living in New York.',
18 | joined: 2013,
19 | likeNum: 75
20 | },
21 | {
22 | imgSrc: require('img/molly.png'),
23 | name: 'Molly',
24 | meta: 'Coworker',
25 | desc: 'Molly is a personal assistant living in Paris.',
26 | joined: 2013,
27 | likeNum: 35
28 | },
29 | {
30 | imgSrc: require('img/elyse.png'),
31 | name: 'Elyse',
32 | meta: 'Coworker',
33 | desc: 'Elyse is a copywriter working in New York.',
34 | joined: 2014,
35 | likeNum: 151
36 | }
37 | ];
38 |
39 | class App extends Component{
40 |
41 | constructor(props){
42 | super(props);
43 | this.state = {
44 | view: 'home'
45 | }
46 | this.changeView = this.changeView.bind(this);
47 | }
48 |
49 | changeView(view){
50 | this.setState({
51 | view
52 | })
53 | }
54 |
55 | getChildContext(){
56 | return {
57 | et: 'Died'
58 | }
59 | }
60 |
61 | componentDidUpdate(){
62 | console.log('App 更新好了');
63 | }
64 |
65 | componentDidMount(){
66 | console.log('APP 渲染完成');
67 | }
68 |
69 | render(){
70 | console.log('app');
71 | let {view} = this.state;
72 |
73 | let {data} = this.props;
74 |
75 | let viewComp = null;
76 |
77 | switch (view) {
78 |
79 | case 'list':
80 | viewComp =
63 | 
64 |
65 |
72 |
73 | {`${et} in ${year}`}
77 |
78 | {`${likeNum} Like`}
82 |
83 |
84 |
90 |
91 |
94 | );
95 | }
96 | }
97 |
98 | App.childContextTypes = {
99 | et: PropTypes.string
100 | }
101 |
102 |
103 | ReactDOM.render(
104 |
12 |
98 | );
99 | }
100 | }
101 |
--------------------------------------------------------------------------------
13 |
97 |
14 |
96 | Comments
15 |
16 |
17 | ![]({require("./img/matt.jpg")}/)
18 |
19 |
31 |
32 |
18 |
19 |
31 |
33 |
34 | ![]({require("./img/elliot.jpg")}/)
35 |
36 |
68 |
35 |
36 |
37 | Elliot Fu
38 | {/*
48 |
39 | Yesterday at 12:30AM
40 |
*/}
41 |
42 |
44 | This has been very useful for my research. Thanks as well!
43 |
45 | 回复
46 |
47 |
49 |
67 |
50 |
51 | ![]({require("./img/jenny.jpg")}/)
52 |
53 |
66 |
52 |
53 |
54 | Jenny Hess
55 | {/*
65 |
56 | Just now
57 |
*/}
58 |
59 | Elliot you are always so right :)
60 |
61 |
62 | 回复
63 |
64 |
69 |
70 | ![]({require("./img/joe.jpg")}/)
71 |
72 |
85 |
95 |
71 |
72 |
73 | Joe Henderson
74 | {/*
84 |
75 | 5 days ago
76 |
*/}
77 |
78 | Dude, this is awesome. Thanks so much
79 |
80 |
81 | 回复
82 |
83 |