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

Conteúdo do Curso

Introduction to Redux

Introduction to Redux

1. Getting Started
2. Fundamental Concepts
3. Redux in Practice
4. Creating a React-Redux Application

book
Setting Up the Application

We will create a new project using the react-redux template. Open the console and cd into an appropriate location, then create a new project using the command: npx create-react-app post-app --template redux.

Now that the project is set up, we need to remove the default counter application and delete everything in the src folder.

We will create a new index.js file containing the following base code:

import React from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './app/store';
 
const container = document.getElementById('root');
const root = createRoot(container);
 
function Main(props) {
  return (<h1>Hello World</h1>);
}
 
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <Main />
    </Provider>
  </React.StrictMode>
);

Since we are also importing a store, we will create a new store.js in a new app folder:

import { configureStore } from '@reduxjs/toolkit';
export const store = configureStore({
  reducer: {},
});

Now we can run the app to see a 'Hello World' screen:

However, this is only a setup, there's more to do!

question mark

Which component is the entry point of this React application?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 4. Capítulo 2

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

course content

Conteúdo do Curso

Introduction to Redux

Introduction to Redux

1. Getting Started
2. Fundamental Concepts
3. Redux in Practice
4. Creating a React-Redux Application

book
Setting Up the Application

We will create a new project using the react-redux template. Open the console and cd into an appropriate location, then create a new project using the command: npx create-react-app post-app --template redux.

Now that the project is set up, we need to remove the default counter application and delete everything in the src folder.

We will create a new index.js file containing the following base code:

import React from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './app/store';
 
const container = document.getElementById('root');
const root = createRoot(container);
 
function Main(props) {
  return (<h1>Hello World</h1>);
}
 
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <Main />
    </Provider>
  </React.StrictMode>
);

Since we are also importing a store, we will create a new store.js in a new app folder:

import { configureStore } from '@reduxjs/toolkit';
export const store = configureStore({
  reducer: {},
});

Now we can run the app to see a 'Hello World' screen:

However, this is only a setup, there's more to do!

question mark

Which component is the entry point of this React application?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 4. Capítulo 2
some-alt