{"id":26518274,"url":"https://github.com/aelabassi/react-redux-hands-on","last_synced_at":"2026-04-10T15:06:37.089Z","repository":{"id":282588614,"uuid":"949063794","full_name":"aelabassi/react-redux-hands-on","owner":"aelabassi","description":"Hands on Redux","archived":false,"fork":false,"pushed_at":"2025-03-15T15:46:21.000Z","size":0,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-15T16:33:51.814Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aelabassi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-15T15:39:24.000Z","updated_at":"2025-03-15T15:46:24.000Z","dependencies_parsed_at":"2025-03-15T16:43:58.568Z","dependency_job_id":null,"html_url":"https://github.com/aelabassi/react-redux-hands-on","commit_stats":null,"previous_names":["aelabassi/react-redux-hands-on"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/aelabassi/react-redux-hands-on","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aelabassi%2Freact-redux-hands-on","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aelabassi%2Freact-redux-hands-on/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aelabassi%2Freact-redux-hands-on/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aelabassi%2Freact-redux-hands-on/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aelabassi","download_url":"https://codeload.github.com/aelabassi/react-redux-hands-on/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aelabassi%2Freact-redux-hands-on/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273070097,"owners_count":25040213,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-01T02:00:09.058Z","response_time":120,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-21T09:27:54.440Z","updated_at":"2025-12-30T21:34:10.950Z","avatar_url":"https://github.com/aelabassi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Hands on React/Redux\n## 1. React\n### 1.1. React Basics\n#### 1.1.1. Introduction\n- React is a JavaScript library for building user interfaces.\n- React is used to build single page applications.\n- React allows us to create reusable UI components.\n- React is created by Facebook.\n- React was first deployed on Facebook's newsfeed in 2011 and on Instagram.com in 2012.\n- React allows us to create components by using the `React.createClass()` method.\n- React allows us to create components by using the `class` keyword.\n- React allows us to create components by using the `function` keyword.\n- React allows us to create components by using the `arrow function` keyword.\n- React allows us to create components by using the `hooks` feature.\n- React allows us to create components by using the `functional components` feature.\n- React allows us to create components by using the `class components` feature.\n\n#### 1.1.2. JSX\n- JSX stands for JavaScript XML.\n- JSX allows us to write HTML in React.\n- JSX makes it easier to write and add HTML in React.\n- JSX allows us to write JavaScript expressions in React.\n\n#### 1.1.3. Components\n- Components are the building blocks of any React application.\n- Components are reusable and can be nested inside other components.\n- Components can be created by using the `React.createClass()` method.\n\n#### 1.1.4. Props\n- Props are short for properties.\n- Props are used to pass data from parent to child components.\n- Props are read-only and cannot be modified by the child components.\n- Props are passed to components like HTML attributes.\n\n#### 1.1.5. State\n- State is an object that is owned by the component.\n- State is used to store data that the component can change.\n- State is initialized in the constructor method.\n- State is updated by using the `setState()` method.\n- State is used to re-render the component when the state changes.\n\n# 2. Redux\n## 2.1. Redux Basics\n### 2.1.1. Introduction\n- Redux is a predictable state container for JavaScript apps.\n- Redux is used to manage the state of the application.\n- Redux is used to store the state of the application in a single object.\n- Redux is used to update the state of the application by dispatching actions.\n- Redux is used to update the state of the application by using reducers.\n- Redux is used to update the state of the application by using middleware.\n- Redux is used to update the state of the application by using the store.\n\n### 2.1.2. Actions\n- Actions are payloads of information that send data from the application to the Redux store.\n- Actions are plain JavaScript objects.\n- Actions must have a `type` property that indicates the type of action being performed.\n\n### 2.1.3. Reducers\n- Reducers are pure functions that take the current state and an action as arguments and return a new state.\n- Reducers specify how the application's state changes in response to actions.\n- Reducers are used to update the state of the application.\n\n### 2.1.4. Store\n- Store is an object that holds the application's state.\n- Store allows access to the state via the `getState()` method.\n- Store allows the state to be updated via the `dispatch()` method.\n- Store allows the state to be updated by using the `subscribe()` method.\n\n### 2.1.5. Redux toolkit\n- Redux toolkit is a package that provides tools and best practices for writing Redux code.\n- Redux toolkit provides a `configureStore()` function to create a Redux store.\n- Redux toolkit provides a `createSlice()` function to create a slice of the Redux state.\n- Redux toolkit provides a `createAsyncThunk()` function to create async actions.\n- Redux toolkit provides a `createEntityAdapter()` function to create an entity adapter.\n\n# Resources\n- The starting code for this hands-on is from udemy course: [React - The Complete Guide (incl Hooks, React Router, Redux)](https://www.udemy.com/course/react-the-complete-guide-incl-redux/)\nby Maximilian Schwarzmüller.\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faelabassi%2Freact-redux-hands-on","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faelabassi%2Freact-redux-hands-on","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faelabassi%2Freact-redux-hands-on/lists"}