I am angular developer and learning react. The way you describe the react dynamic components is just wow. It would be better if you can refer some links for the scroll and other animation in react.
to be absolutely honest, you've done the perfect tutorial. Einstein had a quote, 'If you can't explain it to a six-year-old, you probably don't understand it yourself.' and my friend, you can explain it to a 2 year old, haha! Thank you so, so much! Amazing job!
A good beginner guide. The first half is easy, but mapping is a bit quick for the complexity of the topic. That said, I could figure it all out and appreciate the speed and simplicity of the approach.
Woah! This felt so simple yet I want to continue watching more of your tutorials! It'll be cool to see some when you can interact with the images in the Portfolio section and the contact section as well ^^ Keep it up!
Better to mention down the steps too, in the description, as it helps people like me, who struggle a lot with hearing. We need to look at the video and also at the subtitles too which kills our much time... I am a cerebral palsy case from Mysore, Karnataka, India.
Oh wow, I'm glad that you are interested in my videos. I just built a blog, I'm going to be adding blog posts for my videos and then including links to them in the description. I'm glad you let me know because now It gives me an incentive to work harder on it lol. Thanks so much :)
@@thelavishcoder2553 This will be great... If you include a blog... Please do let me know. I can also assist you in building blogs. I was a article developer for vistahunt.com You can see my articles. One more website I have developed is programmingbasics.in Just go through it and let me know.
Thanks for the concise tutorial. If I need to change the colors of texts, header, background, etc, must I use the non-minified of the bootstrap or it is possible with the minified version as well? Pls explain how to go about that sir, thanks.
FYI, In VS Code, if you select one of something and right click, you get an option to "Change all occurrences", so that you don't have to Command-D a bunch of times
This video is awesome. But the GitHub code you have used to create the website. It is updated now. So I am unable to find some of the folders in this updated GitHub. Can you make another video with updated code.
Thank you so much for the tutorial, it helped a lot ! Question. I am really new to React. In your example, how would I change the image path so each entry can have a unique image? I did it the same way (image path) as text, but it is not working. I move it outside of the image src tag, and the image path works. Any insight would be great, thanks !
is it legal to use bootstrap templates for commercial purpose just by changing little of our desire?anyway man your video is awesome...i loved every second! ;)
Hi Miguel, Thank you for an excellent tutorial. This is very helpful. I have a question regarding the navbar. While scrolling to different sections there isnt any black background-color which can be seen in the original template. Could you share some light on how we could do it in React than jQuery in the original template? Currently the navs are not visible on scroll. Thanks
Hello! I want to ask. I changed the color of the button, but if I point the knob (mouse), it turns yellow instead of blue. How can I change? Thank you! :)
This was good..It helps me How to convert simple bootstrap website int React Thank you.! But I have one doubt, Where you use images like background i.e "header-bg" and "map-image".I mean, In which file & where ?
Good tutorial. But on the mobile version of the site the menu does not work. The button menu is showing but when I click does not appear all the menu itens. Why?? thanks for the video !!
The purpose of the video was to show you how to easily separate old JavaScript frameworks from the style (CSS) and structure(HTML) and use it to make a new website with React. That part was not implemented in my video and I left it to the viewer to implement that parts that are missing. I hope that helps :)
@@thelavishcoder2553 Thank you for the answere. I made a responsive menu by my self and then I am using on my website. The content of the video helped me and is amazing and very didactic, keep in that way :)
Hello, thanks for this. What if there are some section that require fetching the data from third party API? Curious on your project structure on this...apart from Component folder, will you create a separate folder call Services for the 3rd party API handing? Any tips?
I use Axios for calling third party APIs. You can import it from a separate module or you can use it in your Vuex Actions. You can also use GraphQL (which I enjoy quite a bit). It’s really a matter of preference, but if you use axios you shouldn’t need a separate folder structure, and you can extend the Vue prototype which will make axios available in all of your components. (Import axios from ‘axios’;Vue.prototype.$axios = axios) In the case of Vuex actions or GraphQL, you might want to make a separate folder called “store” and “graphql” respectively.
Fetch has some issues and it doesn’t have a configuration for setting request headers, you have to basically set them every time or maintain your own configuration. I would definitely look into GraphQL if you get the chance. It’s a lot of fun to use and all the big companies are using it. It’s quickly becoming the standard. Most people are moving away from Redux IMO.
@@KenAragorn It's becoming the standard because as companies scale they start to have extremely large quantities and complexities of data. When your data gets that big you want to start offloading compute onto the frontend(which is more like a ui backend). Thats where GraphQL comes in. GraphQL allows you to do aggregation on a separate server so that your backend doesn't get bogged down. So if you work at Google, Facebook, Uber, Twitter, Wal-mart or any other big company that has distributed architecture you will definitely be using GraphQL because it really makes things easier on the backend and it's also really fun to use.
Wow man, i am just beginner to react.. but u made it so simple. Can you help me out some plugins or necessary apis that are best to use in a complete multipages static website like crousels, animation effects, zoom, tables etc...
Hello. Thanks for the tutorial. I have tried same bootstrap template with VueJs. I remember that I was stucked for custom js functions (Espacially banner shrink when scrolled down). So I was handled with mixins. Could you please your solution how can you handle it with react. Thanks.
@Miguel Coder great video , I am really beginner in dev and I have a doubt related to functionality of the web, I downloaded the template as you did and followed all steps , But I am seeing that If for example try to send email in the section of contact us or even click over the portfolio ,it does not work , i mean does not open a new window with the portfolio explain or the mail or message is not reaching to our email. there is a way that you explain how we add the other functionality with react?
It would be great if you make a video to adapt for example other part of this template , more than the landing page, if not the link to other sections. please help me :)
@@thelavishcoder2553 yup. I got that. now the issue is my header and navbar got mixed up.I am following every part acc to video. but I don't know. Can u provide email so that I'll send screenshot so that you can help fix this issue.
Hi, Thanks for your great and practical tutorial. What about the navigations/menu? You did not touch about it. In html the links normally like these: Home or in SPA like this: Homepage Can you help how to do that? BR, I am Nyoman, from Bali, Indonesia
When I get some time I'm going to add a new tutorial that builds an entire website with a backend and login with GraphQL, but I'm churning out a really complex project at work right now so it might take some time.
Is it same structure when you add a javascript files in your project, because you did not show us how to include javascript files i.e. jQuery, popup.js ... . Also what will be the difference when you manually download files, or use npm to install most javascript or css files, does it confuse reactjs?
JQuery is a legacy JavaScript framework. It existed to supplement the lack of JS features that existed at the time. You should be able to find the equivalent in some ‘react npm module’. Using jquery is a big red flag to hiring managers. With that being said, If you have your heart set on using a CDN library you will need to reference it in React using ‘window.’ because Webpack puts all of your JavaScript in a different scope.
@@kevinphilippk.6129 You have to decorate the jquery object. I'm not sure how that works. You will have to look at the documentation. It's easier IMO to just use vanillaJS
Nice job Miguel. I am having an issue with the nav bar, for some reason it doesnt appear to have the expand / collapse working. It just lists out the expanded content, but the menu button doesnt work. Could you please help me with this?
In this video, it didnt look like it was working on your browser either. I can see the nav drawer on my mobile, but it doesnt expand. Appreciate any help with this
I might have to redo this video. I'm making a whole course at the moment, but it's going to take time. I'm basically going to show how to make a full stack React app with all the bells and whistles.
@@thelavishcoder2553 I look forward to the react course :D This video was a good introduction, but it would be good to learn how to make a full stack react app. Thanks!
Why is the navbar different in the react project. The navbar has no background once you scroll down in the react project and in the original index.html code there a dark back ground color
when i do a NPM Start and then begin to custom edit the theme with my own content its not all saving!. i use Visual Studio to edit sections and images, However when i open the project again with Npm Start all my custom work has been removed back to default, All but one image? would you know why its not saving. Thanks
Hey Im having the same issue. Did you find something ? Its happened to me 2-3 times now. I thought it was a mistake on my part because Ive worked on the project months apart and every time I open on VS code its back to normal.
@@hz1056 i didn't take that project anywhere so didnt find any fix. if i remember correct once you make any change in the file and save it was undoing the work. ? strange one, i just put it down to a bad free template.
@@tristonedwards7094 yeah I would save the work and it would revert back if I closed down VScode. Weird .......I don’t think it’s the template tho. I’ll try to look into it.
@@romanpabianczyk8870 If the module isn't found its because it doesn't exist. Make sure you have react in your node_modules folder. If you don't then something went wrong with the installation.
If I were want to change the home page image, to have carousel, I assume we just need to find the Bootstrap CSS for carousel and then create a component for it?
Yes, but you have to make sure that you access the data from the JS API of your bootstrap, whatever, because React rerenders the entire dom subtree when something changes so it can overwrite your bootstrap elements. Vue doesn’t have this problem.
@@thelavishcoder2553 I figured it out, in the css file where it's calling the jpg, it was still looking for it within the asset/img path, once I changed it to just the name of the jpg (without the path specification) it worked lol
Are you serious? What about the Javascript file, the hamburger menu doesn't work when the screen shrinks, and the navbar stays transparent for the entire page.
This is just a course on how to get started converting a website template. If you want a full stack react course you can find that here ua-cam.com/play/PL7NAk9A3ueyXGX00zl7FzuaCAQhQTFPxJ.html
i have a website template but it has js files how can i running them the template : themewagon.com/themes/free-bootstrap-4-html5-pizza-website-template-pizza/ pleassse help me the words not work is the java script not working with react js ?
Hello, someone to help me. After selecting all using ctrl + D, which shortcut selects all text to the left? I can only get ctrl + shift and I can't get the other. Kindly help I'm using windows.
First of all love your videos and can you pleases help me with this hello all!! I am new to react.js . Actually i downloaded a theme which have external javascript libraries i.e bootstrap.min.js , jquery.min.js, slider.js , jquery-flexslider,min.js . I created a react app using create-react-app and i copied all the external javascript libraries and css files in index.html of the public folder of my react app and copied all the html of index.html of my theme in app.js which i downloaded. All the css are working fine but the javascript libraries are not working on the page. Following is the demo of how i included the css files and javascript libraries in index.html of the public folder.
Now my question is, how should i include the javascript libraries so that it start working for me. This might be a silly question, but i am new to it. Pardon me. I am trying for it from 2 days and did a lot of search for it but i failed. Please help me out with this issue. I tried to put all the files in the src folder of my react app but it still not working. Thanks in advance
@@thelavishcoder2553 github.com/BlackrockDigital/startbootstrap-agency/blob/master/js/agency.js Where did you include this file.Kindly help to include this js file
All you have to do is add a @scroll event listener to the container and then if HTMLElement.scrollTop !== 0 add the class that triggers the transition to the toolbar. It’s not a good idea to mix JQuery with React. That’s like mixing React with Vue.
Not quite for beginners since you worked very fast and threw around a lot of terms which you never explained. But still a good video and helpful. Thank you. I hope do a real beginners series at some point in the future since you have a a good clear communication style.
Thank you for the feedback. I don’t think I’ll be making the series however since I’m building a blog course and will eventually be building a Vue course as well. Thats going to take me well into next year.
@@DhiaMagicien Jquery is a JS file(which you don't need as I mentioned before). You can do all that with React and VanillaJS. React isn't made to work with JQuery because how it patches the DOM will cause bugs when used with JQuery. I don't think it's possible to pack all of the features of the website in 30 minutes. This tutorial was more pointed towards introducing people how to quickly get started from a template. The JS files in the original repo are not needed and shouldn't be included. Thank you for the feedback.
This was GREAT
I've learned more from one video than have doing hours research with loads of guessing.
I am angular developer and learning react. The way you describe the react dynamic components is just wow. It would be better if you can refer some links for the scroll and other animation in react.
Thank you bro, lets show those wordpress and shopify guys what a pro really do.
haha i love this comment, bcz i work with wordpress and really wanna get into React...
this was probably one of the best tutorials so far haha :D tnx we need more of this type of content
Can you do more tutorials with React? This is extremely helpful !!! Thumbs up!
Thanks for the boost of confidence! Many more videos coming soon. I promise!
to be absolutely honest, you've done the perfect tutorial. Einstein had a quote, 'If you can't explain it to a six-year-old, you probably don't understand it yourself.' and my friend, you can explain it to a 2 year old, haha! Thank you so, so much! Amazing job!
I am from India. u r teaching best from other channels. keep doing more in react bro😍😍😍😎
Thanks bro. I'm taking a little break right now but I'll be back soon. Please like, share and subscribe for the algo. :)
A good beginner guide. The first half is easy, but mapping is a bit quick for the complexity of the topic. That said, I could figure it all out and appreciate the speed and simplicity of the approach.
Really this tutorial is very helpful for me love from 🇮🇳 india
Woah! This felt so simple yet I want to continue watching more of your tutorials! It'll be cool to see some when you can interact with the images in the Portfolio section and the contact section as well ^^ Keep it up!
This tutorial is so direct and informative, your format is really easy to follow. Thank you!
Thanks Jeremy, I’m happy to help :)
Nice video learned much more Reactjs in just a one video
Cool, I'm glad I could help
Thanks a bunch! I'm teaching myself React and this was really helpful :)
Glad it was helpful!
Better to mention down the steps too, in the description, as it helps people like me, who struggle a lot with hearing. We need to look at the video and also at the subtitles too which kills our much time... I am a cerebral palsy case from Mysore, Karnataka, India.
Oh wow, I'm glad that you are interested in my videos. I just built a blog, I'm going to be adding blog posts for my videos and then including links to them in the description. I'm glad you let me know because now It gives me an incentive to work harder on it lol. Thanks so much :)
@@thelavishcoder2553 This will be great... If you include a blog... Please do let me know. I can also assist you in building blogs. I was a article developer for vistahunt.com You can see my articles. One more website I have developed is programmingbasics.in Just go through it and let me know.
Thanks for the concise tutorial. If I need to change the colors of texts, header, background, etc, must I use the non-minified of the bootstrap or it is possible with the minified version as well? Pls explain how to go about that sir, thanks.
This is extremely helpful. Highly recommended!
Thank you! Please share on social media :)
FYI, In VS Code, if you select one of something and right click, you get an option to "Change all occurrences", so that you don't have to Command-D a bunch of times
Right, but I just feel like holding down cmd d is faster.
That's what i was looking for.
Make more videos please
I'm making one right now lol :)
Woow great 🔥
This video is awesome. But the GitHub code you have used to create the website. It is updated now. So I am unable to find some of the folders in this updated GitHub. Can you make another video with updated code.
It's all in my repository.
This is amazing! Thank you!!
I'm glad you like it. If you would like to see more content like this please join my community @ www.skool.com/coderology-6688
Thanks this was my first react tutorials, where should I start, need a crash course on setup, Can you please suggest.
I have a full stack react course that you can check out
So helpful, love the way you teach
Such a life saver! Great content! Keep up the good job!
I'm trying, but life is a bitch sometimes.
Thats just great. thank you, please keep sharing
Thank you so much for this. Helped a lot🙏
Simple, clear, helpful. Can you do more React tutorials?
Yes sir. I'm doing the best that I can. Is there anything specific you would be interested in learning?
Thank you so much for the tutorial, it helped a lot ! Question. I am really new to React. In your example, how would I change the image path so each entry can have a unique image? I did it the same way (image path) as text, but it is not working. I move it outside of the image src tag, and the image path works. Any insight would be great, thanks !
I really loved this tutorial
is it legal to use bootstrap templates for commercial purpose just by changing little of our desire?anyway man your video is awesome...i loved every second! ;)
Yes, if the particular bootstrap template has an Open Source license like MIT or GPLv2.
Hi Miguel, Thank you for an excellent tutorial. This is very helpful. I have a question regarding the navbar. While scrolling to different sections there isnt any black background-color which can be seen in the original template. Could you share some light on how we could do it in React than jQuery in the original template? Currently the navs are not visible on scroll. Thanks
background: rgba(0,0,0,0.5);
Hello! I want to ask. I changed the color of the button, but if I point the knob (mouse), it turns yellow instead of blue. How can I change? Thank you!
:)
Use the :hover css selector or the mouseover js event listener
@@thelavishcoder2553 Thank you so much!
@@evelinalisovskaja6052 Absolutely! Happy to provide value!
🇮🇳🇮🇳 That's a great video. I loved it so much and i learned a lot of things from this video.
I'm glad you enjoyed it! Make sure to share it with people. It helps me out a lot.
Damn, this tutorial sick
tnx!!!! great tutorial
Glad you liked it!
Thanks it help me a lot when it comes to theme integration in ReactJS.... awesome !!!! TC
Good Job mate , keep it up.
Doing my best!
Very good!
very helpful video
Thank you. This video is very useful for me.
This was good..It helps me How to convert simple bootstrap website int React
Thank you.!
But I have one doubt, Where you use images like background i.e "header-bg" and "map-image".I mean, In which file & where ?
Those are in the SCSS files.
You are best BRO!
Thanks, you are pretty cool too!
Good tutorial. But on the mobile version of the site the menu does not work. The button menu is showing but when I click does not appear all the menu itens. Why??
thanks for the video !!
The purpose of the video was to show you how to easily separate old JavaScript frameworks from the style (CSS) and structure(HTML) and use it to make a new website with React. That part was not implemented in my video and I left it to the viewer to implement that parts that are missing. I hope that helps :)
@@thelavishcoder2553 Thank you for the answere. I made a responsive menu by my self and then I am using on my website. The content of the video helped me and is amazing and very didactic, keep in that way :)
@@johnyanastacio1107 Thanks, I'm glad I could help :)
Hello, thanks for this. What if there are some section that require fetching the data from third party API? Curious on your project structure on this...apart from Component folder, will you create a separate folder call Services for the 3rd party API handing? Any tips?
I use Axios for calling third party APIs. You can import it from a separate module or you can use it in your Vuex Actions. You can also use GraphQL (which I enjoy quite a bit). It’s really a matter of preference, but if you use axios you shouldn’t need a separate folder structure, and you can extend the Vue prototype which will make axios available in all of your components. (Import axios from ‘axios’;Vue.prototype.$axios = axios) In the case of Vuex actions
or GraphQL, you might want to make a separate folder called “store” and “graphql” respectively.
@@thelavishcoder2553 Yup, I think Axios is the most recommended vs Fetch.
Fetch has some issues and it doesn’t have a configuration for setting request headers, you have to basically set them every time or maintain your own configuration. I would definitely look into GraphQL if you get the chance. It’s a lot of fun to use and all the big companies are using it. It’s quickly becoming the standard. Most people are moving away from Redux IMO.
@@thelavishcoder2553 hmm, any reason for people to move away from Redux? And, what other prefer option other than Redux? RxJS? React Hook?
@@KenAragorn It's becoming the standard because as companies scale they start to have extremely large quantities and complexities of data. When your data gets that big you want to start offloading compute onto the frontend(which is more like a ui backend). Thats where GraphQL comes in. GraphQL allows you to do aggregation on a separate server so that your backend doesn't get bogged down. So if you work at Google, Facebook, Uber, Twitter, Wal-mart or any other big company that has distributed architecture you will definitely be using GraphQL because it really makes things easier on the backend and it's also really fun to use.
good tutorial. thank you!
Wow man, i am just beginner to react.. but u made it so simple. Can you help me out some plugins or necessary apis that are best to use in a complete multipages static website like crousels, animation effects, zoom, tables etc...
Animate.css is pretty good for animations and ant design has a good component library.
Hello. Thanks for the tutorial. I have tried same bootstrap template with VueJs. I remember that I was stucked for custom js functions (Espacially banner shrink when scrolled down). So I was handled with mixins. Could you please your solution how can you handle it with react. Thanks.
Sure. I can do that.
@Miguel Coder great video , I am really beginner in dev and I have a doubt related to functionality of the web, I downloaded the template as you did and followed all steps , But I am seeing that If for example try to send email in the section of contact us or even click over the portfolio ,it does not work , i mean does not open a new window with the portfolio explain or the mail or message is not reaching to our email. there is a way that you explain how we add the other functionality with react?
It would be great if you make a video to adapt for example other part of this template , more than the landing page, if not the link to other sections. please help me :)
now the github library updated and i don't see vendor folder. How to update bootstrap.min.css now?
npm install -S bootstrap@4.5.0
in app.js
import 'bootstrap/dist/css/bootstrap.min.css`
@@thelavishcoder2553 thanks man. thank u v much
and what about agency.min.css?? this file also not available now.
@@vipulsinha4293 You can find all of these source files in my repository listed in the description
@@thelavishcoder2553 yup. I got that. now the issue is my header and navbar got mixed up.I am following every part acc to video. but I don't know. Can u provide email so that I'll send screenshot so that you can help fix this issue.
What are you using to find those errors and telling you what's wrong?
`console.log` and vscode debugger
Hi,
Thanks for your great and practical tutorial.
What about the navigations/menu?
You did not touch about it.
In html the links normally like these:
Home
or in SPA like this:
Homepage
Can you help how to do that?
BR,
I am Nyoman, from Bali, Indonesia
When I get some time I'm going to add a new tutorial that builds an entire website with a backend and login with GraphQL, but I'm churning out a really complex project at work right now so it might take some time.
@@thelavishcoder2553 Thanks
@@after6097 ua-cam.com/video/aI3E8mQa41w/v-deo.html
Is it same structure when you add a javascript files in your project, because you did not show us how to include javascript files i.e. jQuery, popup.js ... . Also what will be the difference when you manually download files, or use npm to install most javascript or css files, does it confuse reactjs?
JQuery is a legacy JavaScript framework. It existed to supplement the lack of JS features that existed at the time. You should be able to find the equivalent in some ‘react npm module’. Using jquery is a big red flag to hiring managers. With that being said, If you have your heart set on using a CDN library you will need to reference it in React using ‘window.’ because Webpack puts all of your JavaScript in a different scope.
@@thelavishcoder2553 Can you show a example please, is this right? import JqueryEasing from 'jquery-easing';
@@kevinphilippk.6129 You have to decorate the jquery object. I'm not sure how that works. You will have to look at the documentation. It's easier IMO to just use vanillaJS
why he did not use {require('./img/picture.jpg')} or import img in index.js ?
Nice job Miguel. I am having an issue with the nav bar, for some reason it doesnt appear to have the expand / collapse working. It just lists out the expanded content, but the menu button doesnt work. Could you please help me with this?
In this video, it didnt look like it was working on your browser either. I can see the nav drawer on my mobile, but it doesnt expand. Appreciate any help with this
I might have to redo this video. I'm making a whole course at the moment, but it's going to take time. I'm basically going to show how to make a full stack React app with all the bells and whistles.
@@thelavishcoder2553 I look forward to the react course :D This video was a good introduction, but it would be good to learn how to make a full stack react app. Thanks!
Put these line in your index.html file, at the end before the last element. It's work for me !
nice kindly put more videos and make the it the dynamic with the api
Why is the navbar different in the react project. The navbar has no background once you scroll down in the react project and in the original index.html code there a dark back ground color
because it's a 20 minute video
good job
when i do a NPM Start and then begin to custom edit the theme with my own content its not all saving!. i use Visual Studio to edit sections and images, However when i open the project again with Npm Start all my custom work has been removed back to default, All but one image? would you know why its not saving. Thanks
You could have the file open in more than one place. I'm guessing you use Windows.
Hey Im having the same issue. Did you find something ? Its happened to me 2-3 times now. I thought it was a mistake on my part because Ive worked on the project months apart and every time I open on VS code its back to normal.
@@hz1056 i didn't take that project anywhere so didnt find any fix. if i remember correct once you make any change in the file and save it was undoing the work. ? strange one, i just put it down to a bad free template.
@@tristonedwards7094 yeah I would save the work and it would revert back if I closed down VScode. Weird .......I don’t think it’s the template tho. I’ll try to look into it.
It should be npm run start
looks great wish i can we read it tho
I'll make a new one of these soon
Suppperve.... thanks for your video..
Hello! Can I know how to make a navbar black? Because it doesn’t show me black. To you I see also does not show. But maybe you know how?
You have to override the navbar style by targeting the class or id that it's using and changing it with css
Hello M. Miguel it's nice to meet you. I'm trying this tutorial but the files css doesn't work. Please i need your help.
Please watch the video one more time.
I got this error when I compile your code
Module not found: Can't resolve 'react' in 'C:\Users\xxx\Desktop\Websites
eact-bootstrap-starter-master\src'
npm install and then run again
@@thelavishcoder2553 I tried and still doesn't work
@@romanpabianczyk8870 If the module isn't found its because it doesn't exist. Make sure you have react in your node_modules folder. If you don't then something went wrong with the installation.
If I were want to change the home page image, to have carousel, I assume we just need to find the Bootstrap CSS for carousel and then create a component for it?
You could. Or you could make your own carousel. Or you might find a React-Carousel in npm.org.
Yes, but you have to make sure that you access the data from the JS API of your bootstrap, whatever, because React rerenders the entire dom subtree when something changes so it can overwrite your bootstrap elements. Vue doesn’t have this problem.
I would be careful though because adding a lot of vendor files can increase your initial load time.
@@thelavishcoder2553 OK thanks a lot. Will continue to play around on this
This is usefull tutorial. Great !!
Ranindu Jayasooriya Thanks! I’m glad you like it.
Gracias saludos desde PERU :) more tutorials from templates bootstrap and react
can we reactify more of websites templates from colorlib and bootstrap
I created the img folder and downloaded the images the same way you did but I am still getting the module not found error... Do you know why?
If the module isn't found it's because it doesn't exist. That's the only reason you would get that error.
@@thelavishcoder2553 I figured it out, in the css file where it's calling the jpg, it was still looking for it within the asset/img path, once I changed it to just the name of the jpg (without the path specification) it worked lol
@@patrikkozak6438 Cool!
Thank you!
Video is very helpful but my header is not working looks like tamplets...
You just have to copy the class over that changes on scroll.
Where and what class will be copied from. pls describe me.
@@salimhusain157 I'll let you figure that one out :)
Beautifully create Bootstrap Website on React need more tutorials more professional , Thanks a lot
waiting for 5k subs
Why the menu button is not working?
Please read the comments
Please, where is the continuation?
This video is just intended to get your feet wet with understand html, css, and JS in the context of web pack.
Are you serious? What about the Javascript file, the hamburger menu doesn't work when the screen shrinks, and the navbar stays transparent for the entire page.
Please read the comments
Where are the next videos. Can you please help me to find. I think this topic isn't ended up over here.
This is just a course on how to get started converting a website template. If you want a full stack react course you can find that here ua-cam.com/play/PL7NAk9A3ueyXGX00zl7FzuaCAQhQTFPxJ.html
why I'm getting the size of header small as it was before CSS?
Have you tried inspecting the DOM and checking the CSS rules?
i have a website template but it has js files
how can i running them
the template : themewagon.com/themes/free-bootstrap-4-html5-pizza-website-template-pizza/
pleassse help me the words not work
is the java script not working with react js ?
Hello, someone to help me. After selecting all using ctrl + D, which shortcut selects all text to the left? I can only get ctrl + shift and I can't get the other. Kindly help I'm using windows.
alt + shift + left
@@thelavishcoder2553 Thanks
How about img src from path ? instead of unplash dynamic ?
Just put it in a local folder and import it.
First of all love your videos and can you pleases help me with this
hello all!! I am new to react.js . Actually i downloaded a theme which have external javascript libraries i.e bootstrap.min.js , jquery.min.js, slider.js , jquery-flexslider,min.js .
I created a react app using create-react-app and i copied all the external javascript libraries and css files in index.html of the public folder of my react app and copied all the html of index.html of my theme in app.js which i downloaded. All the css are working fine but the javascript libraries are not working on the page.
Following is the demo of how i included the css files and javascript libraries in index.html of the public folder.
Now my question is, how should i include the javascript libraries so that it start working for me.
This might be a silly question, but i am new to it. Pardon me. I am trying for it from 2 days and did a lot of search for it but i failed. Please help me out with this issue.
I tried to put all the files in the src folder of my react app but it still not working.
Thanks in advance
$ yarn add bootstrap jquery jquery-easing jquery-waypoint and then import them in your index.js
I'm from India, a 22 years old boy, Aman Jat. I want to be friends with you
On Mobile screen menu button click is not working...please help me out
You might have to find out what is different in your mobile environment.
How can i add a main.js file as well as call it after jquery execution.In this tutorial the navbar is missing it on scroll style.
I removed JQuery. There is no need for JQuery because React handles all of the DOM manipulations.
@@thelavishcoder2553 github.com/BlackrockDigital/startbootstrap-agency/blob/master/js/agency.js Where did you include this file.Kindly help to include this js file
All you have to do is add a @scroll event listener to the container and then if HTMLElement.scrollTop !== 0 add the class that triggers the transition to the toolbar. It’s not a good idea to mix JQuery with React. That’s like mixing React with Vue.
Good job
You should have gone a bit slower...
That's the first time I'm getting that, but thanks for the feedback.
Super useful, thank you!
1000th like
Not quite for beginners since you worked very fast and threw around a lot of terms which you never explained. But still a good video and helpful. Thank you. I hope do a real beginners series at some point in the future since you have a a good clear communication style.
Thank you for the feedback. I don’t think I’ll be making the series however since I’m building a blog course and will eventually be building a Vue course as well. Thats going to take me well into next year.
@@thelavishcoder2553 Thank you and I'll definitely look forward to those courses as well. Do you have any current courses on Udemy?
@@westfield90 Not yet, I'm working on one that's about 60% complete. You can see those here.ua-cam.com/video/aI3E8mQa41w/v-deo.html
How can i change the Background in the header ?
set a className for the header and then style it in the SCSS.
Dislike! Cuz u didnt Show how to import the JS files.
You don't need the JS files.
@@thelavishcoder2553 The template is corrupted without the JS (jquerry files)
also the slow scroll doesnt work.
@@DhiaMagicien Jquery is a JS file(which you don't need as I mentioned before). You can do all that with React and VanillaJS. React isn't made to work with JQuery because how it patches the DOM will cause bugs when used with JQuery. I don't think it's possible to pack all of the features of the website in 30 minutes. This tutorial was more pointed towards introducing people how to quickly get started from a template. The JS files in the original repo are not needed and shouldn't be included. Thank you for the feedback.
@@thelavishcoder2553 The problem is i am NOOB at React :/ also I dont know how to Integrate VanillaJS with react..
@@DhiaMagicien We all have to start somewhere.
Why you didn't create components
I did...
Great job. You lost me at the portfolio though.
Thanks, if you'd like to get more 1:1 help you can join my Skool community for
$3 per month.
www.skool.com/coderology-6688
Dude, do you understand that fucking is not visible, what are you writing? the font is very small
Thanks for your feedback. My future videos will be zoomed in.
who else can't find the vendor file?
It's in there
React bootstrap grid not working
Please read the comments
u need to zoom in the code next time cause i am blind
ua-cam.com/video/aI3E8mQa41w/v-deo.html
it not works now days have a lot of error
Sorry, I cant help if I don't know what the error is
Lol it's a complete copy from bootstrap studio's template.
it's not a copy. It's augmented.
react best