Kursinnhold
Introduction to Redux
Introduction to Redux
Creating the UI Skeleton
First, we would want to create a skeleton UI of the application, and then we can create a store, connect the UI to the store, make the app more functional, and add CSS styling.
The Main
component will create two components, namely, DetailsSection
and PostsSection
.
function DetailsSection(props) {
return (<div></div>);
}
function PostsSection(props) {
return (<div></div>);
}
function Main(props) {
return (
<div id="main">
<DetailsSection />
<PostsSection />
</div>
);
}
In our final product, the DetailsSection
and PostsSection
will be as follows:
We will create very basic versions of DetailsSection
and PostsSection
, which we will improve later. The code should be something like this.
function DetailsSection(props) {
return (
<div>
<div>
<h2>Profile</h2>
<label htmlFor="name">Name: </label>
<input id="name" />
<button>Change</button>
<p>Posts: </p>
</div>
<div>
<h2>App</h2>
<p>Users: </p>
<p>Total Posts: </p>
</div>
</div>
);
}
function PostsSection(props) {
return (
<div>
<textarea />
<button>Post</button>
</div>
);
}
With the above code, our app should look like this:
We need the DetailsSection
and PostsSection
shown in the form of two columns, for that, we will create a grid using CSS. Create a new index.css
file in the src
folder and write the code for creating a grid inside the #main
element.
#main {
display: grid;
grid-template-columns: 30% auto;
grid-gap: 1px;
}
We can import the CSS files using the JS import
statements in index.js
:
import './index.css'
Now the app should be looking something like this:
Takk for tilbakemeldingene dine!