Author: Dawid Adach
Now when we know what we want to build, let's get down to work.
1. Application frame
Replace the content of the index.js file with the following code:
import React, { Component } from "react";
import ReactDOM from "react-dom";
import '@fortawesome/fontawesome-free/css/all.min.css';
import "bootstrap-css-only/css/bootstrap.min.css";
import "mdbreact/dist/css/mdb.css";
import { MDBContainer, MDBRow, MDBCol } from "mdbreact";
class App extends Component {
state = {};
render() {
return <React.Fragment>Schedule app </React.Fragment>;
}
}
ReactDOM.render(<App />, document.getElementById("root"));
Let's build a frame for our application — using the Bootstrap grid. First let's define two columns. To do this we update our render() functions
with the following code:
render() {
return (
<React.Fragment>
<MDBContainer>
<MDBRow>
<MDBCol lg="6">Left column</MDBCol>
<MDBCol lg="6">Right column</MDBCol>
</MDBRow>
</MDBContainer>
</React.Fragment>
);
}
Now we have two columns, however... frankly speaking — they are barely visible. Let's add a border to the columns so we can actually
see how wide they are. There are a few ways to style our component in React, we will focus on the most common ones.
2. Inside index.js file (inline)
2.1 Inline (bad idea)
If you want to quickly adjust a style you can add it directly to each component as below:
<MDBCol style={{ border: "1px solid green" }} lg="6">Left column</MDBCol>
<MDBCol style={{ border: "1px solid blue" }} lg="6">Right column</MDBCol>
Preview:
2.2 You can use variables:
style = {
color: "red",
fontSize: 10,
border: "1px solid green"
};
[...]
<MDBCol style={this.style} lg="6">Left column</MDBCol>
<MDBCol style={this.style} lg="6">Right column</MDBCol>
Preview:
Or even mix both:
spacing = "3";
[...]
<MDBCol
style={{
fontSize: this.spacing + "em",
border: "1px solid blue"
}}
lg="6"
>
Left column
</MDBCol>
Keep in mind that in most of the cases this is NOT a good idea unless you really know what you are doing.
Instead, you should use the second option:
3. External Stylesheet files
3.1 Open an
index.css file (if it doesn't exist, create it under src/ folder) 3.2 Add the following styles:
div[class^="col"],
div[class*=" col"] {
border: 1px dotted black;
}
3.3 Import index.css file in index.js file:
import "./index.css";
3.4 Remove all previous styles
Final code of
index.js
import React, { Component } from "react";
import ReactDOM from "react-dom";
import '@fortawesome/fontawesome-free/css/all.min.css';
import "bootstrap-css-only/css/bootstrap.min.css";
import "mdbreact/dist/css/mdb.css";
import { MDBContainer, MDBRow, MDBCol } from "mdbreact";
import "./index.css";
class App extends Component {
state = {};
render() {
return (
<React.Fragment>
<MDBContainer>
<MDBRow>
<MDBCol lg="6">Left column</MDBCol>
<MDBCol lg="6">Right column</MDBCol>
</MDBRow>
</MDBContainer>
</React.Fragment>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
Preview:
Now you know how to style components in a proper way, let's build a frame for our app.
Previous lesson Download Next lesson
Spread the word:
