React app my components are not popping up as a jsx - reactjs

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

Related

React app isn't sending app file to root div

I'm building a MERN stack application and am currently having an issue with getting the the front end content to display while running npm run develop.
The index.html file I'm using is the standard template of create-react-app and my index.js file uses ReactDom.render with and document.getElementById('root').
react and react-dom are both version 17.0.1.
I can't see why this wouldn't work but when I enter npm run develop in the terminal, I receive a blank screen and the devtools show that <div id='root> is completely empty but the only error I have in my console log is a GraphQL syntax error. It can see the index file, along with my css files, pages and components but the app isn't displaying on the page.
I've tried importing different versions of react and react-dom, deleted and remade my index.html and index.js, substituting different content into the JSX app element, redoing my npm installs to see if something had gone wrong there and just about everything else I can think of but the result is always the same. On top of that I have run other apps with the same setup on my laptop and they work fine.
If anyone has encountered a similar problem, advice would be welcome.

How to use react-router-dom in React + Electron?

I have problem to use react-router-dom for build desktop app with React JS and Electron. I want my App can move like single page application as my website that build with React. But after build React and Electron, the react-router-dom cant display, even i got white screen
pls help me to fix it
I hope:
i want to know how to use react-router-dom for build electron app

Rendering a MUI component

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?

Crating single npm package for both React (web) and React Native (Mobile)

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.

How to export React Native components created in storybook for it to be used in actual app?

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.

Resources