├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── App.js ├── assets ├── intro-bg.jpg ├── project1.png ├── project2.png ├── project3.png ├── project4.png ├── react1.jpg └── react2.webp ├── components ├── AboutContent.js ├── AboutContentStyles.css ├── Footer.js ├── FooterStyles.css ├── Form.js ├── FormStyles.css ├── HeroImg.js ├── HeroImg2.js ├── HeroImg2Styles.css ├── HeroImgStyles.css ├── Navbar.js ├── NavbarStyles.css ├── PricingCard.js ├── PricingCardStyles.css ├── Work.js ├── WorkCard.js ├── WorkCardStyles.css └── WorkCradData.js ├── index.css ├── index.js └── routes ├── About.js ├── Contact.js ├── Home.js └── Project.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React-JS-Crash-Course 2 | 3 | [React JS Crash Course | Build Portfolio Website With React JS](https://youtu.be/0h2b4ftbZcU/) 4 | 5 | ## About Course 6 | Hi everyone, welcome to our brand new react js crash course. This is a complete beginner-friendly course specially created for new web developers, who just started to learn about react js. 7 | 8 | In this course, we will build and deploy a complete react js portfolio website. 9 | 10 | ## What is React JS 11 | Without wasting your time, let's see what react js actually is... 12 | - React is a JavaScript library for building user-friendly interfaces. 13 | - It is Used to build single-page applications. 14 | - Also, it allows us to create reusable UI components. 15 | 16 | ## What you are going to learn 17 | In this course, we are going to learn 18 | - React ES6 Basic Syntax 19 | - React Render HTML 20 | - React JSX essential Syntax 21 | - How to use React Components, Class, Props, Events 22 | - React Conditionals 23 | - React Router 24 | - React Hooks such as - useState, useEffect, useCallback, Custom Hooks 25 | - Most importantly we will learn the Best File & Folder Structure you should follow..... and much more. 26 | 27 | By building our react js portfolio we will try to cover all these topics. 28 | 29 | ## Setup 30 | - run ```npm i && npm start``` 31 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.3", 7 | "@testing-library/react": "^12.1.4", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.0.0", 10 | "react-dom": "^18.0.0", 11 | "react-icons": "^4.3.1", 12 | "react-router-dom": "^6.2.2", 13 | "react-scripts": "5.0.0", 14 | "web-vitals": "^2.1.4" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test", 20 | "eject": "react-scripts eject" 21 | }, 22 | "eslintConfig": { 23 | "extends": [ 24 | "react-app", 25 | "react-app/jest" 26 | ] 27 | }, 28 | "browserslist": { 29 | "production": [ 30 | ">0.2%", 31 | "not dead", 32 | "not op_mini all" 33 | ], 34 | "development": [ 35 | "last 1 chrome version", 36 | "last 1 firefox version", 37 | "last 1 safari version" 38 | ] 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/React-JS-Crash-Course/1a4f08fac25e03f7be4982f3b3ebb4926ee01214/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/React-JS-Crash-Course/1a4f08fac25e03f7be4982f3b3ebb4926ee01214/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/React-JS-Crash-Course/1a4f08fac25e03f7be4982f3b3ebb4926ee01214/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./index.css"; 3 | import Home from "./routes/Home"; 4 | import About from "./routes/About"; 5 | import Project from "./routes/Project"; 6 | import Contact from "./routes/Contact"; 7 | 8 | import { Route, Routes } from "react-router-dom"; 9 | 10 | function App() { 11 | return ( 12 | <> 13 | 14 | } /> 15 | } /> 16 | } /> 17 | } /> 18 | 19 | 20 | ); 21 | } 22 | 23 | export default App; 24 | -------------------------------------------------------------------------------- /src/assets/intro-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/React-JS-Crash-Course/1a4f08fac25e03f7be4982f3b3ebb4926ee01214/src/assets/intro-bg.jpg -------------------------------------------------------------------------------- /src/assets/project1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/React-JS-Crash-Course/1a4f08fac25e03f7be4982f3b3ebb4926ee01214/src/assets/project1.png -------------------------------------------------------------------------------- /src/assets/project2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/React-JS-Crash-Course/1a4f08fac25e03f7be4982f3b3ebb4926ee01214/src/assets/project2.png -------------------------------------------------------------------------------- /src/assets/project3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/React-JS-Crash-Course/1a4f08fac25e03f7be4982f3b3ebb4926ee01214/src/assets/project3.png -------------------------------------------------------------------------------- /src/assets/project4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/React-JS-Crash-Course/1a4f08fac25e03f7be4982f3b3ebb4926ee01214/src/assets/project4.png -------------------------------------------------------------------------------- /src/assets/react1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/React-JS-Crash-Course/1a4f08fac25e03f7be4982f3b3ebb4926ee01214/src/assets/react1.jpg -------------------------------------------------------------------------------- /src/assets/react2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/React-JS-Crash-Course/1a4f08fac25e03f7be4982f3b3ebb4926ee01214/src/assets/react2.webp -------------------------------------------------------------------------------- /src/components/AboutContent.js: -------------------------------------------------------------------------------- 1 | import "./AboutContentStyles.css"; 2 | 3 | import React from "react"; 4 | 5 | const AboutContent = () => { 6 | return
; 7 | }; 8 | 9 | export default AboutContent; 10 | -------------------------------------------------------------------------------- /src/components/AboutContentStyles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/React-JS-Crash-Course/1a4f08fac25e03f7be4982f3b3ebb4926ee01214/src/components/AboutContentStyles.css -------------------------------------------------------------------------------- /src/components/Footer.js: -------------------------------------------------------------------------------- 1 | import "./FooterStyles.css"; 2 | 3 | import React from "react"; 4 | 5 | const Footer = () => { 6 | return
; 7 | }; 8 | 9 | export default Footer; 10 | -------------------------------------------------------------------------------- /src/components/FooterStyles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/React-JS-Crash-Course/1a4f08fac25e03f7be4982f3b3ebb4926ee01214/src/components/FooterStyles.css -------------------------------------------------------------------------------- /src/components/Form.js: -------------------------------------------------------------------------------- 1 | import "./FormStyles.css"; 2 | 3 | import React from "react"; 4 | 5 | const Form = () => { 6 | return
; 7 | }; 8 | 9 | export default Form; 10 | -------------------------------------------------------------------------------- /src/components/FormStyles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/React-JS-Crash-Course/1a4f08fac25e03f7be4982f3b3ebb4926ee01214/src/components/FormStyles.css -------------------------------------------------------------------------------- /src/components/HeroImg.js: -------------------------------------------------------------------------------- 1 | import "./HeroImgStyles.css"; 2 | 3 | import React from "react"; 4 | 5 | const HeroImg = () => { 6 | return
; 7 | }; 8 | 9 | export default HeroImg; 10 | -------------------------------------------------------------------------------- /src/components/HeroImg2.js: -------------------------------------------------------------------------------- 1 | import "./HeroImg2Styles.css"; 2 | 3 | import React, { Component } from "react"; 4 | 5 | class HeroImg2 extends Component { 6 | render() { 7 | return
; 8 | } 9 | } 10 | 11 | export default HeroImg2; 12 | -------------------------------------------------------------------------------- /src/components/HeroImg2Styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/React-JS-Crash-Course/1a4f08fac25e03f7be4982f3b3ebb4926ee01214/src/components/HeroImg2Styles.css -------------------------------------------------------------------------------- /src/components/HeroImgStyles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/React-JS-Crash-Course/1a4f08fac25e03f7be4982f3b3ebb4926ee01214/src/components/HeroImgStyles.css -------------------------------------------------------------------------------- /src/components/Navbar.js: -------------------------------------------------------------------------------- 1 | import "./NavbarStyles.css"; 2 | 3 | const Navbar = () => { 4 | return
; 5 | }; 6 | 7 | export default Navbar; 8 | -------------------------------------------------------------------------------- /src/components/NavbarStyles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/React-JS-Crash-Course/1a4f08fac25e03f7be4982f3b3ebb4926ee01214/src/components/NavbarStyles.css -------------------------------------------------------------------------------- /src/components/PricingCard.js: -------------------------------------------------------------------------------- 1 | import "./PricingCardStyles.css"; 2 | 3 | const PricingCard = () => { 4 | return
; 5 | }; 6 | 7 | export default PricingCard; 8 | -------------------------------------------------------------------------------- /src/components/PricingCardStyles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/React-JS-Crash-Course/1a4f08fac25e03f7be4982f3b3ebb4926ee01214/src/components/PricingCardStyles.css -------------------------------------------------------------------------------- /src/components/Work.js: -------------------------------------------------------------------------------- 1 | import "./WorkCardStyles.css"; 2 | 3 | import React from "react"; 4 | 5 | const Work = () => { 6 | return
; 7 | }; 8 | 9 | export default Work; 10 | -------------------------------------------------------------------------------- /src/components/WorkCard.js: -------------------------------------------------------------------------------- 1 | import "./WorkCardStyles.css"; 2 | 3 | const WorkCard = (props) => { 4 | return
; 5 | }; 6 | 7 | export default WorkCard; 8 | -------------------------------------------------------------------------------- /src/components/WorkCardStyles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/React-JS-Crash-Course/1a4f08fac25e03f7be4982f3b3ebb4926ee01214/src/components/WorkCardStyles.css -------------------------------------------------------------------------------- /src/components/WorkCradData.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tech2etc/React-JS-Crash-Course/1a4f08fac25e03f7be4982f3b3ebb4926ee01214/src/components/WorkCradData.js -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap"); 2 | 3 | * { 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | font-family: "Outfit", sans-serif; 8 | } 9 | 10 | body { 11 | background: #fff; 12 | } 13 | 14 | h1, 15 | h4, 16 | p, 17 | a { 18 | color: #fff; 19 | text-decoration: none; 20 | } 21 | 22 | ul { 23 | list-style-type: none; 24 | } 25 | 26 | .btn { 27 | padding: 12px 32px; 28 | font-size: 1rem; 29 | text-transform: uppercase; 30 | background: rgb(248, 217, 15); 31 | color: #222; 32 | border: 1px solid #fff; 33 | font-weight: 600; 34 | cursor: pointer; 35 | } 36 | 37 | .btn-light { 38 | /* background: rgba(255, 255, 255, 0.2); */ 39 | background: transparent; 40 | color: #fff; 41 | } 42 | 43 | .btn:hover { 44 | background: rgba(255, 255, 255, 0.2); 45 | color: #fff; 46 | transition: 0.3s; 47 | } 48 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | import { BrowserRouter } from "react-router-dom"; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById("root") 12 | ); 13 | -------------------------------------------------------------------------------- /src/routes/About.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const About = () => { 4 | return
About
; 5 | }; 6 | 7 | export default About; 8 | -------------------------------------------------------------------------------- /src/routes/Contact.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Contact = () => { 4 | return
Contact
; 5 | }; 6 | 7 | export default Contact; 8 | -------------------------------------------------------------------------------- /src/routes/Home.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Home = () => { 4 | return
Home
; 5 | }; 6 | 7 | export default Home; 8 | -------------------------------------------------------------------------------- /src/routes/Project.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Project = () => { 4 | return
Project
; 5 | }; 6 | 7 | export default Project; 8 | --------------------------------------------------------------------------------