reactJS with jQuery or JS - javascript

I'm pretty new to ReactJS and a bit confused on how to use it. I understand the basics but when I want to build more complex things, I tend to start thinking in jQuery or JavaScript. For instance if I want to build a web app that print letters from a string on page load, I know how to do it in jQuery but I have no idea how to create it with React. And the tutorials covers only the basics. So my question is, how can I learn to use React in more complex ways? Is it possible to use jQuery or JS in React?

Basic js is easy obviously, but plugin use is documented here: https://facebook.github.io/react/docs/working-with-the-browser.html

Related

Multiple Javascript Framework on a single application

I have a project handling in which already built most of its features and uses laravel and knockout js. But I want to use Vuejs on this one because I dont know yet about knockout and I like vuejs. My concern is, is it possible that I can use both witout conflicting, or im thinking to use vue for specific part of the applicaiton like, live web alerts.
please let me know the pros and cons about this, thank you.

Best practices for large javascript file?

I am creating a web page using html,css and js and I am not following any framework so I have only page (that was the requirement). So I have lot of javascript in my page and I want to move my javascript to another script file. So I have two quesions:
1) What's the best way to do that?
2) Is there any way to call my functions as a property like we can do with node_modules.
var printMsg = require('printModule');
printMsg.print();
or in jquery ($.whatever())
The currently best way to organize your project is through using Webpack. It's allow you to module your js code easily and they a have plugins for almost everything. Take a look at their guide as knowing webpack will make your life easier. Using their guide, It might take you 5-6 hours depend on your dedication.
That's ES6 and knowing webpack will solve like 99% of your problems.
Here's my webpack-simple-template. You can take a look at how I set thing up.

JavaScript ES6 project and jQuery

I have been asked to work on a project and to use ES6 when coding the JavaScript on the project.
The project also needs to use React.
I've been searching for the answer to the following question on google but I haven't been able for get it answered so I hope I am allowed to ask this question here.
My question is ... If I need to use ES6 and React on this project, does that mean that I cannot use jQuery?
You can use jQuery along with React and ES6. At the end of the day, it's all JavaScript. However, if you structure your code correctly with React components, you should not need to use jQuery selectors to make any changes to the DOM.

How to create a HTML5 Drag and Drop Editor?

feel like this is kind of weird question but still,
I want to create studio where people can create cards using different kind of contents, like Text, Images, Video, Audio, Links etc. and save them, so that I should be able to render them as they designed through some other view.
I am planning to built it with ReactJS Framework. I am new bee to ReactJS, just went through TODO tutorials. And done some work around to understand Drag and Drop features with ReactJS.
But I am still confused about How and Where to begin coding for my requirement. What should be the structure of my application. What all properties each components should have, totally got blocked.
I am not asking here exactly to give the structure for my application, I am looking for some resources/documents where it explains how to structure application for these kind of requirements.
Something like beefree.io is what I want to build.
Many Many Thanks for all your feedback.
I very recommend TinyMCE editor: https://www.tinymce.com/download/. This editor has a lot of features. I can also recommend http://hammerjs.github.io/, https://github.com/yabwe/medium-editor and http://premiumsoftware.net/cleditor/.
If you want to create standalone HTML5 editor, you should research GitHub sources of recommended editors and learn mainly jQuery and AngularJS.
Instructions how to create from basics HTML5 editor:
http://www.simonewebdesign.it/how-to-make-browser-editor-with-html5-contenteditable/
http://blog.teamtreehouse.com/building-an-html5-text-editor-with-the-filesystem-apis
http://buildwithreact.com/
I recommend trying out Unroll.io's react-email-editor: https://github.com/unroll-io/react-email-editor
It has a lot of features that you are looking for and is super easy to use in your web app. Also good documentation is available.
This React component is focused towards emails but if you plan to use it for HTML pages instead of emails, you can easily create a similar React component and change displayMode to web as per Unroll.io docs.
I have seen this being used in production on EmailMonster's email editor.

AngularJS and jQuery... What's wrong with using both?

I saw a few blog articles saying that AngularJS and jQuery could be used together in one app. That seems good as jQuery has some functionalities Angular doesn't have and Angular allows us to make a greatly structured logic for a web app.
The fact is, as I'm french I also take a look at french blog articles about that, and french tends to say that we should never use jQuery and Angular together. I asked why on a forum and people said that it's probably because beginners usually use jQuery and Angular for the same things : adding elements dynamically, use ajax requests, etc... But I'd like to use jQuery for some things Angular does not do and to allow bootstrap js to work on my app.
What do you think, are jQuery and Angular bad at working together in one single app? Or does it just depend on how we make them work together?
AngularJS uses JQuery itself, the major reason not to mix and match is just what you described of them stepping on each other's toes.
While I was learning Angular a lot of the time I would end up using JQuery alongside it because I didn't understand Angular or know it's full capabilities. After learning it better my code has continuously less JQuery in it, but if I can't figure it out in angular, I'll make sure it works with JQuery until I can get it.
I guess it depends on what you're aiming for. If you want to develop an Angular app, then Angular already includes a version of jQuery called jQlite, but you can still use jQuery in your Angular app if you want to.
You can actually "wrap" jQuery code into custom Angular directives, which is pretty sweet.
In an Angular app it's safe to include jQuery if you want to implement some Bootstrap functionality. Currently, I'm doing that to implement Bootstrap's collapse component. I have only just begun developing in Angular, so I am not an expert as to all the ins-and-outs of using jQuery with Angular.

Categories