Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Creating the UI Skeleton | Creating a React-Redux Application
Introduction to Redux

book
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.

js
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.

js
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.

js
#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:

js
import './index.css'

Now the app should be looking something like this:

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 4. Розділ 3

Запитати АІ

expand
ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

We use cookies to make your experience better!
some-alt