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.
Related
Instead of having many dependencies for individual hooks, I am interested in a single curated and tested library like Vueuse, but for React. Does something like this exist?
For instance, in Vue projects I would often use https://vueuse.org/core/useStorage/, https://vueuse.org/core/computedAsync/ and https://vueuse.org/shared/useToggle/, but many others as well.
The list of built in React Hooks seems quite limited: https://reactjs.org/docs/hooks-reference.html
What about https://github.com/streamich/react-use? Otherwise you could try using #vueuse directly in your react components thank to reactivue!
I found https://ahooks.js.org/ which does what I need
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
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
I'm working on a small web application in React and I want it to be in two languages. I've seen several localization libraries like react-i18next and react-intl but I'm hesitant to install something maybe too big for such a simple application. Is there a lightweight library to do simple localization or should I look into a more straightforward approach like a string replacing component?
Thanks!
If it is a small project you probably do not need it.
However, it would be a really good experience to write your own localization component, integrate it with redux and opensource it.
Also, there are some simplified versions already available so you can reuse it and/or contribute into.
Here is a simple react-localization implementation.
Does anyone know if exists any official or most accepted reference for React naming conventions to use when we build our applications?
React has a lot of different type of components such as React.Component, directives, services and so on. Wouldn't you agree that having a reference naming convention when we implement them in our applications will make sense?
For example:
If we need to create new component how should we name them like [Something]Component or component[Something] or something else? And same applies for other classes.
Other things I wonder about is if variables/functions that belongs to the scope should have an special prefix or suffix. In some situations it may be useful to have a way to differentiate them from functions and other (none react code).
I'm a big fan of the airbnb React style guide.
https://github.com/airbnb/javascript/tree/master/react
They also have an overall JS style guide.
https://github.com/airbnb/javascript
My understanding is that the React team is un-opinionated when it comes to naming conventions.
With that said, it is also my understanding that components that return objects or classes traditionally start with capital letters and its how we differentiate from a component or other file that is not a class.
So if you see src/components/Header.js, you immediately know its a class-based component and if you see src/utils/validateEmails.js you know its going to be a function and not a class in there.
I would also warn about the airbnb style guide because I just took a look at it and they encourage the use of .jsx extensions, yet if you look at the Reactjs documentation: https://reactjs.org/docs/react-without-jsx.html they say that jsx is not a requirement when building with React, you can just use javascript all day long, so really one can infer that creating components with just a .js extension is satisfactory. What also backs up that inference is that the engineers at Facebook, the creators of React, do not recommend the utilization of .jsx and Dan Abramov says that using .jsx made a difference in the pre-Babel days, but now its not necessary, we can stick with .js extensions.
source: https://github.com/facebook/create-react-app/issues/87