react app Blog 這邊有把檔案切得很開。然後再子資料夾底下的我用反斜線替代

about\About.css

.about {
  background: rgba(0, 255, 0 , 0.3);
  min-height: calc(100vh - 74px);
}

.about > div {
  font-size: 36px;
  margin: 10px;
}

about\index.js

import React, { Component } from 'react';
import './About.css';

class About extends Component {
  render() {
    return (
      <div className="about">
        <div>About</div>
        <div>hello</div>
      </div>
    );

  }
}

export default About;

App.css

.App {
  text-align: center;
}

.page {
  margin-top: 74px;
}

App.js

import React, { Component } from 'react';
import './App.css';
import Nav from './nav';
import About from './about';
import Home from './home';
import Post from './post';

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      tab: 'post',
    }
  }

  onNavChange = page => {
    this.setState({
      tab: page,
    })
  }

  render() {
    const { tab } = this.state
    return (
      <div className="App" >
        <Nav onChange={this.onNavChange} activeTab={tab} />
        <div className="page">
          {tab === 'home' && <Home />}
          {tab === 'post' && <Post />}
          {tab === 'about' && <About />}
        </div>
      </div>
    );

  }
}

export default App;

home\index.js

import React, { Component } from 'react';
import './home.css';

const style = {
  homepage: {
    fontSize: '40px',
    paddingTop: '10px',
  }
}

class Home extends Component {
  render() {
    return (
      <div className="home">
        <div style={style.homppage}>I am homepage</div>
      </div>
    );

  }
}

export default Home;

nav\index.js

import Nav from './Nav';

export { Nav as default} 

nav\Nav.css

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #bbbbbb;
  opacity: 0.8;
  z-index: 2;
}

.nav__list {
  list-style: none;
  padding: 0;
  text-align: left;
  margin-left: 20px;
}

.nav__list li {
  display: inline-block;
  margin-right: 16px;
  background: rgba(255, 0, 0, 0.3);
  padding: 10px;
  transition: background 0.3s;
  cursor: pointer;
}

.nav__list li:hover {
  background: rgba(255, 0, 0, 0.5);
}

.nav__list .active {
  background: rgba(255, 0, 0, 0.5);
}

nav\Nav.js

import React, { Component } from 'react';
import './Nav.css';

class Item extends Component {
  render() {
    const { onChange, name, text, isActive } = this.props;
    return (
      <li
        className={isActive && 'active'}
        onClick={() => onChange(name)}
      >{text}
      </li>
    )
  }
}

class Nav extends Component {
  render() {
    const { onChange, activeTab } = this.props;
    return (
      <nav className="nav" >
        <ul className="nav__list">
          <Item
            onChange={onChange}
            isActive={activeTab === 'home'}
            name='home'
            text='Home'
          />
          <Item
            onChange={onChange}
            isActive={activeTab === 'post'}
            name='post'
            text='文章列表'
          />
          <Item
            onChange={onChange}
            isActive={activeTab === 'about'}
            name='about'
            text='關於本站'
          />
        </ul>
      </nav>
    );

  }
}

export default Nav;

post\index.js

import React, { Component } from 'react';
import './Post.css';

class Post extends Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: [],
      postId: null,
      post: {},
    }
  }

  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(res => res.json())
      .then(json => this.setState({
        posts: json,
      }))
  }

  componentDidUpdate(_prevProps, prevState) {
    const { postId } = this.state;
    if (prevState.postId !== postId && postId !== null) {
      this.getPost(this.state.postId)
    }
  }

  getPost = id => {
    fetch('https://jsonplaceholder.typicode.com/posts/' + id)
      .then(res => res.json())
      .then(json => this.setState({
        post: json,
      }))
  }

  handleBack = () => {
    this.setState({
      postId: null,
      post: {},
    })
  }

  render() {
    const { posts, postId, post } = this.state;
    return (
      <div>
        <h1>POST</h1>
        {!postId && (
          <div className="post-list">
            {posts.map(post => (
              <div className="post-item">
                <div className="post-item__id" onClick={() => {
                  this.setState({
                    postId: post.id
                  })
                }}>{post.id}</div>
                <div className="post-item__title"> {post.title}</div>
                <div className="post-item__body">{post.body}</div>
              </div>
            ))}
          </div>
        )}
        {postId && (
          <div>
            <button onClick={this.handleBack}>back</button>
            <h1>{post.title ? post.title : 'Loading'}</h1>
            <p>{post.body}</p>
          </div>
        )}
      </div>
    );

  }
}

export default Post;

post\Post.css

.post-list {
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  margin-left: 10px;
}

.post-item {
  position: relative;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 0, 0.1);
  margin-right: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}

.post-item__id {
  position: absolute;
  left: 0;
  right: 0;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: red;
}

.post-item__title {
  margin-top: 15px;
  font-size: 30px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}