I would like to visualise the components I have used in my project. I have used PHP for the backend and Laravel+Reactjs for the frontend.
What I want to achieve is to understand all the components that depend on each other and how/what they pass to each other.
Is there a way to automatically generate the class/component diagram out of the project in phpstorm or vscode? Can I visualise it on the Chrome's dev tool? Note: I am already using the Chrome dev tool for react component.
You can try dependency-cruiser.
dependency-cruiser can visualise dependencies.
I've used a Google extension called Realize for React for my project, which in the developer tool helps visualize components that appear on a specific route.
But the extension crashes often.
Related
I am wondering how to add React into an existing ASP.NET Core MVC project in Visual Studio 2022 (no, I cannot use VS Code). I can see templates in VS2022 to create new React projects, but I have been unable to find any tutorials, videos, blogs or vlogs to show how to add React into an existing project, so I am wondering if it can be done.
I have added react.js and react-dom.js to the project and I am able to create pure javascript components using those (no JSX), but I would like to utilize more of what React has to offer.
=========================================
After the request to ask a more specific question, including the project in question . . .
I am currently on a small team working on an ASP.NET Core 6.0 MVC application. It is currently using jQuery and jQuery-UI components within the CSHTML views for the UI. There are some $.ajax calls to an API for data, but most data is loaded with the model of the view.
My boss has asked me to look into utilizing React and the reusable components on the next module that we will be working on, without replacing the entire app into a "new React application".
Every single example, video, tutorial that I have watched uses VS Code or some other IDE (other than Visual Studio) to run commands on the CLI to "Create New React App", but nothing on how to "Add React to an Existing App".
Before I go back to him and tell him that I do not think we will be able to do what he is asking, I thought I would see if anyone here could point me to anything that could show that it could be done.
Specific question: can React be added to an existing ASP.NET Core 6 MVC app in Visual Studio Professional 2022 in a way that will allow linting, testing and JSX for reusable React components?
I think I know what you are trying to achieve:
Replace what you used to do in jQuery with React and to do so without
having to move to the whole VSCode, Create-React-App (or Vite), "npm
run stuff" environment.
You can indeed do so: I have setup a .Net6 project which is the standard MVC stuff that you are already used to, stripped out jQuery that comes with it, added Bootstrap 5 (no jQuery) and then used this (https://beta.reactjs.org/learn/add-react-to-a-website) to actually add React just as a library - JSX included.
The final bit that is missing is the JSX babel warning I get. I just need to add something to my MSBuild that will minimise all my JavaScript and JSX components and I'm done.
Everything in Visual Studio too.
You can easily build components and I use a watcher on session storage to tell the state to render and it works pretty well.
The main reason I did it was so I didn't have to use NextJS because I don't see the point in learning/using NextJS and it's whole environment because its "Server Side Rendered" when that is what we have been doing for years in .Net MVC, Wordpress, and every framework/CMS you can think of.
Note, I am not against Next I am just at a point where I only use/learn tech if there is a benefit. I can clearly see the benefit of using React over jQuery.
My public facing app needs to be actual HTML coming from the server not a client side rendered page.
My private login area I build using Create-React-App (or maybe I'll switch to Vite - as I am rebuilding it) and I do all that in VSCode.
I would like to generate Typescript React pages or components by using an API and not a CLI tool (like Plop.js) offers for example. The idea is to generate those components from templates based after a tool is run and it should happen behind the scenes without user interacting with the default CLI tools that they usually come in.
Thank you.
You can use http://json2ts.com/ for this issue.
Or also there is package
https://www.npmjs.com/package/json-to-ts
I have come across Hygen and used their setup that was noted down in the Readme to setup an API for generating custom components without interacting with any default CLI tools.
Recently I've joined a new job and they are working with Salesforce. They have all pages with APEX and I propose to migrate to Lightning components.
I've created the first 7 components and I'm using Atomic Design Methodology (https://atomicdesign.bradfrost.com/chapter-2/) to develop these components.
I want to implement stories (with Storybook) or another similar library to document and put examples of each web component.
My question is... Is it possible? I try to install Storybook in the project and isn't working. The question is simple, whether or not you can. And if not, if you know any alternative to it.
Thank you!
In order to use Storybook, you will need to follow the provided Storybook documentation for lightning "Web Component" rather than the other available options like React and configure your VS Code to work with your SF Environment. Also, you might want to look into downloading the lwc-services, lwc-webpack-plugin and mo-dx-plugin dependency.
I'm starting building a react native application for both iOS and Android. I've read through the documentation of react native application, but there is one thing now I do not understand:
Is react-native app fully native application?
They say in react-native, that it would be. Then why am I asking this question? Well, I found the reason to ask the question through https://github.com/Microsoft/react-native-code-push. According to code push, they are able to dynamically update the application. And this is done by updating the javascript part of the application. But wait, if the application is real native app, then in the final version of the app there shouldn't be any javascript, am I right? So how are they doing it? Are they compiling the application at code push servers, and then sending the compiled app to the user or what? This really worries me that the react-native app is really not fully native app.
The CodePush plugin helps get product improvements in front of your end users instantly, by keeping your JavaScript and images synchronized with updates you release to the CodePush server. This way, your app gets the benefits of an offline mobile experience, as well as the "web-like" agility of side-loading updates as soon as they are available. It's a win-win!
Also, the reason I'm doubting this is because they say also in code-push documentation, that they are unable to update the native part of the react-native application:
Note: Any product changes which touch native code (e.g. modifying your AppDelegate.m/MainActivity.java file, adding a new plugin) cannot be distributed via CodePush, and therefore, must be updated via the appropriate store(s).
If the react-native app would be fully native, then in the end, all code should be native code. So I don't really understand why would it be harder to update the native native code, than the code that has been compiled to native?
If you change only code in /src/ folder (JS code) and without adding native modules
you can use CodePush to update your application.
If you change code in /src/ folder (JS code) and add some natives modules, you can't use CodePush to update your application.
You're JS code is compiled and read by native components. That's why you can update the JS layer.
If you take a look into your .ipa file and open main.jsbundle (unminify required) you can see your JS code. example:
I have an app based on the create-react-app starter kit and need to switch to universal/server rendering due to SEO issues.
Is there an easy way or example of taking the create-react-app teamplate and adding or modifying it to support universal rendering?
A lot of the examples I see for universal are overly complex for my needs and I prefer to keep it very clean and simple, if possible.
Thanks.
EDIT: FYI,
I found this medium post which points at this repository.
Seems simple enough, but since I'm a newbie on all webpack/react/node related stuff, if anyone thinks it's the wrong approach, would love to know...
There was a proof of concept of adding server rendering in this PR.
I can’t speak to how good it is but it’s something you could start with.
You may also look at some of the alternatives.
A few of them provide server rendering out of the box.
I've just created react universal (server-side rendering) starter used recommendations from redux and react-router v4. Fill free for feedback
https://github.com/gzoreslav/react-redux-saga-universal-application
You can take your app (bootstrapped with Create React App) to the next level by replacing react-scripts with a slightly altered version - react-app-tools, which allows adding server-side code to your project (e.g. for server-side rendering purposes and/or implementing an API endpoint). It will allow compiling and running your app using normal Create React App pipeline, using a single instance of Webpack, on the same HTTP port.
You can find more info by visiting React App SDK.