Im working on a React Project that displays data. I was working on a bug that wouldnt allow me to pull data from my api. The Solution for that was to delete my node modules folder then run npm install. This worked but now one of my mui components wont show on my browser. I havent changed any code and there are other mui componets in the project that render. Can anyone explain why just one component wont render?
Related
screenshot
When I create a React app, before my components used to turn like a turquoise green. Now it doesnt also im seeing so many red as well as errors. Im following a React portfolio tutorial step by step, but not sure if my app is working properly. Maybe I need to fix it with an npm package?
Try to install react-router-dom
And restart your vscode
Then Run your app again, the Router tags should be Green the same like components
I am trying to create an npm package. That package contains components related to react-native (View, Text, Stylesheet, etc ).
I would like to reuse the same package for my React JS (web) application.
I am stuck in the state where I am not getting any clue from the internet which gives me details about what are the changes I need to make in my react-native package so that I can use it in a web project as well.
I have tried using react-native-web npm. but it didn't work. Whenever I consume the package, am getting the error shown below
Did anyone try this way? Is there any good tutorial or approach to follow?
You can't use components written in react-native for web.
React libraries use HTML and CSS, so obviously they will not now how to display native components like View and Text.
Our business is currently exploring Vercel to deploy our new landing pages written in React & NextJS. When running them locally (yarn dev) everything works correctly (both css imports and React hooks). When deployed on Vercel, both CSS & React are not working.
Project is organized as follows (conceptually):
./src/pages/_app.tsx: Imports css (uses tailwind as well) and wraps app into IconContext.Provider (for icons)
./src/pages/index.tsx: Exports (default) component, which uses inside react components to render / hooks to handle logic
We've spent the last few hours debugging this issue, but still no clue on where's the error (since we can perfectly launch them locally).
You can have a look at the website here: https://fudeo-flutter-advanced-git-master.aleamakers.vercel.app/
Can you understand where's the error? Thanks
Resolved and found the "error": I'm a complete idiot and React was working in reality. I though the opposite because of the missing css, which made everything messy.
The error I had was in purgecss: It had incorrect rules for purging css, and It was eliminating, at build time, all the custom css.
Thanks #Ramakay for your help. Actually using yarn build && yarn start made everything simpler to replicate locally (didn't notice them in the package.json).
I understand we can create and test React Native Components in isolation in Storybook. But how do we export/publish the components to integrate in our app?
In React -
I used react-docgen that will allow me to create and document components as a standalone project
Then I will build and publish my doc app as a package to npm registry and npm install as dependency in my app to import those components
How do we do same in Storybook with React Native? Should I -
copy files/code of tested components in my actual app?
export everything just in stories folder and build and publish as package and install as dependency in my app?
Install storybook in my actual app? But I guess that's not an option as storybook is supposed to be run as standalone app in itself
May be I am missing something obvious as no tutorial/article/doc talk about how to consume the created Components in final apps? Can someone please shed some light? Thank you.
Ok, someone finally said this in a tutorial-
Once you find the component and the state that you want, you can see the source code you need to place in your application to get the exact same functionality
So, after all it will act simply like a UI library documentation from where you need to copy code from example and cannot add stories as dependency to your project.
I'm using Material-UI components (e.g. DropDownMenu, RadioButtonGroup) in my React app. When I run it under webpack-dev-server the components render, but I can't interact with them.
I'm running injectTapEventPlugin() as recommended.
However, if I build the app using webpack and then load it in the browser (tried Chrome and Edge), all is fine. I can interact with the Material-UI components as expected.
Am I missing something? Is there some kind of fix? webpack-dev-server's hot reload makes my life easier.
I got this working. Must have been something in my webpack configuration that was causing it.
I merged some settings from the Material UI example configuration file into my existing file and it starting working.
Not entirely sure what was causing it, but happy to have it fixed.