Why React and jquery?

[bmulcahy]

I always thought using both jquery and react was a no no?

[MacKentoch]

Hi @bmulcahy yes you are right.

Why? They both manipulate the DOM (React works on a virtual DOM).

But if you know what you do or you just use ajax from jQuery there is no problem.

[bmulcahy]

I see. in your own apps do you use both react and jQuery? Do you have an example where one is better than the other or is it really just personal preference? I am just curious more than anything. Also why both bootstrap and react bootstrap is that do to the incomplete port for react bootstrap? Although I don't use everything in your scaffold I like the organization a lot. I have never thought of putting an index.js for each of the different components(using this term loosely) that ties all sub components together.

[MacKentoch]

Your questions are absolutely wise and emphasis the need to make things more clean in these starters.

JQuery:

These starters are useful for me at office (and sometimes for personal projects: since time saving for scaffold). I've used and still use them a lot (since a lot of little applications).

Talking about jQuery, I kept it because of the early days of theses starters. I used ajax from jQuery. My colleagues were not at ease (our backends servers were also not helping us...) with other lib to fetch server so we kept a well known lib at that time.

Then I used jQuery on a fast home made BackToTop button. Yes VanillaJS can do the same but I was a bit lazy.

Bootstrap / React-Bootstrap

In fact to be clean (I agree with you this not super clean, sorry about that...), I should leave bootstrap for pure react-bootstrap now.

I only used bootstrap when I started then I tried to switch to react-bootstrap. But the precise time I wanted to switch I encountered some ugly warnings due to a breaking change (from ReactJS) that was not fixed in react-bootstrap (fixed now for long, so no worry): so I kept bootstrap as it was safe and fast at that time.

advice on index for all component

index.js is nice but as when you need to reduce size of the bundle of your application it is not recommended. So now I don't use them that much and even avoid to use them.

Example:

This is better:

import AnimatedView   from '../../components/animatedView/AnimatedView';

than:

import {AnimatedView} from '../../components';

In case you care about bundle size (if it is a small application maybe you don't care since you don't have so many components).

Trick not to loose the comfort we had from all from index js

If you use VSCode, add this extension Path intelligence (christian-kohler.path-intellisense). It will help you navigating directories and files so that you will never loose yourself in even long lasting paths.

[bmulcahy]

Great advice..I just recently switched from Atom to VSCode so I'll add that extension.

One thing I did add which may help others is the html-webpack-plugin . I ran into problems with the Url Loader not creating the correct link for images that were too large to inline and the html webpack plugin fixed that for me. It also let me easily incorporate a Public path.

Any thoughts on Favicons and an easy "clean" way to implement them? I currently use /favicons-webpack-plugin but this is a very large module(requires phantomjs), almost too large for what it provides.