React, redux, middleware which set of tools and libraries is better to use?

Question

React

Good day, Lord front-ends)

Faced the task of making a rather complex application on React. I have been reading manuals for a couple of weeks now, but they offer rather different solutions and a bunch of libraries (I get the impression that now everyone writes their own libraries, for example, I saw a couple of examples using different libraries for ajax requests, and this is not counting jqwerry and middleware) + confuses confusing, what they write in different "es2015" syntax with different libraries (which at first glance solve the same tasks) .

I got a little tired of googling, when I read the documentation or lessons, basic questions are omitted there (I think they seem obvious and not worthy of attention to experienced people) or the “do as I do” manual, - here it is, - here it’s like this in production. But I can't catch the cause-and-effect relationship, for example, why did they include the library for the ajax request. More precisely, I'm interested in the chain of reasoning in order to have more freedom to maneuver))

Actually questions:

1. Performance (now I have assembled the assembly of gulp, browserify, babelify, babel + redux and react libraries) The
compiled file has already exceeded 1Mb, although I implemented only the authorization form)) . I read that optimization compresses about 200 Kb.
I met mentions of other webpack collectors, babels, etc.
Are they fundamentally different?
(I have been working with gulp for a long time, there is a good build for layout, I did not see any advantages in other compilers)
Do they exist?

According to the API with which I need to work, the application must be on several pages. Will the state store (which is redux) remember the data when navigating through the pages (assuming I import it for the components I need) or does it need to be written to localstorage?

2. Styles. It seems like it is possible to write styles directly in jsx, but I don’t really like this option, because I’m used to using scss, and I haven’t seen any mentions of the ability to compile preprocessors from jsx, and the examples I saw seem inconvenient
. How do you do it? if directly in jsx, then please give reasons.

3. Please advise on the assembly and set of libraries for the tasks that I have to solve:
(now I settled on a bunch of gulp react redux middleware, I plan to put the styles in a separate file in the old fashioned way)
1) authorization and session tracking (if more than 10 minutes is inactive, then the session is over)
2) interaction with the google API (building a route for transport, creating control points on the map for it)
3) Building graphs
4) Working with svg graphics
5) Working with animation, I plan to solve part of it using CSS (I used to always solve it with a bunch of jq and classes). Somewhere I saw react has its own set of functions for animation and I suspect that libraries also need to be included there.
ps Today I came across a manual for using webpack and gulp at the same time on the same project
. Is such a symbiosis (webpack vs gulp) justified?



Thanks for the help

Answer 1

using different libraries for ajax request and that's not counting jqwerry and middleware

About jquery, I understand you mean $.ajax ? But about middleware... (maybe you don't fully understand what it is?)
Questions:
How does the final file shrink in your assembly?
I didn't see uglifyJS or anything like that here...
Many build with webpack, (for production version use -p flag, which in turn.. bingo! mine is also uglifyjs)
Styles are styles. Write as you like. Collect them at least with gulp, at least with webpack... There is no difference.
Unfortunately, I can only suggest a charting library tested on the project (not very cool and there are not so many different types of charts, but it is well configured and you can quickly figure it out )
Justified. If it is convenient for you to run some tasks through gulp, why not? If you can do everything that you do with gulp on webpacke, then use only it.
PS Concerning assemblies. It is usually harmful to take someone else's assembly (since they took it, launched it, and touch something - it is not known how it works). Especially if the assembly is large. Here is a good example of a large and complex "assembly". To understand how everything works there, it will take some time. And will you need everything that the author has wound up there? Therefore, as an introduction, you can look.
PPS Even minimal create-react-appThe assembly has a lot of interesting things "under the hood". Therefore, I am in favor of approaching the assembly consciously, and it’s hard to come up with a better one than my own. Again, "your own" does not appear immediately, so just start making an application.

Answer 2

I spent a lot of time to understand how to use the right tool from scratch, "according to Feng Shui", to use all the tools correctly, etc. .