I'm a visual learner, This would help me a lot in designing, implementing, testing etc.
I need a kinda diagram that visualizes props, state, events, input, processing, output etc for each component in the tree and also as a whole. I want to visualize the components themselves and the relationship between these components, using a software like omnigraffle or anything else.
This can be achieved with a Browser Extension or a global npm package. (rarely a local one) Let me show you the two most popular tools.
React Sight (chrome extension)
React Sight is a live view of the component hierarchy tree of your React application with support for React Router and Redux.
Source: https://github.com/React-Sight/React-Sight
React Monocle (npm package)
React Monocle parses through your React source files to generate a visual tree graph representing your React component hierarchy. The tree is then displayed along with a live copy of your application.
Source: https://github.com/team-gryff/react-monocle
I think you should try React Developer Tools. It is a Chrome DevTools extension for React. It allows you to inspect the React component hierarchies in the Chrome Developer Tools. You can also inspect their state and other properties.
If anyone is looking for this now, I found this extention for VSCode. It's pretty nice. Just make sure to use the Command center to run generate tree command. It's not perfect, but it's best I could find.
https://marketplace.visualstudio.com/items?itemName=HabeebArul.react-component-tree
Related
I asked a similar request in the Git Repo as well here, https://github.com/vasturiano/react-globe.gl.
I have an app that uses the react component exported by this project. It depends on three.js and WebGL to work. It is an extension of this repo by the same author, https://github.com/vasturiano/globe.gl.
I made a beautiful web app with these libraries and all works as expected, on the web, but I want to extend this to a mobile app built on react native as well.
I have tried a simple port but get an error from the CSS2DRenderer trying to access the document object which clearly doesn't exist on a mobile app.
I tried using expo GLView here, but could not for the life me figure out where to start on the context creation function to be able to port the three globe to it.
My question is, based on the Repo's I have shared above, what is the best approach to implementing the Globe in React Native?
I would also take any alternatives that I could do drag/zoom Globe with dynamic plot points and interactive functions (click basically).
For a quick setup to recreate the project, I am working an out of the box react native application setup
npm i react-globe.gl
Pop below component inside of a View in the app.js and import the Globe from above library. Provide an empty array for hexBinPointsData
<Globe
globeImageUrl="//unpkg.com/three-globe/example/img/earth-night.jpg"
bumpImageUrl="//unpkg.com/three-globe/example/img/earth-topology.png"
backgroundImageUrl="//unpkg.com/three-globe/example/img/night-sky.png"
hexBinPointsData={plotData}
hexAltitude={0.1}
hexBinResolution={4}
hexBinMerge={false}
/>
Expected error: Document variable cannot be found. In the CSS2DRenderer.js file.
Any help would be appreciated!
When I create a new react app with npx create-react-app my-app --template typescript what kind of software architecture does it have by default (MVC, Redux or Flux)? I read all the differences and I got confused a little bit, so I would like to know what do I get by default and stick to it, so that I get a better understanding on how it works.
React does not provide any state management library like Redux or Flux natively or when you create a react app with CLI.
React only provide support for context API natively.
You can install supporting packages and libraries as per your requirement.
There are lots of features that come out of the box create-react-app.
You can run a single command and get a brand new React application that comes with:
A recommended starting folder structure
A solid build setup with webpack and Babel (that you don't have to worry about setting up)
Scripts to run our React application
Extensibility
Redux is a predictable state container designed to help you write JavaScript apps that behave consistently across client, server, and native environments and are easy to test. While it's mostly used as a state management tool with React, you can use it with any other JavaScript framework or library. React does not support Redux by default, you have to integrate that.
React by default support ContextAPI. Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language.
I am currently storing an object containing many React components and would like to display them all in some sort of gallery format.
I tried rendering the component directly in the gallery itself, but it was too slow and caused too many DOM issues.
Similar to how Google Drive displays a preview of each doc, what is the best and fastest way to generate a visual snapshot of each component in React?
You can check Storybook, it's an open-source tool for developing UI components in isolation for React and other libraries and there is a lot of useful add ons which will help you during work process.
I have tried this for myself you can check it here react-ui
If you want to have some page with a list of all components, you can create one story where you can show a list of all stories which you have in your project.
Anyone have any clue why my react component dev tools looks like this? Prior to the most recent react dev tools major update, I could see the names of all my components, but now it just looks like this.
Dev Tools View
You're using production/ minified version of the code. When such code is viewed in Devtool, you can only see single letter representation.
Make sure to run app in development mode and see if Devtool is picking up the right component name.
Im trying to create an application targettng both web and mobile. The idea is to create react components that differ on how they render but share the logic.
React v.014 blog post stated "we’re splitting the main react package into two: react and react-dom. This paves the way to writing components that can be shared between the web version of React and React Native.
The react package contains React.createElement, .createClass, .Component, .PropTypes, .Children, and the other helpers related to elements and component classes. We think of these as the isomorphic or universal helpers that you need to build components."
I've found a great example (http://blog.benoitvallon.com/projects/a-mobile-desktop-and-website-app-with-the-same-code/) that uses the same concept and accomplished the result (react-native 0.13.6 and react 0.14.2).
In this code, you will see nothing special just a smart idea on how to extend react-native naming conventions system to include a web version. The minute I upgrade to latest react-native, it complaints about any component that uses React.Component from the react package instead of react-native.
This is confusing since 0.14 release seem to indicate that was exactly the point moving fw. Let React create components, let react-dom deal with the DOM and let react-native deal with ios/android views.
I think this is a brilliant idea but I cant seem to pass this particular problem. Any thoughts, ideas will be greatly appreciated.
Thanks
The transition to make react native work this way is underway but incomplete. See AMA.
We are working hard to stop using our fork such that people can use require('react') and work the same as require('react-native'), this will make it possible for all the third party plugins to work on both places without doing anything.
Right now we can't use relay on the open source version of react-native without forking it, which is a huge shame and we're working on fixing that.