React Navbar + Footer | React JS Website Tutorial Pt 1

In this tutorial, we build a very simple webpage application using create-bootstrap-react-app and the React JS library that allows us to create a seamless user experience for site visitors. From start to finish, we plan the app, use the create-bootstrap-react-app command to get an initial build, and then we execute our plan.

Github repo: https://github.com/xtina-park/website-redesign-part-1

Time Stamps:
00:00:00 Introduction
00:01:41 ***What You Need to Follow Along***
- Visual Studio Code (VS Code)
- Yarn or NPM
- Create-React-App
- Create-Bootstrap-React-App
- React-Router-DOM
- Styled Components
- Font Awesome Icons Account
- ES7 snippets
- Google 😎
00:04:48 Planning the app
00:05:20 Coding
00:09:08 Create Footer skeleton
00:10:06 Change Appearance of NavBar
00:15:52 Google Fonts
00:17:48 NavBar color scheme
00:19:20 Hamburger Toggler color scheme
00:25:45 Get the footer to sit on the bottom of the page! :)
00:26:21 Styled Components (first look)
00:30:10 Soup up the Footer!
00:45:00 Add social media icons to Footer (Font Awesome icons)
00:48:47 Routing using react-router-dom
00:57:05 Soup up the Home page!
00:57:13 Create shared style components (used by all pages on website)
01:13:12 Finished product, celebrate!
01:13:19 Goodbye, mon amis! See you next time :) Please hit like, subscribe, and hit the notification bell to get notified of future content!! 💛

Key Words: react, react js, react website, react tutorial, tutorial, components, style, styled-components, import styled as, import styled as ‘styled-components’, create-react-app, create-bootstrap-react-app, bootstrap, bootstrap 4, bootstrap 4 react, visual studio code, VS code, yarn, npm, react-router-dom, router, font awesome, font awesome icons, google fonts, es7, es7 package, google, first app, web app, website, website redesign, website makeover, responsive webpage, responsive web design, responsive design, responsive, front-end, front end, front-end web development, front-end web dev, software engineering, software engineer, SWE, html, css, javascript libraries, javascript, js, technology, tech, programming, programming language, webdev, web dev, web development, web design, entrepreneurship, entrepreneur, business, xtina, xtinapark,

Тэги:

#react #react_js #react_website #react_tutorial #tutorial #components #styled-components #bootstrap #visual_studio_code #VS_code #yarn #npm #react-router-dom #router #font_awesome #font_awesome_icons #google_fonts #es7 #first_app #web_app #website #responsive_webpage #responsive #front_end #software_engineering #software_engineer #SWE #html #css #javascript_libraries #javascript #js #technology #tech #programming #programming_language #create-react-app #create-bootstrap-react-app #web_dev

Скачать видео