Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I wonder if anyone could suggest a step by step beginner tutorial about how to debug React.js app? I am pretty new to React, right now the most annoying thing is there are a lot error shown up in the console but I have no idea how to trace them back.
It's difficult to describe a general strategy to debug "a lot error shown up" so I will walk you through the process for debugging component level errors:
Install the React dev tools extension for your browser of choice:
Chrome
Firefox
Find the component
I recommend either of these paths:
2.a. Open React tab from your browser dev tools and type in the bottom search bar to lookup components by name.
2.b. Open Elements tab, select some element, and switch back to React. The component hierarchy will be expanded up until the React component matching the DOM node you selected in Elements.
Inspect the state and props of the component that is behaving incorrectly.
If for some reason you don't like installing browser extensions, you can throw one or more debugger; statements to set breakpoints that will "pause" the execution of your app and let you inspect the call stack, scope, and errors at these points.
React has its own debug tool installed in chrome dev tools. It is the most appropriate tool at the moment for debugging react apps. It allows you to add break-points, edit your props in the dev tools and see instant results. A good tutorial is this https://facebook.github.io/react/blog/2014/01/02/react-chrome-developer-tools.html, which is the official tutorial for debugging React. You can also download the extension "React Developer Tools" which will install the react dependencies on your developer tools in chrome.
You can also use the standard chrome debugger without the React dependency, which also works well. A good tutorial for debugging in Chrome is this: https://developers.google.com/web/tools/javascript/index?hl=en
The main issue is to learn how to add a break-point into your code via the dev tools and learn how to identify the problems via the responses you get from them. The last tutorial shows you really well how to do that.
I hope that helps a bit and happy coding!
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
I am already trying to develop Office-Addins for more than a year time (side projects needed for work but not a core business). Sadly, I am still feeling like an absolute noob. I tried to research all courses, documentations and SO questions about the matter but it looks like I just cannot advance. I am thinking that Microsoft will abandon Microsoft Add-ins. I tried to contact Microsoft and the developer program always points me to stack overflow So I did not know how to reach out. But I got the impression that the support for Add-ins is really weak and well because of the following reasons:
The Yeoman scaffolding for TypeScript React is really outdated and does not support Functional components but is required if you want to use Fluent UI React framework.
In my version of Windows 10, 2004, it is still not possible to see the developer tools but you stil need the beta Dev Edge DevTools, which remain in beta.
Decent debugging of Excel Add-ins with TypeScript React in VS code with breakpoints is impossible to get working (also when using office debugger because it crashes excel so dramatically that a forced shutdown of excel is needed.
every time something goes wrong with your TypeScript code, the Edge Dev tools tell you that the office.initialize is not properly loaded. So the user is completely on his own.
SPFx is promoted everywhere and on Pluralsight they say that an Add-in runs in an iFrame and that is limited.
I have multiple questions:
How to transform the Class component from the Yeoman generator to a fully functional component?
if you go to the App.tsx file you will see this code:
export default class App extends React.Component<AppProps,
constructor(props, context) {
super(props, context);
}
But when I remove context, it does not work anymore. What is this context? Is this the Excel API?
How to get EdgeWebview2 to work? I have seen demo's but I cannot find the settings to change it?
Is it possible to have breakpoints with EdgeWebview2?
Does EdgeWebview2 give better feedback about what is wrong with your code?
Does a Excel Addin work together with SPFx?
many thanks for your explanation.
Thanks for the question and feedback. There's a few parts to your questions so I'm hoping I can help, as I work on the Excel extensibility platform.
a) If you're looking to build an add-in for Excel and work on cross platform, we would recommend you start with building web add-ins and use the resources here: https://aka.ms/office-add-ins.
b) In terms of "will we abandon office add-ins"? No, we are continuing to invest in our Javascript add-ins. To learn about the latest on the Excel side, you can see our Ignite video here (https://www.youtube.com/watch?v=6IZjQQ9Kr2o), or attend our community calls: https://aka.ms/officeaddinscommunitycall (which happen second wednesday of every month at 08:00 PST).
b) In terms of getting started,
If you were getting started, checkout the quick start here: https://learn.microsoft.com/en-us/office/dev/add-ins/quickstarts/excel-quickstart-react
it sounds like you have tried some of our tools (Yeoman) but are hitting issues. For these, we have an active github channel. I'd suggest logging an issue there: https://github.com/officedev/office-js/issues. Can you log an issue on some of the challenges you are hitting and we can investigate (may be likely after the holidays)?
c) For your questions on Edge, the EdgeWebview2 runtime is currently rolling out to the monthly channel builds. You can find more information here: https://developer.microsoft.com/en-us/office/blogs/office-add-ins-community-call-november-11-2020/, and we'll definitely post news about it once it does become available. Until then, you do have to use the beta channel for Windows.
Thanks!
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I've published a WPF app to the Microsoft Store. While it generally runs find I do find that some functionalities are missing. For example - I'm using TaskbarItemInfo to indicate stats on the Taskbar icon but it doesn't seem to make any effect.
(sample)
Dispatcher.Invoke(new Action(() =>
{
TaskbarItemInfo.ProgressValue = value;
TaskbarItemInfo.ProgressState = pstate;
}));
I did find out that when I go to the path installed by the store (C:\Program Files\WindowsApps...) and copy the content to another folder on my hard drive, everything works fine.
This leads me to believe the problem is around a more restricted permissions for the store folder, but it's only an assumption at this point.
My questions are:
Is there any knowledge or docs around restrictions for store apps?
Is there a way to simulate the store environment without publishing? Feels like trial & error is not very effective
Link to the app (just for reference): link
Is there any knowledge or docs around restrictions for store apps?
Yes, there is a document that lists the things you need to know before you package your desktop application. Here is it: Prepare to package a desktop application.
Is there a way to simulate the store environment without publishing? Feels like trial & error is not very effective
Generally, I'd suggest you create a sideload desktop-bridge package, then deploy and test it in your device first. This should be easier to find out issues than directly upload it to the store.
This question already has answers here:
How do you debug React Native?
(48 answers)
Closed 5 years ago.
How do I properly debug in React Native? From what I've seen so far, the debugging messages given aren't too useful for narrowing down where to look in my code. I just get a stack trace that only mentions dependencies in node_modules
For example:
Android emulator image (sorry, don't have enough reputation to show image on this post)
In the above error, I understsand that somewhere a non-Component object got passed in, but I have no idea how to track it down; the entire stack trace only mentions files from node_modules.
I have tried using Chrome Developer Tools as well:
Chrome Developer Tools image
I have also tried React Developer Tools and it wasn't helpful either.
How do I go about getting output from debugging that is actually helpful and linked to the code that I wrote?
Unfortunately the stack trace isn't always helpful since in this case you have to go through the bridge, and there isn't any single catch-all answer to how to get the information you need.
In this case, you're right that you most likely made a mistake returning a proper JSX object in one of your components. If you remember which components you recently added to your app, which components make up the navigator route that led to the problem, etc, you can make an educated guess as to the set of possible problematic components, and narrow that set down by commenting things out. Once that set is a reasonable size, triple-check your render methods and make sure nothing weird is going on.
You can write your own debug messages to the chrome developer console to help give yourself an idea what your app is doing (e.g. rendering this component, fetching that data from shared store, etc) using if(__DEV__) console.log("Your message here"). This will check if the app is running in a debug vs release build, and only log the messages if you are running a debug build.
You can use adb logcat for android and the XCode console for iOS to see the native debug logs, although I don't think they'll help in this case.
You can draw a picture of your component tree, put a debugger statement at the beginning of every render method, and check off components one-by-one until your app stops trying to render things and you know you've hit a problematic component (React will render components recursively, going from top-to-bottom for components on the same level in the tree).
I know it's frustrating when you can't immediately tell where the problem is by glancing at the stack trace but sometimes that's life.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 5 years ago.
Improve this question
we are starting a new webapp using reactjs, the main reason why we chose react is because of react-native !, the app will be password protected, so we are not going to utilize and seo or server rendering features.
i find most boilerplates for react focus on universal setup yet in my case i want to structure app to sharing most amount of code possible between web and mobile apps
we started our webapp using https://github.com/mxstbr/react-boilerplate
is there a production ready boilerplate/starter that can be used in such use case ?
I think you're still a bit premature to try to share a lot of code between React and React Native. Ben Alpert, one of the React core team members at Facebook, said this in a recent AMA:
Over time, maybe we can share view code between native and web too. There are some cool projects in the community like react-native-web (https://github.com/necolas/react-native-web) which try to make this possible. We don't have anything to show at Facebook yet down this road but maybe in a year or two we could officially support using View, Image, and Text on the web for people who want to.
(emphasis mine)
For React Native, I would recommend taking a look at Ignite by Infinite Red (disclaimer: I'm one of the owners of Infinite Red). It gives you a great starting point and provides a lot of tools (including the fantastic Reactotron) to get you on your way.
Create React App is the best way to start building a new React single page application. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production.
Create React Native App is the easiest way to start building a new React Native application. It allows you to start a project without installing or configuring any tools to build native code - no Xcode or Android Studio installation required.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 8 years ago.
Improve this question
I'm trying to build a mobile "content" application that will be used to display many pages of mostly text, using Sencha Touch (based on ExtJs). I'm familiar with JQuery & JQTouch; I've never used ExtJs before.
What's the best/fastest way to get started?
I started with the "icons" demo and was able to add a scroll property ('vertical') to have content be scrollable between the top and bottom tabs (that's actually what brought me to Sencha Touch: the ability to have "fixed" toolbars).
But now what? How do I update content?
In an ExtJs tutorial (here, near the bottom of the page) it says that one can act on an Element object to load content to an element; but that does not seem to be usable in the same way in the "icons" Sencha Touch demo.
Any help appreciated!
[Sencha person] I would recommend starting with the "Getting Started" guide that helps you write the GeoTweet sample application:
-- obsolete link deleted --
Update: since we released Touch 2.0 - you should start here:
http://docs.sencha.com/touch/2-1/ which has links to all the getting started materials
If you're coming from jQuery/jQTouch, you'll find that Sencha does things quite a bit differently. Essentially, with Sencha Touch you're writing an object-oriented javascript application that generates HTML markup (usually bound to variables/stores) vs. with jQTouch - creating HTML markup that then gets manipulated by javascript.
I would also look at some of the better mini-apps that we've seen in the wild so far to guide you.
-- link deleted --
Update: We now have a gallery of apps for you to see what people have been up to.
I myself am currently reading up on Sencha Touch, and found the following tutorials/articles:
Hello World: http://www.sencha.com/learn/Tutorial:Sencha_Touch_Hello_World
Getting Started: http://dev.sencha.com/deploy/touch/getting-started.html
MVC and PhoneGap: http://www.sencha.com/learn/Tutorial:A_Sencha_Touch_MVC_application_with_PhoneGap
MVC: http://myxaab.wordpress.com/2011/02/27/sencha-touch-mvc-application-part-2/
Data Package: http://www.sencha.com/blog/using-the-data-package-in-sencha-touch
Also, check out the examples packed within the framework and the Forums.
Finally check out this example.
update: found this one http://www.andreacammarata.com/en/corsi/sencha-touch/setup.html
Also, i read that a Sencha Touch book "in action" will be out by the summer...
This is quite good and easy to follow: Writing a Sencha Touch Application
I am also a sencha touch learner,I just get the toturial from sencha official website.
maybe you can hava a look this link:
http://www.sencha.com/learn/my-first-sencha-touch-experience
It is from sencha website.
Jesus Garcia and Anthony De Moss are working on the sencha-touch book called sencha-touch in action checkout the manning publication there are some few chapters available for free to take you through the setup and also the documentation for sench-touch-1.1.0 is detailed enough to you started
I was in your position a few weeks ago and found this video to be the MOST helpful out of all of them out there:
http://www.youtube.com/watch?v=5F7Gx0-W-M4&list=UU5VQSlJfHizgPCFxyx37pvg&index=6&feature=plcp
Since Sencha Touch's initial setup is a bit confusing, this guy- Rohit- really breaks it down and gets you started in no time. He even gets into pulling dynamic data from remote sources like the google maps API.
The absolute greatest tip you can take from this vid is how to use XAMPP and this terminal code (Mac) to view your project in the browser:
open -a safari --args --disable-web-security
If the security thing makes you uneasy, I've found that the webkit browser Omniweb http://www.omnigroup.com/products/omniweb/ loads projects without a problem
Once you are off with the hello world.. you can have a look at this awesome tutorial..
http://mobile.tutsplus.com/tutorials/mobile-web-apps/create-a-location-aware-site-with-sencha-touch-displaying-locations/
New hands-on tutorials for Sencha Touch, Ext JS 4, and Sencha Architect are now available at the following URL:
http://training.figleaf.com/tutorials/senchacomplete/