learning-react | materials about learning react | User Interface library

I am learn reactjs and hand one project,but I could not completely fiddle some branch of the whole.I post the code below: in the App.js:import React, { useState } from "react";

I am learning React trying to make a task manager app. I am trying to memorize the components with memo, but when doing so the state behaves strangely, when completing a task by clicking on the checkbox of 2 different tasks, other gif attachments are uncompleted so that you understand what I mean:

I leave a codebox with the complete code:

and git repository: https://github.com/FrancoRodao/learning-react/tree/master/src

Task component:

I'm beginning to experiment with webpack.

I'm following a tutorial from Sitepoint published here: https://www.sitepoint.com/webpack-beginner-guide/

I'm using the following package.json

Following example from book Learn ReactJS, my attempt to pass an array in the same manner only yields errors.

From the Github examples by authors: https://github.com/MoonHighway/learning-react/blob/master/chapter-04/03-react-components/04-components.html

I'm quite new to React and trying to learn it but have a strong background in backends (java/nodejs/php/...)

So first I wanted to create a login portal, basically 3 pages: - The homepage which redirects you to login if you are not authenticated - Login page - Register page

The features are working (register/login/logout) My problem is on the Homepage, if I first log in with user1, I will see Hello user1. If I log out and log in with user2, I will still see user1.

It seems that the variable is cached somehow by the browser. F5 refresh actually updates the value ... :/

This is what I've done:

In my app, I have this route:

I'm new to React js And I using Yii2 as my backend..! When I Send a API request to yii2 ,It Returns me the 500 Error.I don't know,Where I made a mistake.

Here is my React Js Code for API call,

I am following the code example from Learning React book. It is about react redux and react router used for single page app.

Here is the link to my project where I mimic the example above. You can clone it and run with npm install and npm run dev. (Note: project also has back end code but it is irrelevant. Question is only about front end part where I use static data file.)

I can successfully run the example locally, but when I run my project I see my store being empty when it comes to load ui components. I don't get any compile or console errors, and I see other parts of the app working fine. I spent lots of time debugging store creation code but I can't figure out why it doesn't work. Please help to find the reason.

Here are my findings:

There are two url available in my project: / and /cars. The /cars url reads data file directly and it does output all the data correctly.

The root url suppose to do the same by utilizing redux store. However the data array used by ui component comes empty. I guess there is something wrong with the code for store creation (below), although I precisely mimicked the code example. There is literally only one change that I made which is carsReducer, and I coded it exactly as other reducers in the example.

I also noticed that localStorage isn't being populated in the console, but it doesn't give much clue.

I am trying to figure out if it's better to use redux or not, my main concern is the vertical scalability i.e. the performance.

I actually prefer to not use redux, but it seems so popular in a lot of back-end stacks, I was wondering if anyone has ever made a comparison by building a larger application to compare the speed.

The performance page on redux's site was not very helpful, as it basically only talks about performance within redux. https://redux.js.org/docs/faq/Performance.html#performance-all-reducers

I did find a lot about how it's better in practice to use Redux, like in this article below, but I don't think It quite answers my concerns https://css-tricks.com/learning-react-redux/

Please let me know what you think.

I am looking for a good code pattern to allow some communication between components, when using React & Redux.

Most likely this communication should be done via redux, like many articles suggest. (like this one, for example).

However, there are some situations when using the store would be a bit of a hack rather then using it for state management. These special cases are usually when you need to give a command to a component, like show or hide.

I will give an example:

Lets say that we have a component which all it does is render some help icon, that when clicked, opens a tooltip popup. And lets say that we have more than one in a page, but we want to make sure that only one is open at a given time. So if tooltip A is open, and the user clicks on tooltip B, then B should open and A should close.

Here are some patterns that I thought might be relevant to implement this requirement:

Using Redux: We could have in the store some state for these tooltips: