Organizing a React project?

Question

React

How is a React project organized? For example, this situation, I have a regular menu on the site, a footer, I don’t actually need to make these elements through React, I can just lay them out without React, and use React only where necessary? The next question is about styles, I use Less for layout, how can I organize the code in this case? I used to compile the code using Gulp, apparently now it won’t work like that anymore, and is it necessary to connect styles directly to React components? Or is it possible, as in normal layout, to break styles, as it suits me?

Answer 1

1. React application is just a module that is rendered in the tree of your page. Accordingly, it can be either a full-fledged SPA application or a small widget that does not suspect anything about the content of the rest of the page. It all depends on the tasks that you set for yourself.
2. It is better to build a bundle using webpack. This is now the standard for front-end development.
3. Styles can be organized in many ways. There are many different tools in the ecosystem to solve this problem. If you plan to reuse your widget, then it is better to write styles in isolation, if this is just an integral part of the project containing complex logic, then you can safely use the general styles of the project. Coming back to your question, no, you don't have to include styles directly.

Answer 2

Footer, header and menu are 3 different components, they can be inserted into one Wrapper component, which will render childrens (main content). Styles can be included 1 time in index.js. If you set up webpack, then it will be able to collect styles for you in one css. In Create React App, everything is already set up for sass, and you can immediately connect without configs. If it's hard to figure it out, then you can build styles, and connect this file to React 1 time. If you want to achieve modularity and reuse components in other projects, then it is better to write styles for each component. You can also look at styled-components (css in js).
There are many examples of project structures on the Internet. For example, I split pages into folders that contain the component itself, the reducer, the action\saga, and a subfolder for additional components. You can store reducers separately, actions separately, components separately.
Yes, and if you write in React, then all elements should be in the form of components, and not in the form of layout, because React is either for working with dom.

Answer 3

I have a regular menu on the site, a footer, I don’t actually need to make these elements through React, I can just lay them out without React, and use React only where necessary?

If they do not intersect with the block where the main root component lies, then it is possible. If they intersect, then it is also possible, simply by creating a component that in render() will return your layout and in shouldComponentUpdate it will return false so that there is no redrawing.