在src/App.js这个文件中，我们看到了熟悉已久的HTML代码，不过我要说的是，这并不是真正的HTML，而是一种JSX语言（自行百度下），为了让你能够方便的去写页面！

不管怎么样，我们先改成一段我们自己熟悉的HTML代码，但是要注意：
类标签class，这里要用成className
app.js：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="AppHeader">
        This is Header
        </div>
        <div className="AppCenter">
          <div className="AppSlider">
            This is Sub Slider
          </div>
          <div className="AppContent">
            This is Sub Content
          </div>
        </div>
        <div className="AppFooter">
        This is Footer
        </div>
      </div>
    );
  }
}
export default App;

刷新一下页面看看效果：

下面重点来了，我们要把头部、尾部、侧边栏用CSS写的好看一些：

在上面的代码中我们可以看到，有这么一句：
import './App.css';
字面上理解一下：导入CSS文件嘛～～～

我们打开app.css文件，修改为如下代码：

.App {
  text-align: center;
}
.AppHeader{
  text-align: center;
  width:800px; height:20px;
  border: #61dafb solid 1px;
}
.AppCenter{
  text-align: center;
  width:800px; height:500px;
  border: #61dafb solid 1px;
}
.AppSlider{
  width:100px; height:500px;
  background-color: dimgray;
  color: aliceblue;
  float: left;
}
.AppContent{
  width:700px; height:500px;
  background-color: beige;
  float: left;
}
.AppFooter{
  text-align: center;
  width:800px; height:20px;
  border: #61dafb solid 1px;
}

这时候保存并刷新界面，Okay：

那么，CSS如何去分文件组织呢？
这时候，我们建立一个文件夹，以及其他文件，如下图所示：

我把这个步骤详细地描述下：

• 1. 首先在src下建立style目录，然后把app.css放进去；
• 2. 对App.js的import './App.css';代码引入，修改为：import './style/App.css'；
• 3. 建立AppHeader.css、AppFooter.css以及AppCenter.css几个文件，并将之前的几个层叠样式表分别拷贝进去；
• 4. 关于新建立的几个css文件的引入，也是最关键的一步：使用@import符号，引入同路径下的同名文件文件名即可。

那么有同学问了，有关Javascript、Jquery中的一些特性，该怎么使用呢？

答案是：不需要，我会在第四节：props和state的内容中讲这个问题。