|
I don't have much experience with React, for I chose Angular instead. Angular and React are similar in design and sort of the same. Last year, I tried to convert my website which I wrote in .Net Core MVC, Razor, JQuery and Mobirize over to Angular.
I did what you are doing ...
Many of the cool Mobirise effects were written in JQuery, so I thought it would be an easy conversion for me to rewrite these effects from JQuery to Modern JavaScript and include the JS files and call the functions. This conversion would also remove JQuery from my project and I would be JQuery free at last. So I started rewriting JQuery into modern JavaScript and got a few effects working. Then the hammer came down on me; and I realized that the conversions only worked on the first page load. When switching pages, my new effects did not fire or run; because there is no page load when switching pages in Angular. In other words, Dom Ready only exist on the first page load. The Angular router doesn't fire a DOM ready when routing is called. So all this work went out the window and I moved on to CSS.
Next I worked on the cool Mobirise CSS styles, effects and animations. I wanted my project to be free of CSS, and chose SCSS instead, so I translated all of the Mobirise CSS into SCSS one style at a time and tested them and got good results.
So I was finally ready to do a dump of all the old technology and go with the new technology to produce a clean project. I dumped JQuery completely, Went SCSS, and worked on my Webpack, node-sass and build or package.json file. My project was a mess and all the old technology that was removed left me with a basket full of holes or missing things. I fixed or replaced one thing at a time and got 95% of it working.
So what did I learn?
I learned that the old way of how a website works does not apply to technologies such as Angular, React and Vue. It's a totally different way of thinking, which includes how your Models are designed, getting more CRUD like in how you design forms and your API calls, and even down to database document designs. With efficient models, db documents, and even SCSS classes, you can really simplify a project down to the bare bones with very few lines of code and HTML.
Now I have about 16 months experience with Angular V7+, SCSS, Webpack, npm packages, .Net Core V2.3+, modern JavaScript, TypeScript, MongoDB, NodeJS and I get it now. I'm in the process of adding a new store to my website as an experiment to test my skills before I write dedicated store on an enterprise level using React. I'm getting out of software contracting for others and will write my own apps for profit starting next year.
Final Thoughts
I don't think you have enough experience with not just React, but how this new technology works in general. You need to realize that you need to start from the ground up and explore the new possibilities that exist out there with React and dump the old way of doing things. If this CARB project your working on was sold as a React upgrade using the existing database servers and models, your going to be fighting this for years. That's why I was concerned as a California resident and my gas tax money being spent on this.
Check out my website link below, it's the project I'm talking about; my conversion from .Net Core MVC to Angular. And also a database conversion from SQL to Document based. You can GTMetrix the project as well to see the small footprint I created as well with super compression using webpack.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
I too understood that, i need to build the whole front end design from scratch with React. Another thing is, its not that whole project converting from jQuery to React, its a prototype I am trying to make. This project that I am working isn't a live project, its just a small prototype project I am doing now.
Since the React and jQuery operates differently, conversion of jQuery or even using jQuery isn't an option in React, better to build it from the scratch.
This is an with couple of pages for prototype to show how single page App works.
|
|
|
|
|
jkirkerx wrote: I'm getting out of software contracting
I am not into Contracting anymore buddy - I am an employee, but this is prototype app. It is not an enterprise app yet, this app isn't launched yet, it seems we need to write it from the scratch.
The reason why I was going in that direction was, it has jQuery libraries which have click etc events written and reading all those and implementing them again I thought may take longer time, but actually if it takes let it, that's what it is.
You know right reading jQuery is like more challenge, that's why mostly these readable front end scripts like React Angular came in. I too did around 6 months of work on Angular, but React is little different than Angular in terms of syntax etc but yes I feel routing was much similar except we need to import rounting explicitly.
|
|
|
|
|
Did you use React Web Api app before?
|
|
|
|
|
I want to create html seit and call a URL ('.....') and write die result in Browser console ?
how could i do it because i can't get it well
i will be glad for an explanation
|
|
|
|
|
|
You can use AJAX because it sometimes supports other browsers.
|
|
|
|
|
Which Grid is Faster than for loading 8000 records?
|
|
|
|
|
Please stop reposting this question. We have explained that the only way to compare speeds is to run timings using your own data. And also it is very bad design to put that many records into a grid.
|
|
|
|
|
One that only loads the visible records.
Social Media - A platform that makes it easier for the crazies to find each other.
Everyone is born right handed. Only the strongest overcome it.
Fight for left-handed rights and hand equality.
|
|
|
|
|
Use your own data to ru the timings.
|
|
|
|
|
Hi folks!
PDF-Exchange Editor operates with Mozilla JavaScript Engine is initialized (vJavaScript-C 17.0.4esrpre). I have the option to add a JScript at multiple points in the process (Before Saving, Before Printing, etc.) I just have no idea how to find a sample script because I don't seem to know how to word it. Here's what I'm trying to accomplish.
Before Document Printing: add the file name to the Header (permanently, by the way). PDF-Exchange has what they call Watermarks which I currently use on a manual basis - Dynamic Stamps, too but just to add a date stamp.
Whatever you can think of is fine with me!
Thanks so much!
Bob
|
|
|
|
|
Did you try another browser?
|
|
|
|
|
Hi.
This product is installed on my work desktop. I don't believe that it would have a browser-related aspect. I am looking to set-up a script inside this program.
Thank you!
|
|
|
|
|
hello frinds i want to ask that this question about javascript
|
|
|
|
|
jQuery[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
It's a famous Framework but not the one and the best.
|
|
|
|
|
Somebody wrote a bunch of useful functions in JavaScript that were easier to use than native JavaScript. They called it jQuery.
Social Media - A platform that makes it easier for the crazies to find each other.
Everyone is born right handed. Only the strongest overcome it.
Fight for left-handed rights and hand equality.
|
|
|
|
|
It’s some functions that are easier to use than JavaScript
|
|
|
|
|
jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.
jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.
jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.
|
|
|
|
|
So I created this user interface to manage the sub categories of a category.
I have the whole document loaded in Angular V7+ as a model, and I just list the sub categories in a table.
Now I have a search interface in which I'd like to query to sub categories to find a specific one.
In all my other uses of search, I call a service to .Net Core and let core find the answer and return them. Well that's easy because I'm loading documents. But this time I'd like to just search the model in the DOM. In other words find the data within the document. This way I can edit the document and return the whole document upon a change and let Core update it.
So I can find the Sub Category, but I'd like to reorder the array. Show the search results first and then the rest in TypeScript. Right now I'm just loading the result in a Modal UI for editing. But I will run into this in the future so I should figure it out.
Not sure if I'm approaching this right or not as far as my document design goes. Of if it's not feasible to do and I should write a service for it and let Core do the work.
I looked at this javascript - Reordering arrays - Stack Overflow. I can sort the list, and splice, but this is more complicated to me.
By the way, result just returns 1 record even if 2 exists.
eg.
{
"_id" : "5d702eab43c22b1674a8e680",
"Name" : "SSD Drives",
"Description" : "Solid State Hard Drives",
"Image" : {
"_id" : null,
"Name" : null,
"Alt" : null,
"Data" : null,
"Base64" : null,
"Url" : null,
"Type" : null
},
"CreatedBy" : "admin",
"CreatedOn" : ISODate("2019-09-04T21:37:47.331Z"),
"UpdatedOn" : ISODate("2019-09-06T16:58:16.464Z"),
"Selected" : false,
"SubCategories" : [
{
"_id" : "5d717a48675cc0229cf15ee5",
"Name" : "SATA",
"Description" : "2 1/2\" Sata 3 Drive",
"CreatedBy" : "admin",
"CreatedOn" : ISODate("2019-09-05T21:12:41.633Z"),
"UpdatedOn" : ISODate("2019-09-05T21:12:18.721Z"),
"Selected" : false
},
{
"_id" : "5d717b54c4653d1c24753241",
"Name" : "PCIe",
"Description" : "PCI Addon Card with NVMe",
"CreatedBy" : "admin",
"CreatedOn" : ISODate("2019-09-05T21:17:08.370Z"),
"UpdatedOn" : ISODate("2019-09-05T21:17:04.806Z"),
"Selected" : false
},
searchSubCategories() {
this.query = this.subCategoriesForm.controls["searchQuery"].value;
if (this.query) {
const result = this.model.SubCategories
.find(q => q.Name.toLowerCase().includes(this.query.toLowerCase(), 0)
|| q.Description.toLowerCase().includes(this.query.toLowerCase(), 0));
if (result) {
this.subCategoryEditorForm.controls["subCategoryId"].setValue(result.Id);
this.subCategoryEditorForm.controls["subCategoryEditorMode"].setValue("EDIT");
this.subCategoryEditorForm.controls["name"].setValue(result.Name);
this.subCategoryEditorForm.controls["description"].setValue(result.Description);
this.subCategoryEditorForm.controls["createdBy"].setValue(result.CreatedBy);
this.subCategoryModal.show();
}
}
}
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
I'm getting closer now.
Getting better with push, unshift and splice now.
I changed the way the interface works, where I can now reload the original sub categories after search with a reload button. And instead of sending the category back to the .Net API, I rewrote the API to work with one sub category at a time.
Just need to figure out how to get more than 1 result back.
searchSubCategories() {
const query = this.subCategoriesForm.controls["searchQuery"].value;
if (query) {
const results = this.model.SubCategories
.find(q => q.Name.toLowerCase().includes(query.toLowerCase(), 0)
|| q.Description.toLowerCase().includes(query.toLowerCase(), 0));
if (results) {
const index = this.model.SubCategories.indexOf(results);
this.model.SubCategories.splice(index, 1);
this.model.SubCategories.unshift(results);
}
}
}
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
Okay, the reason that you're getting one result is that everything that you're doing is intended to operate on only one element. Array.find(), for instance, is basically the JS version of .FirstOrDefault(). Array.indexOf() is a single element as well.
The best thing to do in this case is to create a new array, populate it with your search results, and sort it based on your criteria.
For instance:
searchSubCategories() {
if(this.subCategoriesForm.controls["searchQuery"].value){
let query = this.subCategoriesForm.controls["searchQuery"].value.toLowerCase();
this.model.searchResults =
this.model.SubCategories.map(sub => {
if(sub.Name.toLowerCase().includes(query)){
return {
subCategory: sub,
foundIn: 'name'
}
}
if(sub.Description.toLowerCase().includes(query)){
return {
subCategory: sub,
foundIn: 'description'
};
}
});
this.model.searchResults.sort((a,b) => {
if(a.foundIn !== b.foundIn){
if(a.foundIn === 'name'){
return -1
}
if(b.foundIn === 'name')
{
return 1;
}
}
return 0;
});
}
}
This will give you an array attached to your model that has your subcategories, then you can data-bind that array to your result widget.
"Never attribute to malice that which can be explained by stupidity."
- Hanlon's Razor
|
|
|
|
|
Wow!
Nathan Minier wrote: Okay, the reason that you're getting one result is that everything that you're doing is intended to operate on only one element. Array.find(), for instance, is basically the JS version of .FirstOrDefault(). Array.indexOf() is a single element as well.
I didn't know that but it makes sense since it behaves like that. I really need to take a night and read up on modern JavaScript/TypeScript and arrays. I was wondering if it was possible to do.
Map then Sort. I would of never guessed that "Map" would return multiple results, and it's use looks complicated but I get it. Nice job on this! You must have a ton of experience with modern JavaScript or was just curious last night and did the research I should of done. I can see where this knowledge can be really handy for me working with Angular/React/Vue.
Thanks Nathan.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
Sure thing!
Map is honestly really easy. It just performs an operation on each element in the array (as defined in the anonymous function there) and will return a new array of items returned from that function.
If you're familiar with LINQ, think ".Select(x => function(x){ return something;});"
And yes, I've been putting myself through a Vue "upload" over the last couple of weeks, after finally biting the bullet and hopping on the webpack train, so this stuff is all fresh 
"Never attribute to malice that which can be explained by stupidity."
- Hanlon's Razor
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
