- using HTML Element
- using js DOM manipulation root element
- using react CDN
- inline & external js
- nested element using react syntax
- ReactDOM.createRoot()
- Initialize npm into your repo
- git config
- npm init
- Install parcel
- npm install --save-dev parcel or npm i -D parcel
- Install react and react-dom
- npm i react react-dom
- Remove CDN links of react
- Removed CDN && added `<script src='./App.js' type="module"> <script/>`
- Ignite your app with parcel
- npx start parcel index.html
- Add scripts for “start” and “build” with parcel commands
```json
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html"
}
```
- Add .gitignore file
- /node_modules /dist .parcel-cache
- Add browserslist
- "browserslist": "last 3 versions"
- Build a production version of your code using parcel build
- npm run build
- Create a Nested header Element using React.createElement(h1,h2,h3 inside a div with class "title")
- Create the same element using JSX
- Create a functional component of the same with JSX
- Pass attribute into the tag in JSX
- Composition of Component (Add a component inside another)
- {TitleComponent} vs {<TitleComponent/>} vs {<TitleComponent></TitleComponent>} in JSX.
- Create a Header Component from scratch using Functional Component with JSX
- Add a Logo on Left
- Add a search bar in middle
- Add User icon on right
- Add CSS to make it look nice
- Build a Food Ordering App
- Think of a cool name for your app
- Build an AppLayout
- Build a Header Component with Logo & Nav Items & Cart
- Build a Body Component
- Build RestaurantList Component
- Build RestaurantCard Component
- Use static data initially
- Make your card dynamic(pass in props)
- Props - passing arguments to a function - Use Destructuring & Spread operator
- Render your cards with dynamic data of restaurants
- Use Array.map to render all the restaurants
- Clean up your code.
- Create a Folder Structure for your app.
- Make different files for each Component.
- Create a config file.
- Use all types of import and export.
- Create a Search Box in your App.
- Use useState to create a variable and bind it to the input box.
- Try to make your search bar work.
- [Code Repo](https://github.com/tarunbommali/Feastly-Foods)
- [project live](https://feastly.netlify.app/)
- Play with the useEffect Hook to see when it is called? (before or after render)
- Play with the dependency array in useEffect Hook.
- Play with the developer console by putting a debugger in render and useEffect.
- Call an actual API call.
- Handle Error in your API call.
- Build Shimmer UI when data is not loaded.
- Render your UI with actual API data.
- Make Search functionality work.
- Make a Login Logout button that toggles with a state.
- EP.6.01 & EP.6.02
- Swiggy API Issue Resolved
- CORS Plugin Issue solved
- Add Shimmer Effect without installing a library.
- Install react-router-dom.
- Create an appRouter and Provide it to the app.
- Create a Home, About, and Contact Page with Link (use child routes).
- Make an Error page for routing errors.
- Create a Restaurant Page with dynamic restaurant ID.
- (Extra) - Create a login Page using Formik Library.
- Create Class Based Component.
- Create 2 class-based child components.
- Pass props from Parent to child.
- Create a constructor.
- Create a state variable inside child.
- Use this.setState to update it.
- What if there are multiple state variables?
- Write a console.log for each lifecycle method.
- Play with the console logs to find out the correct order of their execution.
- Create interval inside componentDidMount?
- Use clearInterval to fix the issue caused by the interval