I've installed Styled Components into my Create React App, and everything works fine, but by default, it looks as though the class name it appends to the element isn't based off of the styled component name (ie. MyButton should create an element with the class MyButton-134as23f).
In the Styled Components documentation, it says to install the babel-plugin-styled-components, and then configure the .babelrc file, however, from what I understand, we don't have access to that file until we eject from the app.
So how can I debug styled components while I am developing an app within Create React App?
I was able to find an answer to this:
Because Create React App is a zero-config application, the only way to add anything to the .babelrc file is to eject from React.
Obviously, I wanted to keep all of my tooling, and came across babel-plugin-macro. It's essentially a way for users to run libraries at compile time, without having to configure their Babel file beforehand.
So after installing it to my devDependencies, I then changed the import path to import styled from 'styled-components/macro, and all of the Babel plugin features that you would normally need to eject for came standard with Styled Components.
Let me know if you have any questions or trouble with my answer.
Hope this helps!
Related
I am very new to react and need to rebuild two Angular.js components within a .NET Content Management System (Kentico). I do not believe there is an opportunity to run a react app/component through npm so I have gone the other route and "add React to a website" (https://reactjs.org/docs/add-react-to-a-website.html). I'm using browserify with babelify to compile my app/component code for the browser.
I've made some decent progress but believe I like the flexibility functional components bring to the table where I don't find coding within a class component all that familiar. Because I'm "adding React to a site" instead of running it through npm, I BELIEVE I have no opportunity to import hooks and thus: no opportunity for useState within functional components.
Can anyone verify this for me? That indeed, "adding react to a site" precludes one from using functional components: class components are the best I can do?
I guess it boils down to: I do not believe I can import useState/useEffect when I am "adding react to a site" in a way where react and react-dom are just script references at the base of my component.
Maybe someone can verify that for me or else point out how I would capitalize on functional components/hooks?
You can use hooks and classes freely no matter how you include them. It's not relevant. The old react docs only use classes which is confusing. Try beta docs: https://beta.reactjs.org/
Working on a new project setup, and trying to get figure out the configuration to get .scss files to build per component. Ideally, only the necessary css files would load per component added to a page, rather than an entire combined .css file for all components. I know this can be done with JSS, but I believe should work with webpack in a CRA app.
My current project setup is:
/src/App.js
/src/components/
index.js => exports all components for easy import to the page (i.e., import {ComponentName} from './components')
/src/components/{component-name}
{component-name.js}
{component-name.scss}
Currently trying sass#v1.56.1 and sass-loader#13.2.0, but not sure about the proper setup.
Might need to do a modular setup to accomplish this or just stick with JSS?
When i customize vscode source code, i found it hard to add a page.
I know there are many ways to do so, such as Part/Widget/Browserwindow, but only if i new a Browserwindow can i explicitly load html and js files like in chrome browser and it's friendly.
If i use a Part or a Widget, i need to use native js api to do dom manipulation, and it's so inefficient,
~~so i want to know how did vscode team decide to use no ui framework during the development? Is there some trade-off?~~
i tried to import react and react-dom directly in my own contrib file /vs/workbench/contrib/dialog/browser/dialog.ts, and then get successful compilation and the react component shows up, but i don't know how to add babel with the compilation procedure, so i use react without jsx.
so i want to know how to import react framework into vscode source code project to create ui component? Is there some practices?
I've created a react application using create-react-app, and installed element-react as a dependency. I followed the instructions stated here to use internationalization -- specifically adding these lines of code to what I think is the entry file (App.js):
import { i18n } from 'element-react'
import locale from 'element-react/src/locale/lang/en'
i18n.use(locale);
Unfortunately, this doesn't work. The other approach stated is using webpack but I don't want to do that. How do I make internationalization work with element-react? What is the entry file in a react application?
Actually, it did work when I placed the il8n code in index.js. It just doesn't seem to work for tables when they don't have data. The workaround for that is to set the emptyText property of the Table component.
I have an ejected React app that is based on Create-React-App, and I am trying to install the #salesforce/design-system-react package to use the Salesforce lightning components in it. But to use this package is not as easy (seems that I need some extra configuration for Barbel and Webpeck). I don't have much experience on config Barbel and Webpeck and need some help to get me started.
Can someone please let me know how can I get that .BABELRC and the Webpack v1 files described from this site: https://react.lightningdesignsystem.com/getting-started/ ?
Many thanks,
No need to configure anything. Just import the CSS.
In your index.js, add the following line.
import "#salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.min.css";
Now you should remove the styling in App.css since the default styling in Create React App will affect your Lightning Components (font-size for example)