Facebook Clone ~ Resources👉 Using React JS And Bootstrap4
-
HTML5
-
CSS3
-
JavaScript (ES6)
-
Bootstrap4
-
React
-
Git Hub
💼 Pull requests help you collaborate on code with me issues and pull requests :)
💼 if you have any doubt? do reach, email :)
React is a JavaScript library for building user interfaces. React uses an HTML-in-JavaScript syntax called JSX (JavaScript and XML). Let’s build a UI clone of our favorite Social Networking App - Facebook. We’ll learn most of the concepts about React JS in the process.
At the end of the course, as a developer, we’ll have built a React JS based Application, which is similar to the Facebook Home Page & Profile Page. In the process, we’d have learnt:
- Open Source Intro with Basics of Git & GitHub
- Issues & Pull Requests and Contributing Code
- Fundamentals of HTML, CSS and JavaScript
- Tips & Tricks to use while working with HTML & CSS
- Learning FlexBox & Grid System through a Game
- Basics of Bootstrap CSS Framework + React
- Handling ES6 & the future versions of JavaScript
- Basics of React JS Development & Intro to JSX
- Setting up your Dev Env with the right extensions
- Different types of React Components & Use Cases
- Introduction to SCSS & Why SCSS instead of CSS
- States & Props and On Demand with React Hooks
- Axios & Service Calls ~ Data Flow & Conditional Rendering
- Forms & Controlled Components
- Routing in React for Single Page Apps
- Deploying our Entire App to the Cloud using GitHub Pages
-
Introduction and Community Bonding
- Connect with me on LinkedIn.
- Check out my YouTube Channel and Subscribe if you like it (Pleeeeez).
-
knowledge in the following:
- Git & GitHub
- HTML
- CSS
- JavaScript & ES6
- React JS & Node JS
- Configuration of IDE:
- For those who cannot use VS Code on your machine, use CodeSandbox
- Inspect Element in Chrome Dev Tools
- Add Extension: React Developer Tools - Chrome Web Store
- Git Stuff
- Created a Repo: mukeshdani/facebook-clone
- Difference between NPM & NPX and installing and running React App.
- NPM => Node Package Manager
- NPX => Node Package Executor
- Commands:
npm install <package-name> <package-name> <params> npm uninstall <package-name> npx <package-name> <params> npm install create-react-app create-react-app . npm uninstall create-react-app npx create-react-app . - Different Files and configuration.
- Structure of React App.
- Cleanup of React App and running the Unit Tests.
- Public side of changes. Change favicon, title and description.
- Get favicons from:
- Generator: Favicon & App Icon Generator
- Get Favicon: Flaticon
- Get Favicon: Iconfinder
- Add Fonts & Bootstrap CSS.
- Introduction to SCSS and add SCSS Support.
- Install support using
npm i node-sass. - SCSS to CSS Demo: SassMeister | The Sass Playground!
- Install support using
- Add components.
- Header Component: Navbar · Image
- Props: Send data from Parent to Child.
- JavaScript Destructuring Variables.
- Change the colour of the navbar to blue.
- Start with the three column layout.
- Create the left and right dummy side bars.
- Middle Section - we’ll try to create the UI component.
- Componentising all the sections.
- Introduction to CSS Sprites.
- Generated using: CSS Sprites Generator
- Conditional Rendering.
Here’s what we did today:
- Finished the right side bar.
- Created the dummy right sidebar with Birthdays, Your Pages and News Feed.
Here’s what we did today...
Right Sidebar
Full Picture
- Moved all the data to App then an external source.
- Dynamicised the contents: UserMeta.
- Introduction to Axios Library.
- Created two service calls.
- Got the Wall Service up and running.
- Created a Data Structure for Wall Posts.
- Used a library
react-timeagofor displaying human friendly times. - Created a Post UserMeta.
- Helper functions.
- Loading and Login Page (Mukesh).
Here’s what we did today...
- Create a form for adding a new status.
- Saving and loading data through States.
- Backend Logic and Realtime Data Flow.