Is there any source of coding standar to use in React/JSX?
For instance, in a React component:
<Button
disable = {true}
disable={true}
value='my value'
value="my value"
Where can I found an official information about it?
I've seen some standards in https://css-tricks.com/react-code-style-guide/ but that is not official, same with https://airbnb.io/javascript/react/#props
There is no official, but the most used is the one from airbnb.
See the survey on:
https://hackernoon.com/what-javascript-code-style-is-the-most-popular-5a3f5bec1f6f
Well, a good starting point can be found here:
https://create-react-app.dev/docs/setting-up-your-editor/#extending-or-replacing-the-default-eslint-config
Since Create React App is a tool provided by Facebook that helps you to setup a project with React.
To be more specific, this package:
https://www.npmjs.com/package/eslint-config-react-app
Is the one used by default by Create React App, as explained in the package page itself:
This package includes the shareable ESLint configuration used by Create React App.
As you can see in the npm package page, the link to the GitHub repository is this:
https://github.com/facebook/create-react-app#readme
That is owned by Facebook.
Related
Background
I often use "React Developer Tools" to understand the component structure of various website that I like and take inspiration from. Though, lot of websites have random names for the components, few websites have distinguishable names which can be helpful for aspiring React Developers or hobbyists. One such website is https://www.joshwcomeau.com. Below is a screenshot from one of the pages in his website. The name of few of the components explains itself what it is going to render. And since this is his blog, where he talks about various tips and tricks for React Development, it becomes helpful to have a look at this.
Question
Now when I develop a website using create-react-app(CRA), all my component names are minified to a couple of random letters by Webpack. How can I control this behavior?
Note: My main question is - How to control this behavior in any React application (not just CRA). I know that Josh uses Next.js for his blog, so does any framework like Gatsby, Next etc... provide control over this?.
Note:
I'm aware that the component names are visible in development mode, but I would like it to be visible in production too (for the reason explained above in "Background").
I'm aware that webpack can generate "sourcemap" but doing that would expose my entire code structure. So I prefer not to use sourcemaps
Screenshot of Josh's Website
Screenshot of My Website
You can achieve this with a third party library:
From webpack-react-component-name documentation:
Normally React component names are minified during compilation. This plugin makes these component names available in production bundles by hooking into Webpack's compilation process, traversing the AST looking for React component definitions and updating the emitted source code to populate the displayName property. This is the property that, when populated, is used by the React Dev Tools extension to determine the name of a component.
So you can install this webpack plugin with:
npm install webpack-react-component-name -save-dev
once it is installed, add the plugin to the plugins list in webpack configs:
plugins: [
new WebpackReactComponentNamePlugin()
],
Example:
<h1 translate="no" className="clientName">Jay</h1>
Hi Guys, the code above is in my react project and its apparent that the attribute translate is not working in React
Does anyone know an alternative solution, even through Javascript, as I do not want google to translate the names of people on my site?
Thanks!
As per the doc, Not all browsers support this attribute. Verify the doc whether the browser in which you work supports that attribute.
Please check browser support of translate="no" here, not supported by most of then
You can also test the same thing in the browser you want to test : https://j74bu.csb.app/
For specific google translate as alternate solution, you can use className="notranslate"
<h1 className="notranslate">agradável</h1>
WORKING DEMO : (Link to test)
While translate attribute is not supported in a few browsers, I think that issue in your case is that React isn't passing the translate attribute to the DOM element.
This could happen if you are using a version of react older than 16.0.0. Prior to 16.0.0, react would omit custom attributes from being passed to the DOM. In doing so it also did not honour some valid HTML attributes as the valid attribute list is quite huge.
From v16.0.0, react doesn't omit these attributes from being passed to the DOM and hence you would be able to properly use it.
Please check the migration guide for more details
All you need to do is to upgrade your version of react to the latest version using
yarn upgrade --latest react react-dom
or you can simply try to upgrade to v16.0.0 with
yarn upgrade react#16.0.0 react-dom#16.0.0
<html translate="no">
you can basically do this at the top of your html file
I'm using react-native-vector-icons in my React Native app, and have the following component:
<Icon
name='rowing'
/>
I used the rowing icon because that was the first example in the documentation here. When you don't supply a value for type, it defaults to material, so I figured I could replace rowing with any of the material icons from this list. When I replaced it with back_arrow, it renders as a question mark. Does anyone know how I can approach debugging this?
If you are using an ejected project make sure that you bundle the library correctly in the android studio here are the full instructions
Otherwise, if you are using expo make sure to use the correct library:
Expo lib
Checklist
Have you done, npm install react-native-elements
As mentioned here, https://react-native-elements.github.io/react-native-elements/docs/getting_started.html
Please cross check in package.json file do u have dependency of "react-native-elements"
have very simple sample app which build Create React App + Styled-Components to prove this issue. But I have real big application which I am facing this issue which I am going to explain it below.
I would like to pre-render this app with Rendertron for SEO/GoogleBots and etc. But the problem is when I build PRODUCTION version of React App which use Styled-Components . all the style will be missing on static version which Rendertron produced, but from other side if I try the same workflow with dev-server of app , everything looks fine .
So far I know there is different on PROD version and DEV version of my application when I render it with Rendertron . But I am not sure what cause this issue and how I can fix this issue .
I am looking for solution or idea which can help me to solve this issue .
Here is my sample code which I peppered for test .
https://github.com/AJ-7885/test-styled-component-with-rendertron
Here is screen shot from different version of Rendered version by Rendertron base on PROD or DEV version of the same application .
enter image description here
After a lot of searching around, I finally found out the reason. The Styled Components library uses something called the "Speedy mode" to inject styles on production. This makes the styles bypass the DOM` and be injected directly inside the CSSOM, thus, appearing in the inspector, but totally invisible on the DOM.
Fortunately, Styled Components 4.1.0 came with a fix for this issue! Now you can set a global variable called SC_DISABLE_SPEEDY to true in order to disable the Speedy mode and get the styles to appear on Production as well.
Reference: https://www.styled-components.com/releases#v4.1.0
But the only part I am not sure , how to set disable this Speedy Mode in Create-React-App without Ejecting , Dose any body has any idea ?
You need to render your styles on the server side and inject those styles in your pre-rendered react app. Styled-components explains how to do that here: https://www.styled-components.com/docs/advanced#server-side-rendering
Also, I'd recommend using react-snap for pre-rendering since that is recommended by the Create React App docs. react-snap seems to be more of a React-specific solution that may be easier to implement, especially with styled-components.
I'm missing up information about deployment. After running npm run build to my react project - i do get a build folder.
Unlike the example in React.org "like button" here: https://reactjs.org/docs/add-react-to-a-website.html, My component now is bigger,with many sub-components, with fetch calls... etc - it's a whole project.
In my other project, i would like to use this app, as a another part in a bigger app, to share this project between other of my projects.
is this possible?
if yes? how? if no? why? any other way?
Thank you !
--- Edit ---
Some of the other projects are not written in React. some are single page applications with jQuery. some with Backbonejs. which also does not use npm.
The option for submodule is applying only to the other react projects
It's certainly possible.
I think what you're looking for is to publish package to a private npm registry.
However if your project is small enough it might be easier to use github submodules.
For the most part it depends on the size and the scope for re-usability of your project. If your project is just meant to be exporting some Components/utilities that you want to use in other projects you might want to use the private npm registry but if you want access to the source code of the project and want it as a subset of your bigger project's repository, you might want to make use of github submodules.
I figured out a way to do this. for the whole project.
Many pages such as React add to a website, reffer only to a single component. not to the whole project.
Now i know.
While developing, on the index.js we have something like this:
ReactDOM.render(
<MyMainComponent
someParam="something"
/>
, document.getElementById('root'));
This code, made it running on my page. Now, to have it General, that i could use it everywhere i wrap it in a global function:
window.reactMyMainComponent = (params, elm) => {
ReactDOM.render(
<MyMainComponent
{...params}
/>
, elm);
}
Then, i run yarn build
Then copy the js folder from /build/static/
Then take it to any other project, adding the 3 javascript files that are inside
Then i can call my new function reactMyMainComponent Anywhere, and use it when i want wherever i want :)
such as :
var statsBox = $(".someComp")
reactWordCloud({
width:statsBox.width(),
height: statsBox.height(),
infoId:9260
}, statsBox[0])
Tada, now everywhere can use this :) All projects.