Create News App Using React JS And Bootstrap | Learn Bootstrap In React JS Tutorial

hello guys welcome back to another video of great stack in this video we are going to learn how to use bootstrap in react JS and we will also create a project using reactjs and bootstrap first we will go to our desktop screen and we will create a react project so here we will open Terminal so by using this terminal we will create our react project so we will write npm create White latest and we will hit enter after that we will name our project news magc and we will hit enter and we will select react after that we will select JavaScript so now our react project has been created so we will close this terminal and we will open this folder in vs code editor so here we will right click so more options open with code now here we will open integrated terminal to do that we will right click here open in integrated terminal now here first of all we will install all the dependencies from package Json so here we will write npm install now our dependencies has been installed and here we have node modules folder so now we will run this project to run this project simply we have to write npm run da and our project is running at this address so we will open this address in Chrome so as you can see our react project is running successfully first of all we will clean this default react project to do that we will go to vs code editor and we will go in SRC folder app.jsx file here we will remove all these lines and here we will use RFC after that we will remove this import statement and we will save this file after that we will go in app. CSS file and we will clean this file after this we will go in index. CSS file and here we will clean all these lines and we will save it and we will remove this react. SVG file and from the public folder we will remove this y. SVG file now we will go to index.html file and here we will rename this project title so here we will write news mag and from here we will remove this link tag now we will save it and we will open our browser now our default react project has been cleared now we will use bootstrap so first we will go to Google and search for bootstrap so here we got the link get bootstrap.css strap in our react project first of all we will need to add CDN to our project to do that so we will go in introduction and here we have this link tag so we will copy this link tag it contains the CSS file of the bootstrap and we will go to our vs code editor and here we will paste this CSS file link after that we will copy this script SRC and we will copy it here after this script tag now we will save it so now we can use the bootstrap in our react project easily now we will see how to use bootstrap in react JS so first we will go to bootstrap docs and here we have component section and here we have many things like buttons card close button drop Downs list models navbar so if we want any component in our website we just have to click on this component and here we have to copy this to clipboard and we will go to app.jsx file and here we will paste it as we know in jsx file we write class name instead of class so we will replace the class with class name so here we will write class class name and we will click on replace all so now our class has been replaced by class name now we will save it and we will go to our react project so here you can see we got the buttons which we copied from bootstrap similarly if we want drop downs so we will click on drop downs and here we have a drop down so we will copy this drop down and we will go to our app. GSX file after this button tags we will paste our drop down and here also we will replace this class with class name so we will select it crl f and here we will replace it with class name so we will save it now if we go to our react project so here we have a drop down button if we click on this so our drop down is working similarly if we want a spinner so just we have to copy this to the clipboard and we have to go to our component file and here we just have to paste it and replace the class with class name and we have to save this file now if we go to our react project so here we got this spinner now we will clean this file and start building the project so first we have to create the folder structure for our project so we are going to create news Mac application which will take the latest news from the API and display it on our application so first we will go in SRC folder here we will create a new folder we will name this folder components inside the components folder we will create three component first is our nav bar second is our news board where we display all our news and third is our news item we will use news item for individual news so here first we will create new file we will name it navb bar. jsx and here we will use rafc and we will remove this import statement and we will save it now we will create one more new file and we will name it news board. GSX and here we will use rafc and we will remove this import statement and now we will create one more file news item. jsx file here also we will use rafc and here we will remove this import statement and we will save it now after that we will go to our napb bar. GSX file and here we will Design our nabar so we will go to boot strap website and from nabar we will select this NAB bar so we will copy it and we will remove this T and here we will paste it now first we have to change the class to class name so select class equals to and press CRF and here we will replace all the 15 classes with class name after that we will save it now we will Mount this Navar to our app component so here we will write nav bar/ closing Arrow and we will save it now if we go to our react project so here is our nav bar so now we want our nap bar in dark mode so we will go to our bootstrap so here we have dark mode nav bar so only we have to copy this dark BS theme equals to dark and we will copy this and after the class name we have to paste it now we will save it now if we go here so we have dark mode nav bar now we will create an API key from the news API and we will store it in environment variable so we will open new tab here we will write news API and we will open this link so here we have to click get API key here we have to fill the first name here we have to write the email and here we have to create an strong password after that we will click I am not a robot I agree to the term and submit button so here we will get the API key so we will copy this API key now here we will create EnV file so in this EnV file now here we will write white underscore API underscore key and here we will paste our API key and we will save it now we will use this API key in our news board. jsx file to fetch the news so now we will Design our newsboard component so in this div so here we will create an H2 tag in this S2 tag we have to write latest and here we will insert an span tag and inside this span tag we will write news so in this span tag we will add class name and in S2 tag here also we add class name so in this S2 tag we will add class name text Center so after that we will save it and we will Mount this newsboard component to our app.jsx file so after the nav bar here we will write news board SL closing arrow and we will save it now here is our latest news and this is our NAB bar now we will change the text in our nav bar so for that we will use badge as you can see this is normal text by adding this span tag and in this span tag if we add badge so we will get batch on this text so we will go in napb bar. jsx file so here we have anchor tag so in this anchor tag here we have NAB bar we will remove this text and here we will use span tag inside this span tag we will write news Mac and in span tag we will add class name and in this class name we will use batch so after that we need background light so we will write BG light and we will need text dark so we write text dark and we will save it so here is our logo if we want to increase the size of this logo we just have to add a class name fs4 and we will save it it will increase the size of our logo in this latest news text we will also use batch so we will go to our news board. jsx file and in this span tag we will add class name batch and here we will use BG danger it will give us background red and we will save it so here we got the bats in our news text so after that we will go to our news API page and here we have to go to the documentation and we have to go to top headlines so as we can see here is the API and here we have the country us and we can change this us from these countries and we will get the news of these countries so by using this API we will get response in this format so here we have article key which contains an array in this array we have all the Articles So In Articles we have author name title of the article description of the article URL to the article and URL to the image of the article here we have also publish date and content in the article so here we will first copy this URL and we will go to our vs code editor so here first we will create use State variable so we will write con so we will name the variable articles and we will name the function set article equals use State and we will initialize this variable with empty array so after this we will use use effect in this use effect we will pass an arrow function so now here we will create a variable let URL equals to backtick and in this back tick we will paste our URL which we copied from the site now here API key equals to here we will remove this API key and here we will insert the API key from the EnV file so here we will write dollar sign curly braces and inside this we will write import dot meta do EnV file Dot and here we will write the key name so we have saved the key name white API key so we will copy it after V Dot we will paste it now here we will get the API key from the EnV file after we had constructed this URL now we will fetch this URL so here we will use fetch API in this fetch we will pass our URL dot then and here we will get a promise so we will name it response now we will pass this response with Json method so here we will write response. Json after that we will get a promise which is our data now we have the data so in this data we have articles array so we will set this array to our article to do that here we write set articles inside the set articles we will write data do articles after that we will get the data in our article state so we want to run this use effect whenever our news board component load so here we will write comma bracket and we will save it now we got the articles in our article variable so to display these articles we will use news item component so we will go in news item component and we will now design it so for this news item component we will use bootstrap card so we will go in card so here we have image card title card description and a button so we will use this card so we will copy this and we will remove this div and here we paste it so here we have an error so this image tag has no closing so here we will write slash now we had fixed image tag now we will change the class to class name so we will find all classes and here we we will replace it with class name and from this anchor tag we will remove this has and use slash now we will save it so after this we will go to our news board now here we will map this article array using news item component so here we will write curly Braes inside this bracket we will write articles do map and inside this map method we we will pass an arrow function and here we will pass parameter so we will pass individual news and index number and here we will return news item component and in this news item component we will use key equals to index so from this articles we will get individual news and in this news we have author name title description URL of this article URL of this image so we will pass this details using props so here we will pass title equals and we will pass news. tile here also we will pass description equals and here we will pass news. description so after this description so here we will pass SRC equals so in this SRC we will pass news do URL to image after that we will pass URL of the article so we will write URL equals and here we will pass news. URL so we have passed tit description SRC of the images and URL of the article now we will use this props in our news item component so first we will destructure the props so here we write curly braces so in this curly braces we will write title description SRC and URL so we have destructured this datas so now we will use this title in our card title so here we will write cly Braes and inside this we will write title similarly here we will remove this text and here we will use description so in this anchor tag we will remove this text and here we will write read more so in this anchor tag we will provide the URL of the article so here we have to remove this and here we will write URL so in this image SRC we will remove it and here we will write SRC so now we have used all these props for title description image SRC and URL of the Articles so after that in style property we will remove this and here we will write curly braces so here we will insert one more curly bra and inside this we will write Max width and we will set it to 345 pixels and we will save it so after this we will go to our react project and here we will get all the news which we got from the API now here in this D we will add class names BG dark so our background will be dark text light so it will make our text light in color after that we will give mb3 and after that we will write D inline block after that we will save it so now our website look like this now we will add padding and margin so we will go here and here after this we will add myy 3 and MX 3 it means margin from Y3 and margin from X3 after that we will add padding so here we will write px2 and py2 so now we will get padding from X and Y now we will save it so now our project look like this so every card is not uniform so now we will give properties so it will become uniform for that in this image here we will write a style and in this style we will use curly bres and here we will write height and we will set height 200 pixels after that we will set width 360 pixels so now in the title we will use dot slice method and in this slice we will write 0 to 50 similarly in this description so sometime from the API we don't get the description for the article so first we will check here if article has some content then we will provide description do slice and in this slice we will write 0 to 90 and if we don't get the description so here we will write a custom description for it so here I paste the custom description we will save this file so after that we will go to our web browser and here we will get the uniform card size so now if we go to our news API documentation so here we have some categories like business entertainment General Health Science Sports and technology so if we want science related articles so we have to pass the category in the URL so now we will add category to the news Mac application now we will Design nav bar as we can click the category and we will get that category news so to do that we will go to vs code editor and we will go to app.jsx file now here we will create a user State variable so here we write cost and we will name this variable category and we will name this function set category equals use State and we will initialize this category with General category so here we write General and we will pass this prop to our news board so here we will write category and here we will pass category and in nav bar we will pass set category equals and here we will pass set category so now we will go to our news board component and here we will first destructure the prop so here we write category now in this URL before the API key here we will write end percentage sign and here we will write category equals to and here we insert dollar sign curly Braes and here we will write the prop which we passed so we will write here category now now we will save it now if we go to our website so here we are getting General news so now we will Design our naar so if we click on the categories it will display that category news so here we will go in napb bar. jsx file and here we will remove this home one and here we will remove this both Alli tags now we have one Alli tag now we will convert this anchored link to div so now after this we will remove this hre and we will create this liit TX copy five more times for different categories so our first category will be technology category our second category will be business category our third category will be Health category our our fourth category will be science category our fifth category will be a sports category and our sixth category will be entertainment category after that we will restructure our props so here we will write set category and we will use this set category in each div to set our category so here we will add on click property and in this onclick we will pass an arrow function and here we will call set category so here we will set category technology now we will copy this and now we will add on click to other categories also so here also we will write onclick and in this on click we will set category business similarly here also we will set category health and here also we will set category sports and here we will set category entertainment now we will save this so after that we will go to our news board comp component so here in this use effect we want to run this use effect when our category gets updated so here we will copy it and here also we will paste it now we will save it so here if we click on the sports category then we will get sports news and if we click on the entertainment category so we will get entertainment news here some images are not loaded because there's sites are broken or image is not available in the API to fix this we will use a default image for all these articles where we don't get the images for that we will first insert the image in our assets folder so we will click on the assets folder Ral in the file explorer so here we have the image so we will insert this image in our assets folder and now in news item. jsx file we will import that image so here we write import image from and here we will provide the image path so here we will write double do/ assets folder slash news do jpg now in the SRC folder we will use tary operator so if we got the SRC then we will use SRC only and if we not not get the SRC then we will use the imported image so here we write image after that we will save it and we will go back to our browser so here as we can see whenever we don't get the image here our default image will be displayed so here if we go on the sports category then we will get a sports category news and here we have our default image where the image SRC is not available similarly if we go to the health section then we have health related articles and if we click on the read mode button then we will redirected to this article page so we had successfully created this news Mac app using reactjs and bootstrap so thank you for watching this video in our next video we will create more project like this using reactjs

Channel: GreatStack

Views: 18,697

Keywords: react bootstrap, react bootstrap tutorial, how to use bootstrap in react js, bootstrap in react js, how to add bootstrap in react js, bootstrap react, how to install bootstrap in react js, react bootstrap project, bootstrap with react js, news app using react js, news web app using react js, news app react js, create news app using react js, news app in react js

Id: waCkrUIlSTo

Length: 32min 9sec (1929 seconds)

Published: Fri Nov 03 2023