Whenever I build a React Native app, I get hundreds of warnings that do not prevent the build from being successful. For example, I almost always see many errors like The iOS deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 8.0, but the range of supported deployment target versions is 9.0 to 14.4.99..
What I Want To Know: I ignore these warnings because they're not errors. Is there ever a reason to not ignore them? For example, is it possible that even though they don't affect a given build, they might affect a future one and I should try to resolve them now? Or are many of these warnings part of node modules that I can't change, and I should always ignore them?
Yes you can easily disable them. At the end of my talk I will show you how to do this.
But:
Warnings can sometimes be very helpful.
However, when you are developing your project, they are very annoying and cause console clutter and confusion.
Whenever I am developing a component, I disable alerts at the beginning. And after the development of a component is finished, I reactivate the alerts to be notified that my component performance is improving.
For example, React says you should always use an key attribute in map statements. But well, sometimes I forget to do it. Do not insert key is not a mistake. But for reasons (which are not allowed here) it is better to use it.
So I suggest you do the same. This can be done simply with the following command:
console.disableYellowBox = true;
For example
export default class MyClass extends React.Component {
render() {
console.disableYellowBox = true;
return (...);
}
}
Also you can include console.disableYellowBox = true; after your imports.
Related
I have an object that is used to to keep track of errors in a long form.
If you try to click on the submit button, and there is an error, I want to be able to scroll to that error by name.
I considered useRef, but each of these inputs are in a deep component structure, and it would need quite a lot of useRef's to be able to jump to them (and a significant rewrite of the inputs component library).
So, I figured I would just go with a simple pure javascript way:
function onClick(){
const errorInputName = Object.keys(errors)[0];
document
.getElementsByName(errorInputName)[0]
.scrollIntoView({ behavior: "smooth" });
}
The trouble is with Next.js document isn't always defined since it could run on the server side.
There seem to be plenty of ways to detect when document isn't available, but how can a force this one piece to run on the client side (even if a small delay is required).
Say I have the following ReactJS component:
const MyComponent = () => {
const jsonData = require("./theJsonData.json");
return <ChildComponent jsonData={jsonData} />
}
Notice the require() call within the React component. Normally, I'd import the JSON using import, at the top of the file.
Will someone articulate to me WHY it is wrong to do this. I realize it's uncommon and I've never even seen this approach in the wild. But it does work. I'm looking for a well articulated explanation of WHY it's a bad approach.
Or, if you think it's a good approach, I'd love to learn that too.
UPDATE:
The question still stands, but I wanted to note a bit of research I just did. I just verified that all requires to this file, will reference the same object at run time. Each require() will be replaced by a call to __webpack_require__('the/path.json'). That call returns the same object, always. Even if you use it in different components.
So my initial concern of having 20 copies of the JSON data (20 objects for 20 components) is gone.
So now I really don't know what the issue is. Is there even an issue with this approach, or does it simply "look" wrong.
I think an important benefit that es6 imports provide over 'require' is the ability to reduce Javascript payloads.
Unlike with require statements, named imports allow you to only use dependencies you are actually using in your application, and webpack can shed the dependencies that weren't explicitly imported in your production build.
I am able to use commitizen with interactive mode as expected. However in non-interactive mode is not functioning.
git-cz --non-interactive --type=feat --subject="add onClick prop to component"
cz-cli#4.2.3, cz-conventional-changelog#3.3.0
? Select the type of change that you're committing: (Use arrow keys)
❯ feat: A new feature
fix: A bug fix
docs: Documentation only changes
style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
refactor: A code change that neither fixes a bug nor adds a feature
perf: A code change that improves performance
test: Adding missing tests or correcting existing tests
(Move up and down to reveal more choices)
What could be going wrong here?
Ref : https://www.npmjs.com/package/git-cz
The --non-interactive syntax is supported by another library git-cz (https://github.com/streamich/git-cz).
Weirdly enough commitizen (https://github.com/commitizen/cz-cli) also has the same keyword "git-cz" but unfortunately it does not support non-interactive mode yet!
I'm writing React with Typescript and, after making a change to my code, I started seeing Objects are not valid as a React child errors.
I had changed a property from a string to an Optional<string>, so the error totally makes sense since my <div>{property}</div> code was no longer correct.
So, this is a type error being caught at runtime.
I'm not doing any casting or any other code "tricks" to try to subvert pre-existing type checking; I'm just rendering a value that React detects at runtime to be an object.
It seems to me that an appropriate linting rule or typescript configuration should have been able to capture that property is no a valid React child.
Here's a very simple example (TSPlayground):
type Props = {
example:{}
};
const Foo = ({example}: Props) => <div>{example}</div>
I would expect an error pointing to the use of example inside the JSX.
I've been doing some googling, but I can't find a rule that seems like it would catch this.
Is there one that anyone knows of?
As others have mentioned there's no such a feature available right now. Furthermore linters are more geared towards styling than capturing compilation errors. I don't think what you're asking is possible because example is a dynamic type and setting it to a string makes it a valid JSX node while setting it to an object makes it invalid. Since JS is a dynamic language we cannot know this ahead of time. Typescript helps in this case, but that's a separate type system from eslint rules and as #jonrsharpe has mentioned in the comments there's an issue on typescript repository to add the feature you're requesting (#35622).
I am trying to run a simple test on multiple browsers, here is a mock up of the code I've got:
String url = "http://www.anyURL.com";
WebDriver[] drivers = { new FireFoxDriver(), new InternetExplorerDriver,
newChromDriver() };
#Test
public void testTitle() {
for (int i = 0; i < drivers.length; i++) {
// navigate to the desired url
drivers[i].get(url);
// assert that the page title starts with foo
assertTrue(drivers[i].getTitle().startsWith("foo"));
// close current browser session
drivers[i].quit();
}// end for
}// end test
For some reason this code is opening multiple browsers seemingly before the first iteration of loop is completed.
What is actually happening here? and what is a good/better way to do this?
Please understand that I am by no means a professional programmer, and I am also brand new to using Selenium, so if what I am attempting is generally bad practice please let me know, but please don't be rude about it. I will respect your opinion much more if you are respectful in your answers.
No it's not.
In fact, most of the test frameworks have convenient ways to handle sequential/parallel executions of test. You can parametrize test class to run the same tests on multiple browsers. There is an attribute in TestNG called Parameters which can be used with setting.xml for cross browser testing without duplicating the code. An example shown here
I would no do that.
Most of the time it is pointless to immediately run your test against multiple browsers. Most of the problems you run into as you are developing new code or changing old code is not due to browser incompatibilities. Sure, these happens, but most of the time a test will fail because, well, your logic is wrong, and it will not just fail on one browser but on all of them. What do you gain from getting told X times rather than just once that your code is buggy? You've just wasted your time. I typically get the code working on Chrome and then run it against the other browsers.
(By the way, I run my tests against about 10 different combinations of OS, browser and browser version. 3 combinations is definitely not good enough for good coverage. IE 11 does not behave the same as IE 10, for instance. I know from experience.)
Moreover, the interleaving of tests from multiple browsers just seems generally confusing to me. I like one test report to cover only one configuration (OS, browser, browser version) so that I know if there are any problems exactly which configuration is problematic without having to untangle what failed on which browser.