Splitting up React-Native code: General Practices - reactjs

I am building a React-Native app social media application, and I am really struggling with fitting everything together.
I want to make very modular code, hopefully splitting up my JSX, my JavaScript functions, and all of my redux and redux-persist stuff (unsure how to go about using these as well and where to split up using action creators and just normal functions.) However, I am really just unsure of a good file structure to maintain all of these things properly.
I am open to any suggestions and would really appreciate some good sample code.

Below image is the folder structure to follow for a React and react-native app. Please let me know if you need in-depth detail of the structure shared in image

Related

How to build a tiktok like video upload and video feed function in a react native app?

I have no experience or idea about how video upload and streaming works at the backend, and I am trying to build a tiktok-like app, so if you can share directions on how to approach this, where to learn more, where to find resources, what libraries to use, what database to use, or anything that could be helpful, even if one line advice, I would really appreciate that.
I understand there is going to be a lot of code and that could be out of scope here, but any direction/advice would be helpful.

Is ".mdx" file format only supported/used by React.js

Almost all the references online mention the use of MDX with React.js. Even though other frameworks or libraries support MDX (with help of components), I haven't specifically seen the use of ".mdx" file formats outside of React.
The support of ".mdx" files in Gatsby and Next.js allows us to create a separate folder for the blog posts and have them stored anywhere (CMS, Github etc...) which helps in organizing. And the file extension of ".mdx" itself is pretty straight-forward and self-explanatory even for a beginner to grasp the concept.
So I was just wondering - If I would like to use mdx files, am I limited to React.js? Is it possible to use Svelte, Vue, Angular as well?
Yes you can use mdx outside of React but not everywhere, Check out this guides I hope they help!
mdx for Vue.js: https://mdxjs.com/guides/vue/
mdx for Svelte(MDsveX): https://madewithsvelte.com/mdsvex
MDX as such is specifically for React because it uses JSX to define it's component.
I am sure there are alternatives for other frameworks, as a Svelte user myself I know that at least Svelte has MDSVEX which is basically the same.

How to integrate Go.js's floorplan with React.js

I wanted to create a react project allowing a user to annotate floorplan thanks to Go.js's floorplanner here is the link https://gojs.net/latest/projects/floorplanner/FloorPlanner.html. If you look visit that link and down below you will see the scripts that were used to create floorplanner. But instead of creating the floorplanner with vanilla JS I wanted to use React.js. Can someone help with the integration of Go.js's floorplanner with React?
This question is too vague for an easy answer. You should look at the react example: https://github.com/NorthwoodsSoftware/gojs-react
And modify it to your liking. This can involve taking large parts of all of the floor planner sample, though if you have no practice with GoJS this it may be worth taking the time to learn everything involved in the sample, before any integration.

Can typescript be used only in a few files in React project?

Given there is a React project that uses plain javascript, is there a way to use typescript partially only to define models?
So, lets say there are a few models that map to server responses, can only those be defined in typescript while the rest of the project remains in javascript.
If its possible, how to do it?
Typescript can definitely be implemented gradually into an existing JS project, and I know a few people who have gone through the process on some monoliths, it can be a really boring process but usually low risk.
I'll link you straight away to this:
https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html
The key is to understand what your goal is, and how to set everything up properly to accommodate for it, as you go it's as simple as toggling a few settings to unblock/check work as you go.
As for your question about some files being JS and some being TS, typescript handles pure JS perfectly fine, so you can switch every file to TS and even if it's pure js there won't be an issue :)
Have a read and if you need any more help on some specifics feel free to comment

Does it make sense to use Vuejs and Reactjs on the same project

So my question is pretty self explanatory. Does it make sense to use Vue.js and React.js together on a same project ?
No. Both Vue.js and React are for the same purpose - building UI components.
The only situation that it might make sense is that if you are doing a migration. From Vue.js to React or from React to Vue.js.
But I think in most scenarios it doesn't worth to do this kind of migration. Both Vue.js and React are really great. So my conclusion is, no, it doesn't make sense.
Both Vue and Reactjs are javascript Frameworks that are in themselves self sufficient. Also since both do the same job it makes sense to use either one of them.
If you use both Vue and React together it will make it more and more difficult for you to share states and data between parts written with Vue and Parts written with React.
What you would have to do is to keep them as independent modules.
Also both Vue and ReactJs have different APIs so it makes it difficult for a developer to code it out too. This will lead to bad patterns and hacks developing in your code which will later lead to issues such as maintainability and feature extension.
If you have control over your entire code, its better to just evaluate what better suits your purpose and then choose that framework for development of the entire app.
P.S. Certains exceptions to using both of them together will include a migration from framework to another in progress or your app having various modules in your App each of which independent from one another and included as plugins in the main code.
You can use the two together but you will have to carefully consider the architecture. You might have to consider something like the Microfrontend architecture but remember this comes at the cost of a lot of complexity and is not suited for all use cases.
Good intro to Micro Frontends

Resources