Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Leer Creating the UI Skeleton | Creating a React-Redux Application
Introduction to Redux
course content

Cursusinhoud

Introduction to Redux

Introduction to Redux

1. Getting Started
What is Redux?Why Redux? When to use Redux?Setting up a React-Redux Application
2. Fundamental Concepts
Redux ActionsRedux ReducersRedux StoreStore Dispatch MethodSelectorsRedux Data Flow
3. Redux in Practice
Redux Application Structure Modifying the Template for UseCreating the Redux StoreRedux SliceCreating a SliceUnderstanding SliceUsing Selectors to access StateModifying State by Dispatching ActionsThunk FunctionsRules for ReducersUnderstanding the Counter Application
4. Creating a React-Redux Application
The ApplicationSetting Up the ApplicationCreating the UI SkeletonCreating the Profile SliceCreating the Posts SliceCompleting the Posts featureDisplaying Number of Posts and UsersAdding CSS Styling

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

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

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

We can import the CSS files using the JS import statements in index.js:

js

Now the app should be looking something like this:

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 4. Hoofdstuk 3

Vraag AI

expand
ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

course content

Cursusinhoud

Introduction to Redux

Introduction to Redux

1. Getting Started
What is Redux?Why Redux? When to use Redux?Setting up a React-Redux Application
2. Fundamental Concepts
Redux ActionsRedux ReducersRedux StoreStore Dispatch MethodSelectorsRedux Data Flow
3. Redux in Practice
Redux Application Structure Modifying the Template for UseCreating the Redux StoreRedux SliceCreating a SliceUnderstanding SliceUsing Selectors to access StateModifying State by Dispatching ActionsThunk FunctionsRules for ReducersUnderstanding the Counter Application
4. Creating a React-Redux Application
The ApplicationSetting Up the ApplicationCreating the UI SkeletonCreating the Profile SliceCreating the Posts SliceCompleting the Posts featureDisplaying Number of Posts and UsersAdding CSS Styling

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

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

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

We can import the CSS files using the JS import statements in index.js:

js

Now the app should be looking something like this:

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 4. Hoofdstuk 3
Onze excuses dat er iets mis is gegaan. Wat is er gebeurd?
some-alt