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
.
js9912345678910111213141516function 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.
js9912345678910111213141516171819202122232425262728293031function 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.
js9123456#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
:
jsimport './index.css'
Now the app should be looking something like this:
Дякуємо за ваш відгук!
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат