react入门（2）

好，我们接着上一篇文章【React从入门到架构（1）–手把手创建、解读以及开发第一个ReactApp】的内容讲：

（1）修改“HTML”代码，建立初布局

在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文件嘛～～～

（2）修改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如何去分文件组织呢？
这时候，我们建立一个文件夹，以及其他文件，如下图所示：

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

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

原文：https://blog.csdn.net/wgh295360998/article/details/83990357