├── Questions and Exercises ├── 1. Getting started with React │ └── Questions.txt ├── 10. Building a blog with Hooks │ └── Questions and Answers.txt ├── 11. Styling in React │ └── Questions.txt ├── 12. Major Project Setup and Intro │ └── Questions.txt ├── 13. React Hooks │ └── Questions.txt ├── 14. Building a blog with Hooks │ └── Questions.txt ├── 15. Styling in React │ └── Questions.txt ├── 16. Major Project Setup and Intro │ └── Questions.txt ├── 17 Major Project Routing and Auth │ └── Questions.txt ├── 18. Major Project User profile │ └── Questions.txt ├── 19. Major Project Search and Chat │ └── Questions.txt ├── 2. Warm up Javascript │ └── Questions.txt ├── 20. Intro to Redux │ └── Questions.txt ├── 21. Redux Actions, Reducers, Store │ └── Questions.txt ├── 22. Redux Continued │ └── Questions.txt ├── 23. React and Redux │ └── Questions.txt ├── 3. Hello World │ └── Questions and Answers.txt ├── 4. Mini Project Starting the project(Shopping Cart) │ └── Questions.txt ├── 5. Mini Project Managing state │ └── Questions.txt ├── 6. Mini Project Finishing up │ └── Questions.txt ├── 7. Firebase Mini Project extended I │ └── Questions.txt ├── 8. Firebase Mini project extended II │ └── Questions.txt └── 9. React Hooks │ └── Questions.txt └── Readme.md /Questions and Exercises/1. Getting started with React/Questions.txt: -------------------------------------------------------------------------------- 1 | 1. React is a _____ ? 2 | ans: javascript library. 3 | 4 | Solution Description 5 | ReactJS is a javascript library for building user interfaces. It's not a framework. 6 | A library is basically used to solve some common problems, we don't have to write code in Vanilla JS that is pure JS that could be somewhat challenging for people. 7 | That means, in order to build complete React applications, you will need to choose the packages and tools on your own. 8 | While Angular is usually considered a framework as it provides strong opinions on how your application should be structured. 9 | 10 | 2. What are the advantages of using React ? 11 | ans: 12 | 1. React has reusable components: Code re-use helps make your apps easier to develop and easier to maintain. They also help you implement a consistent look and feel across the whole project. 13 | 2. React improves performance due to VDOM. 14 | 15 | 3. Which terminal command is used to remove the directory? 16 | ans: rmdir is used to remove a directory. 17 | 18 | 4. Write a command to move one level up from the current directory? 19 | ans: cd 20 | Solution Description 21 | cd is used to change the directory. It is used to navigate directly to a directory, use cd with the directory’s path as an argument. 22 | 23 | 5. What is a React in a MVC architecture? 24 | ans: View. 25 | Solution Description 26 | React is the view part of the MVC framework. It is an open-source javascript library that provides a view for the data rendered as HTML. 27 | 28 | 6. Which command is used to print the current working directory? 29 | ans: pwd. 30 | 31 | 7. Write command to move the directory one level up from the current directory. 32 | ans: cd .. 33 | 34 | 8. React.js was orginally created by? 35 | ans: Jordan Walke. 36 | 37 | 9. How is Real DOM different from Virtual DOM? 38 | ans: 39 | Manipulating the real DOM is slow. Manipulating the virtual DOM is much faster. 40 | A virtual DOM object is a representation of a DOM object, like a lightweight copy. 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /Questions and Exercises/10. Building a blog with Hooks/Questions and Answers.txt: -------------------------------------------------------------------------------- 1 | 1. Get firebase data 2 | Send Feedback 3 | How would you get multiple documents from firestore? 4 | ans: db.collection("posts").get(). 5 | Solution Description 6 | There are two ways to retrieve data stored in Cloud Firestore. Either of these methods can be used with documents, collections of documents, or the results of queries: 7 | - Call a method to get the data. 8 | - Set a listener to receive data-change events. 9 | 10 | Read More: https://firebase.google.com/docs/firestore/query-data/get-data 11 | 12 | 2. Order by 13 | Send Feedback 14 | How to order posts by likes? 15 | ans: postsRef.orderBy("likes", "desc"); 16 | Solution Description 17 | By default, a query retrieves all documents that satisfy the query in ascending order by document ID. You can specify the sort order for your data using orderBy(). 18 | 19 | Read More: https://firebase.google.com/docs/firestore/query-data/order-limit-data 20 | 21 | 3. Custom hooks 22 | Send Feedback 23 | Which of the following is a custom hook? 24 | ans: function useOpenPopup(){} 25 | Solution Description 26 | Name of a custom hook should always start with "use". 27 | 28 | 4. Sharing state 29 | Send Feedback 30 | Do two components using the same Hook share state? 31 | ans: No 32 | Solution Description 33 | Custom Hooks are a mechanism to reuse stateful logic (such as setting up a subscription and remembering the current value), but every time you use a custom Hook, all state and effects inside of it are fully isolated. 34 | 35 | 5. Create React App 36 | Send Feedback 37 | Which command is correct for creating a react project? 38 | ans: npx create-react-app foldername. 39 | Solution Description 40 | It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. npx is a package runner tool that comes with npm 5.2+. 41 | 42 | 6. Importing in React 43 | Send Feedback 44 | Which of the following is the correct syntax for importing BrowserRouter from “react-router-dom” ? 45 | ans: import {BrowserRouter} from "react-router-dom" 46 | Solution Description 47 | Every module can have several named parameters and in order to import one we should enclose named parameters within the curly braces. 48 | 49 | 7. Exporting in React 50 | Send Feedback 51 | Which of the following syntax is correct for exporting more than one component? 52 | ans: export {App, Navbar, Home, CreatePost, PostDetail} 53 | Solution Description 54 | For multiple exports, we can use a comma to separate two-parameter names within the curly braces. 55 | 56 | 8. React router DOM 57 | Send Feedback 58 | _________ Provides declarative, accessible navigation around your application. 59 | ans: 60 | Solution Description 61 | As you click around on the different s, the router renders the matching . 62 | Read More: https://reactrouter.com/web/api/Link 63 | 64 | 9. Fill Up 65 | Send Feedback 66 | The ________________ method is used to prevent the browser from executing the default action of the selected element. 67 | ans: preventDefault(). 68 | Solution Description 69 | The preventDefault() method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur. 70 | For example, clicked anchors will not take the browser to a new URL. 71 | 72 | 10. Custom Hooks 73 | Send Feedback 74 | True/False 75 | custom hooks improves the readability and a reduces the amount of code. 76 | ans: True. 77 | Solution Description 78 | Custom Hooks are a mechanism to reuse stateful logic (such as setting up a subscription and remembering the current value), but every time you use a custom Hook, all state and effects inside of it are fully isolated. So, it improves the readability and reduces the amount of code. 79 | 80 | 11. Fetch data 81 | Send Feedback 82 | ____________ function is used to fetch data from the firebase. Document. 83 | ans: onSnapshot(). 84 | 85 | 12. URL Parameters 86 | Send Feedback 87 | _________ hooks let you access the parameters of the current route 88 | ans: useParams. 89 | Solution Description 90 | In React Router, we use the word "params" to describe dynamic segments of the URL. useParams hooks let you access the parameters of the current route. 91 | 92 | 13. Which command is used for deploying a firebase-hosted application? 93 | ans: firebase deploy. 94 | 11. Firebase 95 | Send Feedback 96 | Firebase is a 97 | ans: NoSql Database. 98 | Realtime Database. 99 | Cloud-Hosted Database. 100 | Solution Description 101 | Firebase Real-Time Database is a cloud-hosted and NoSQL database. Data is stored as JSON and synced in real-time for each connected client. -------------------------------------------------------------------------------- /Questions and Exercises/11. Styling in React/Questions.txt: -------------------------------------------------------------------------------- 1 | 1. CSS modules 2 | Send Feedback 3 | CSS modules _______ 4 | ans: apply to the component where imported. 5 | Solution Description 6 | It is scoped by the web pack to the specific file where it is imported. 7 | 8 | 2. Styled components usage 9 | Send Feedback 10 | How to style an anchor tag using styled components 11 | ans: styled.a`color:white`. 12 | 13 | 3. Defining styled components 14 | Send Feedback 15 | Is it important to define styled components outside of the render method? 16 | ans: True. 17 | Solution Description 18 | It is important to define your styled components outside of the render method, otherwise it will be recreated on every single render pass. Defining a styled component within the render method will thwart caching and drastically slow down rendering speed, and should be avoided. 19 | 20 | 4. Props in styled components 21 | Send Feedback 22 | How to access props in a styled component? 23 | ans: styled.button`background: ${props=>props.color}` 24 | 25 | 5. Radium Media Queries 26 | Send Feedback 27 | The app needs to be wrapped inside which component while using media queries inside Radium? 28 | ans: StyleRoot. 29 | Solution Description 30 | StyleRoot wraps its children in a plain div followed by the root style sheet. Radium plugins, like keyframes and media queries, use this style sheet to inject CSS at runtime. Because the style sheet appears after your rendered elements, it is populated correctly during a server render. 31 | 32 | Further Readings: https://github.com/FormidableLabs/radium/tree/master/docs/api#styleroot-component 33 | 34 | 6. Scoped css 35 | Send Feedback 36 | What is the correct name for a scoped css file? 37 | ans: Scope.module.css. 38 | Solution Description 39 | When any file with the same name convention is imported in a file, the webpack scopes the classes by adding a unique string in its name. 40 | 41 | 7. Styled component 42 | Send Feedback 43 | Which is the correct name for a styled component? 44 | ans: BoxContainer. 45 | Solution Description 46 | The name should start with a capital letter. 47 | 48 | 8. True or False 49 | Send Feedback 50 | Is this declaration correct or wrong? 51 | const styledButton = styled.button` 52 | Background-color: ${(props) => { 53 | if(props.primary) return 'blue' 54 | else return 'red' 55 | }} 56 | `; 57 | ans: Wrong 58 | Solution Description 59 | We need to use `css` property to use multi line dynamic styling 60 | -------------------------------------------------------------------------------- /Questions and Exercises/12. Major Project Setup and Intro/Questions.txt: -------------------------------------------------------------------------------- 1 | 1. Which directory? 2 | Send Feedback 3 | In which directory, the small snippets you can use throughout the application are placed? 4 | ans: /utils. 5 | Solution Description 6 | It is a commonly used convention and the developer has a choice to use whatever folder structure is more meaningful in the project’s context. Some developers use “common”, “shared” or “utilities”. The most common practice is to have a util/utilities folder inside a common folder. 7 | 8 | 2. Which method? 9 | Send Feedback 10 | The ____________ method converts a JavaScript object or value to a JSON string and ____________ method is used to transform a JSON string into a Javascript object. 11 | ans: JSON.stringify(), JSON.parse(). 12 | Solution Description 13 | JSON.parse() takes a JSON string and transforms it into a JavaScript object. JSON.stringify() takes a JavaScript object and transforms it into a JSON string. 14 | 15 | 3. Correct Output 16 | Send Feedback 17 | What is the correct output of the given code. 18 | var x='6'; 19 | try { 20 | console.log("Before throw statement"); 21 | if(isNaN(x)) throw "is not a number"; 22 | x = Number(x); 23 | if(x > 5) throw "is too high"; 24 | console.log("After throw statement"); 25 | } 26 | catch(err) { 27 | console.log("Error caught : " + err); 28 | } 29 | finally { 30 | console.log("I am in finally!"); 31 | } 32 | ans: Before throw statement Error caught: is too high I am in finally!. 33 | Solution Description 34 | x is a string but it is a Number so, NaN will return false and then x is converted into a number. Since, it is greater than 5 it throws an error “is too high” and the next cole.log statement does not get executed. Error is caught and a message is displayed. Then control goes to the finally keyword and then "I am in finally!" gets printed. 35 | 36 | 4. Props Validation 37 | Send Feedback 38 | Which package is needed for Props validation? 39 | ans: Prop Types. 40 | Solution Description 41 | We are using props as arguments at every for passing things from parent component to child component. So, there is a need of validating props and this purpose is solved by prop type. Prop type basically checks that the prop that is being passed is validated or not. 42 | Documentation: https://www.npmjs.com/package/prop-types 43 | 44 | 5.HTTP Method 45 | Send Feedback 46 | Which of the following is not a HTTP method? 47 | ans: REMOVE 48 | Solution Description 49 | REMOVE is not a HTTP method. The primary or most-commonly-used HTTP methods are POST, GET, PUT, PATCH, and DELETE. These correspond to create, read, update, and delete (or CRUD) operations, respectively. 50 | 51 | 6. Authentication 52 | Send Feedback 53 | __________________ are created by an authentication service and contain information that enables a user to verify their identity without entering login credentials. 54 | ans: Authentication Tokens. 55 | Solution Description 56 | API keys are for projects, authentication is for users. 57 | API keys identify the calling project the application or site making the call to an API whereas Authentication tokens identify a user the person that is using the app or site. 58 | 59 | 7. The _________ method returns the value of the specified Storage Object item. 60 | ans: getItem(). 61 | Solution Description 62 | The getItem() method of the Storage interface, when passed a key name, will return that key's value, or null if the key does not exist, in the given Storage object. 63 | 64 | 8. What is a Callback? 65 | ans: Solution Description 66 | A callback is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of action. 67 | -------------------------------------------------------------------------------- /Questions and Exercises/13. React Hooks/Questions.txt: -------------------------------------------------------------------------------- 1 | 1. Using useEffect hook 2 | Which hook is analogous to react’s class lifecycle method componentDidMount? 3 | 4 | ans: useEffect(()=>{}, []). 5 | Solution Description 6 | The equivalent of componentDidMount in hooks is the useEffect function. Functions passed to useEffect are executed on every component rendering, unless you pass a second argument to it. 7 | 8 | 2. Whats wrong with code 9 | Send Feedback 10 | What’s wrong with the code 11 | 12 | 13 | Class Button { 14 | render () { 15 | const [text, setText] = useState(‘’); 16 | return 17 | } 18 | } 19 | ans: Cant use hooks inside a class. 20 | Solution Description 21 | Further Readings: 22 | https://reactjs.org/docs/hooks-faq.html#should-i-use-hooks-classes-or-a-mix-of-both 23 | 24 | 3. Can I .. 25 | Send Feedback 26 | Can we use the same hook multiple times in a function? 27 | 28 | ans: true. 29 | Solution Description 30 | The state of each component is completely independent. Hooks are a way to reuse stateful logic, not state itself. In fact, each call to a Hook has a completely isolated state. So, you can even use the same custom Hook twice in one component. 31 | 32 | 4. useState returns 33 | What does useState returns ? 34 | 35 | ans: A Pair. 36 | Solution Description 37 | useState hook returns the current state value and a function that lets you update it. 38 | 39 | 5. useState arguments 40 | How many arguments are passed to useState ? 41 | ans: 1. 42 | Solution Description 43 | Only argument is provided to useState which is its initial state. useState lets you use local state within a function component. You pass the initial state to this function and it returns a variable with the current state value (not necessarily the initial state) 44 | 45 | 6. useState Syntax 46 | Which of the following is the correct syntax for useState Hook ? 47 | ans: const[state, stateUpdaterFunction] = useState(initialStateValue). 48 | Solution Description 49 | Further Readings: 50 | https://reactjs.org/docs/hooks-state.html 51 | 52 | 7. Guess the count 53 | What will be the value of count after clicking the button? 54 | const UpdateState = () => { 55 | const [count, setCount] = useState(19) 56 | const handleClick = () => setCount(count + 2) 57 | return ( 58 |
59 | Count value is: {count} 60 |
61 | 62 |
63 |
64 | ) 65 | } 66 | ans: 21 67 | Solution Description 68 | The initial value will be set to 19. And when the button is clicked, counter gets incremented by 2. Hence, The count will become 21. 69 | 70 | 8. useEffect Hook Purpose 71 | What is the purpose of useEffect Hook ? 72 | ans: To invoke side effects from within functional components. 73 | Solution Description 74 | The useEffect hook is useful to perform additional work behind the scenes without affecting the appearance of the web page. 75 | 76 | 9. Dependency Array 77 | Send Feedback 78 | True/False 79 | If we skip the second argument (i.e, dependency array), this useEffect is called after every render. 80 | 81 | ans: True. 82 | Solution Description 83 | It runs before the first render and after every update. But, we can customise this by passing some additional arrays. useEffect runs after every update because every action requires newly updated data. 84 | 85 | 10. Hook Rules 86 | Which of the following statement is incorrect about react hooks ? 87 | ans: We can call a Hook from a regular function. 88 | Solution Description 89 | Don’t call Hooks from regular JavaScript functions. Instead, you can: 90 | - > Call Hooks from React function components. 91 | - > Call Hooks from custom Hooks. 92 | 93 | By following this rule, you ensure that all stateful logic in a component is clearly visible from its source code. 94 | 95 | 11. Additional Hooks 96 | Which of the following is not an example of react hook ? 97 | ans: useCondition. 98 | Solution Description 99 | useRef, useReducer, useLayoutEffect, useCallback are additional hooks which are either variants of the basic ones, or only needed for specific edge cases. 100 | 101 | 12. Custom Hooks 102 | A custom Hook is a JavaScript function 103 | ans: Whose name starts with "use" 104 | That may call other Hooks. 105 | And a mechanism to refuse stateful logic. 106 | Solution Description 107 | Further Readings: https://reactjs.org/docs/hooks-custom.html 108 | 109 | 13. Create a Custom Hook 110 | Send Feedback 111 | Create your own custom hook which toggles the text on clicking the button. 112 | ans: Solution Description 113 | function App() { 114 | const [isTextChanged, setIsTextChanged] = useToggle(); 115 | return ( 116 | {isTextChanged ? 'Toggled' : 'Click to Toggle'} 117 | ); 118 | } 119 | 120 | const useToggle = (initialState = false) => { 121 | const [state, setState] = useState(initialState); 122 | const toggle = useEffect(() => setState(state => !state), []); 123 | return [state, toggle] 124 | } 125 | -------------------------------------------------------------------------------- /Questions and Exercises/14. Building a blog with Hooks/Questions.txt: -------------------------------------------------------------------------------- 1 | 1. Get firebase data 2 | How would you get multiple documents from firestore ? 3 | ans: db.collection("posts").get(). 4 | Solution Description 5 | There are two ways to retrieve data stored in Cloud Firestore. Either of these methods can be used with documents, collections of documents, or the results of queries: 6 | - Call a method to get the data. 7 | - Set a listener to receive data-change events. 8 | 9 | Read More: https://firebase.google.com/docs/firestore/query-data/get-data 10 | 11 | 2. Order by 12 | How to order posts by likes ? 13 | ans: postsRef.orderBy("likes", "desc"); 14 | Solution Description 15 | By default, a query retrieves all documents that satisfy the query in ascending order by document ID. You can specify the sort order for your data using orderBy(). 16 | 17 | Read More: https://firebase.google.com/docs/firestore/query-data/order-limit-data 18 | 19 | 3. Custom hooks 20 | Which of the following is a custom hook ? 21 | ans: function useOpenPopip(){} 22 | Solution Description 23 | Name of a custom hook should always start with "use". 24 | 25 | 4. Sharing state 26 | Do two components using the same Hook share state ? 27 | ans: No. 28 | Solution Description 29 | Custom Hooks are a mechanism to reuse stateful logic (such as setting up a subscription and remembering the current value), but every time you use a custom Hook, all state and effects inside of it are fully isolated. 30 | 31 | 5. Create React App 32 | Which command is correct for creating a react project ? 33 | ans: npx create-react-app foldername. 34 | Solution Description 35 | It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. npx is a package runner tool that comes with npm 5.2+. 36 | 37 | 6. Importing in React 38 | 39 | Which of the following is the correct syntax for importing BrowserRouter from “react-router-dom” ? 40 | ans: import {BrowserRouter} from "react-router-dom" 41 | Solution Description 42 | Every module can have several named parameters and in order to import one we should enclose named parameters within the curly braces. 43 | 44 | 7. Exporting in React 45 | Which of the following syntax is correct for exporting more than one component ? 46 | ans: export {App, Navbar, Home, CreatePost, PostDetail}; 47 | Solution Description 48 | For multiple exports, we can use a comma to separate two-parameter names within the curly braces. 49 | 50 | 8. React router DOM 51 | _________ Provides declarative, accessible navigation around your application. 52 | ans: 53 | Solution Description 54 | As you click around on the different s, the router renders the matching . 55 | Read More: https://reactrouter.com/web/api/Link 56 | 57 | 9. Fill Up 58 | The ________________ method is used to prevent the browser from executing the default action of the selected element. 59 | ans: preventDefault(). 60 | Solution Description 61 | The preventDefault() method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur. 62 | For example, clicked anchors will not take the browser to a new URL. 63 | 64 | 10. Custom Hooks 65 | True/False 66 | custom hooks improves the readability and a reduces the amount of code. 67 | ans: True. 68 | Solution Description 69 | Custom Hooks are a mechanism to reuse stateful logic (such as setting up a subscription and remembering the current value), but every time you use a custom Hook, all state and effects inside of it are fully isolated. So, it improves the readability and reduces the amount of code. 70 | 71 | 11. Firebase 72 | Firebase is a 73 | ans: NoSql database, RealTime Database, Cloud-Hosted Database. 74 | Solution Description 75 | Firebase Real-Time Database is a cloud-hosted and NoSQL database. Data is stored as JSON and synced in real-time for each connected client. 76 | 77 | 12. Fetch data 78 | ____________ function is used to fetch data from the firebase. Document. 79 | ans: onSnapshot(). 80 | Solution Description 81 | Read more: https://firebase.google.com/docs/firestore/query-data/listen 82 | 83 | 13. URL Parameters 84 | _________ hooks let you access the parameters of the current route. 85 | ans: useParams. 86 | Solution Description 87 | In React Router, we use the word "params" to describe dynamic segments of the URL. useParams hooks let you access the parameters of the current route. 88 | 89 | 14. Firebase Hosting 90 | Which command is used for deploying a firebase-hosted application ? 91 | ans: firebase deploy 92 | Solution Description 93 | Further Readings: 94 | https://firebase.google.com/docs/hosting/quickstart 95 | -------------------------------------------------------------------------------- /Questions and Exercises/15. Styling in React/Questions.txt: -------------------------------------------------------------------------------- 1 | 1. CSS modules 2 | CSS modules _______ 3 | ans: apply to the component where impoorted. 4 | Solution Description 5 | It is scoped by the web pack to the specific file where it is imported 6 | 7 | 2. Styled components usage 8 | How to style an anchor tag using styled components 9 | ans: styled.a`color: white` 10 | Solution Description 11 | Further Readings: https://styled-components.com/docs/basics#getting-started 12 | 13 | 3. Defining styled components 14 | Is it important to define styled components outside of the render method ? 15 | ans: True. 16 | Solution Description 17 | It is important to define your styled components outside of the render method, otherwise it will be recreated on every single render pass. Defining a styled component within the render method will thwart caching and drastically slow down rendering speed, and should be avoided. 18 | 19 | 4. Radium advantages 20 | Send Feedback 21 | What is the advantage of radium over inline styling? 22 | ans: It supports Media Queries. 23 | Keyframes animation helper. 24 | 25 | 5. Radium Media Queries 26 | Send Feedback 27 | The app needs to be wrapped inside which component while using media queries inside Radium? 28 | ans: StyleRoot. 29 | Solution Description 30 | StyleRoot wraps its children in a plain div followed by the root style sheet. Radium plugins, like keyframes and media queries, use this style sheet to inject CSS at runtime. Because the style sheet appears after your rendered elements, it is populated correctly during a server render. 31 | 32 | Further Readings: https://github.com/FormidableLabs/radium/tree/master/docs/api#styleroot-component 33 | 34 | 6. Scoped css 35 | What is the correct name for a scoped css file ? 36 | ans: Scope.module.css 37 | Solution Description 38 | When any file with the same name convention is imported in a file, the webpack scopes the classes by adding a unique string in its name. 39 | 40 | 7. Styled componentTrue or False 41 | Is this declaration correct or wrong? 42 | const styledButton = styled.button` 43 | Background-color: ${(props) => { 44 | if(props.primary) return 'blue' 45 | else return 'red' 46 | }} 47 | `; 48 | Which is the correct name for a styled component ? 49 | ans: Wrong 50 | Solution Description 51 | We need to use `css` property to use multi line dynamic styling 52 | 53 | ans: BoxContainer. 54 | Solution Description 55 | The name should start with a capital letter. 56 | 57 | 8. 58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /Questions and Exercises/16. Major Project Setup and Intro/Questions.txt: -------------------------------------------------------------------------------- 1 | 1. Which directory? 2 | Send Feedback 3 | In which directory, the small snippets you can use throughout the application are placed? 4 | ans: /utils. 5 | Solution Description 6 | It is a commonly used convention and the developer has a choice to use whatever folder structure is more meaningful in the project’s context. Some developers use “common”, “shared” or “utilities”. The most common practice is to have a util/utilities folder inside a common folder. 7 | 8 | 2. Which method ? 9 | The ____________ method converts a JavaScript object or value to a JSON string and ____________ method is used to transform a JSON string into a Javascript object. 10 | ans: JSON.stringify().JSON.parse(). 11 | Solution Description 12 | JSON.parse() takes a JSON string and transforms it into a JavaScript object. JSON.stringify() takes a JavaScript object and transforms it into a JSON string. 13 | 14 | 3. Correct Output 15 | Send Feedback 16 | What is the correct output of the given code. 17 | var x='6'; 18 | try { 19 | console.log("Before throw statement"); 20 | if(isNaN(x)) throw "is not a number"; 21 | x = Number(x); 22 | if(x > 5) throw "is too high"; 23 | console.log("After throw statement"); 24 | } 25 | catch(err) { 26 | console.log("Error caught : " + err); 27 | } 28 | finally { 29 | console.log("I am in finally!"); 30 | } 31 | ans: Before throw statement Error caught: is too high I am in finally!. 32 | Solution Description 33 | x is a string but it is a Number so, NaN will return false and then x is converted into a number. Since, it is greater than 5 it throws an error “is too high” and the next cole.log statement does not get executed. Error is caught and a message is displayed. Then control goes to the finally keyword and then "I am in finally!" gets printed. 34 | 35 | 4. Correct Statement 36 | Which of the following statements is/are true ? 37 | ans: 38 | Async makes sure that a promise is returned and if it is not returned then javascript automatically wraps it in a promise which is resolved with its value. 39 | Await makes the code wait until the promise returns a result. It only makes the async block wait. 40 | Promises can be consumed by registering functions using .then and .catch methods. then() is invoked when a promise is either resolved or rehected. 41 | Solution Description 42 | The await keyword is only valid inside async functions within regular JavaScript code. If you use it outside of an async function's body, you will get a SyntaxError 43 | 44 | 5. CSS modules 45 | A CSS Modules is a CSS file 46 | ans: In which all class names and animation names are scoped locally by default. 47 | In which class names are dynamically generated, unique and mapped to the correct styles. 48 | Which prevents name conflicts and lets you use the same css class name in name different 49 | files. 50 | 51 | 52 | 6. Props Validation 53 | Send Feedback 54 | Which package is needed for Props validation? 55 | ans: Prop Types. 56 | Solution Description 57 | We are using props as arguments at every for passing things from parent component to child component. So, there is a need of validating props and this purpose is solved by prop type. Prop type basically checks that the prop that is being passed is validated or not. 58 | Documentation: https://www.npmjs.com/package/prop-types 59 | 60 | 7. HTTP Method 61 | Send Feedback 62 | Which of the following is not a HTTP method? 63 | ans: REMOVE-Delete. 64 | Solution Description 65 | REMOVE is not a HTTP method. The primary or most-commonly-used HTTP methods are POST, GET, PUT, PATCH, and DELETE. These correspond to create, read, update, and delete (or CRUD) operations, respectively. 66 | 67 | 8. Authentication 68 | Send Feedback 69 | __________________ are created by an authentication service and contain information that enables a user to verify their identity without entering login credentials. 70 | ans: Authentication tokens. 71 | Solution Description 72 | API keys are for projects, authentication is for users. 73 | API keys identify the calling project the application or site making the call to an API whereas Authentication tokens identify a user the person that is using the app or site. 74 | 75 | 9. Which method ? 76 | The _________ method returns the value of the specified Storage Object item. 77 | ans: getItem(). 78 | Solution Description 79 | The getItem() method of the Storage interface, when passed a key name, will return that key's value, or null if the key does not exist, in the given Storage object. 80 | 81 | 10. Callbacks 82 | What is a Callback ? 83 | ans: Solution Description 84 | A callback is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of action. 85 | 86 | 11. Promises 87 | Select the incorrect statement. 88 | Promises based on time events are classified as follows: 89 | ans: 90 | Rejected when the promise does not return the correct result. 91 | Settles/Resolved after the event happens. 92 | Fulfilled: when the promise returns the correct result. 93 | Solution Description 94 | A promise is Fulfilled when the promise returns the correct result and Rejected when the promise does not return the correct result. 95 | 96 | 12. 97 | -------------------------------------------------------------------------------- /Questions and Exercises/17 Major Project Routing and Auth/Questions.txt: -------------------------------------------------------------------------------- 1 | 1. React Routes 2 | Which component should the Routes be wrapped inside to avoid rendering multiple renderings on a single route ? 3 | ans: Switch. 4 | Solution Description 5 | switch avoids rendering multiple components inside a router 6 | 7 | 2. Auth in SPAs 8 | Which of the following authentication methods is used by SPAs ? 9 | ans: Stateless 10 | Solution Description 11 | State less authentication uses tokens to verify users instead of session Ids. It is considered the most optimal choice of authentication for SPAs 12 | 13 | 3. Context API 14 | True or False? 15 | The Context in react is used to share data between nested components without passing it as props. 16 | ans: True. 17 | 18 | 4. Switch Routes 19 | Which component should be used to switch a route on a click ? 20 | ans: Link 21 | Solution Description 22 | Link component can switch to the route mentioned in the `to` property 23 | 24 | 5. Auth 25 | What is exchanged between the client and server in stateless authentication ? 26 | ans: JWT. 27 | Solution Description 28 | JWT token consists of data of the user 29 | 30 | 6. React context 31 | Send Feedback 32 | Consider the following statement: 33 | const theme = React.createContext(); 34 | What would the following statements log after the execution of this statement? 35 | const {primary} = React.useContext(theme); 36 | console.log(theme); 37 | ans: It will give an error. 38 | Solution Description 39 | It will give an error because, useContext will return the default value which in this case is undefined and we are trying to destructure undefined 40 | 41 | 7. JWT in react 42 | Send Feedback 43 | Where are the jwt tokens stored on the client? 44 | ans: Local Storage. 45 | Solution Description 46 | It is accessible everywhere if it is stored in localStorage 47 | 48 | 8. Local storage 49 | Send Feedback 50 | Which is a wrong function call among the following? 51 | ans: localStorage.removeItem(key, value). 52 | Solution Description 53 | removeItem() only takes key as an argument 54 | 55 | 9. User data 56 | Send Feedback 57 | Where is the user data stored after decoding it from the token? 58 | ans: React State. 59 | Solution Description 60 | It cant be stored on the localStorage or redux due to security issues 61 | 62 | -------------------------------------------------------------------------------- /Questions and Exercises/18. Major Project User profile/Questions.txt: -------------------------------------------------------------------------------- 1 | 1. Route Issues 2 | Send Feedback 3 | Which were the two issues that needed to be resolved in the previous video? 4 | ans: Settings page should be private(only visible to logged in users). 5 | Logged in users should not see the register and log in page. 6 | Solution Description 7 | The two issues that need to be resolved from the previous video were: 8 | 9 | - Logged in users should not see the register and log in page because they are already logged in. So, for implementing this we will be using redirect prop. 10 | 11 | - Settings page should not be visible to users who are not logged in. This can be implemented using Private Routes. 12 | 13 | 2. Fragments 14 | Send Feedback 15 | Which of the following is the correct syntax for using fragments? 16 | ans: return(); 17 | return (); 18 | 19 | 3. Updating Profile 20 | In the previous video, after refreshing the page, the old name appears even after editing the profile. Why is it so ? 21 | ans: because the Authentication token is not updated. 22 | Solution Description 23 | The Navbar reflects the old name after refreshing because user info is extracted from Authentication Token present in local storage which contains the old user info and we were not updating the token. 24 | 25 | 4. Which Route ? 26 | Neha wants to create an app in which only logged-in users can access their dashboard. Which route is best suitable for this purpose ? 27 | ans: Private Route. 28 | Solution Description 29 | Private Routes are the routes that are not visible to everyone and have some conditions on being displayed. For eg., a logged-in user can only access his profile page. 30 | 31 | 5. Which method? 32 | Send Feedback 33 | Which method in useHistory hook pushes a new entry onto the history stack? 34 | ans: push. 35 | 36 | 6. Add Friends 37 | Send Feedback 38 | What happens when a user clicks on the Add Friend button? 39 | ans: Api call is made. 40 | State is updated. 41 | 42 | 7. Toast Notifications 43 | Send Feedback 44 | _________ method is used for displaying popup messages 45 | ans: addToast. 46 | Solution Description 47 | Toast Notifications are popup messages that are added so as to display a message to a user. It can be a success, warning, info or error message. 48 | Further Readings: 49 | https://www.npmjs.com/package/react-toast-notifications 50 | https://jossmac.github.io/react-toast-notifications/ 51 | 52 | 8. Restricted Route 53 | Send Feedback 54 | Which of the following pages used restricted routes in Codeial Application? 55 | ans: Login page, Sign Up page. 56 | Solution Description 57 | Restricted Routes are the route that can only be seen by an unauthorized user. For eg: A logged-in user will not be able to see the login-in page or sign-up page. 58 | To implement this we can use prop restricted that is by default false and is present in the route component. 59 | 60 | 9. Which hook? 61 | Send Feedback 62 | The ____________ hook returns the location object that represents the current URL. 63 | ans: useLocation. 64 | Solution Description 65 | Locations represent where the app is now, where you want it to go, or even where it was. 66 | https://reactrouter.com/web/api/location 67 | 68 | 10. Guess the Output 69 | Send Feedback 70 | What will be the output of the following code? 71 | const user = { 72 | id: 120, 73 | name: "Aayushi", 74 | email: "aayushi@abc.com", 75 | friends: [123, 124, 125] 76 | }; 77 | 78 | function addFriend(friend) { 79 | user.friends=[...user.friends, friend] 80 | return; 81 | } 82 | 83 | addFriend(121); 84 | console.log(user.friends); 85 | ans: [123, 124, 125, 121]. 86 | Solution Description 87 | Rest operator extracts all the friends and then at last the friend with id 121 is added. So, the output is [123, 124, 125, 121]. 88 | 89 | 11. -------------------------------------------------------------------------------- /Questions and Exercises/19. Major Project Search and Chat/Questions.txt: -------------------------------------------------------------------------------- 1 | 1. Creating Post Logic 2 | Send Feedback 3 | Which of the following problem was not resolved in the previous video? 4 | ans: Newly added post was not visible as soon as it was added. 5 | Solution Description 6 | New posts should be added to the and setPosts function should be called so that the whole UI automatically gets rerendered after a new post is added. So, we will make this post global in the next video. 7 | 8 | 2. What is context? 9 | Send Feedback 10 | What is Context? 11 | ans: Solution Description 12 | Context provides a way to pass data through the component tree without having to pass props down manually at every level. Context is designed to share data that can be considered “global” for a tree 13 | 14 | For example, authenticated user, locale preference, UI theme need to be accessed in the application by many components. 15 | 16 | const {Provider, Consumer} = React.createContext(defaultValue) 17 | 18 | 3. Error in the code 19 | Send Feedback 20 | What is the error in the code given below? 21 | 36 | ans: Key is missing. 37 | Solution Description 38 | Key is not present as one of the props. So, it will show a warning. Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity. Keys used within arrays should be unique among their siblings. 39 | 40 | 41 | 42 | {results.map((user) => ( 43 | 44 | 45 | 46 | user 47 | {user.name} 48 | 49 | 50 | 51 | ))} 52 | 53 | 4. Context API 54 | Send Feedback 55 | _________________ creates a Context object. When React renders a component that subscribes to this Context object it will read the current context value from the closest matching Provider above it in the tree. 56 | ans: createContext. 57 | Further Readings: 58 | https://reactjs.org/docs/context.html#reactcreatecontext 59 | 60 | -------------------------------------------------------------------------------- /Questions and Exercises/2. Warm up Javascript/Questions.txt: -------------------------------------------------------------------------------- 1 | 1. What will be the output of the following code? 2 | 3 | let x = 42; 4 | if (true) { 5 | console.log(x); 6 | let x = 1337; 7 | } 8 | ans: ReferenceError: x is not defined 9 | Solution Description 10 | Variables defined with let are available only in the nearest enclosing block. 11 | 12 | 2. Global Scoping 13 | Send Feedback 14 | Guess the Output: 15 | const KEY = 'coding_ninjas'; 16 | if (true) { 17 | const KEY = 'ES6'; 18 | } 19 | console.log(KEY); 20 | ans: coding_ninjas. 21 | Solution Description 22 | This declaration creates a constant whose scope can be either global or local to the block in which it is declared. The scope of the inner KEY is only inside the "if" block. That's why the output is 'coding_ninjas. 23 | 24 | 3. Variable Hoisting 25 | Send Feedback 26 | Find the output: 27 | var temp= 'hello'; 28 | function display(){ 29 | console.log(temp); 30 | var temp = 'bye'; 31 | }; 32 | display(); 33 | 34 | ans: undefined, inside function scope temp is hoisted, var temp; console.log(temp); which is undefined. 35 | Solution Description 36 | This code will not give you an error due to variable hoisting. 37 | 38 | 4. What is the final value of array below? 39 | 40 | var array = [1, 2, 3] 41 | const array1 = [4, 5, 6] 42 | var arr1 = array.map(a => a * 2); 43 | 44 | array = [...array1, ...arr1] 45 | 46 | ans: [4,5,6,2,4,6] 47 | 48 | Solution Description 49 | First, each element of the array is getting multiplied by 2 and then the concatenation of 2 arrays is taking place. 50 | 51 | 5. Rest Operator 52 | 53 | What is the output of the following code? 54 | function foo(x, ...y) { 55 | return x * y.length 56 | } 57 | foo(4,1,2,30); 58 | 59 | ans: 12 60 | 61 | Solution Description 62 | Here, ..y is a rest parameter. Rest parameters are used to transform individual elements into an array and rest operators should be written at the end inside the function declaration. So, value 4 is assigned to variable x and the rest (1,2,30) are passed as an array of length 3. So, answer is 12. 63 | 64 | 6. Find the output of the code below: 65 | for (var i = 0; i < 5; i++) { 66 | setTimeout(function() { console.log(i); }, i * 1000 ); 67 | } 68 | 69 | ans: 55555 70 | 71 | Solution Description 72 | The variable i is actually declared within the for loop and the inner function accesses it. So when the for loop is done running, each of the inner functions refers to the same variable i, which at the end of the loop is equal to 5. 73 | 74 | 7. const colors = [ 75 | 'Red', 76 | 'Orange', 77 | 'Purple', 78 | 'Brown', 79 | 'Gray', 80 | 'Pink' 81 | ]; 82 | const [primary, ,secondary,...others] = colors; 83 | console.log(primary, secondary, others); 84 | What will be the output? 85 | 86 | ans: Red Purple ['Brown', 'Gray', 'Pink'] 87 | Solution Description 88 | In this destructuring, primary variable is assigned the value ‘Red’ and secondary is assigned the value ‘Purple’ which is the 3rd element of colors array. 2nd element of the array is skipped due to ‘,’ (elision) in between. And since, rest operator is used the remaining elements are extracted in the form of array which is others. 89 | - Elision lets you use the syntax of Array “holes” to skip elements during destructuring 90 | - The rest operator lets you extract the remaining elements of an iterable into an Array. 91 | 92 | 93 | 8. Array Destructuring and default value. 94 | 95 | Choose the correct output. 96 | const scores = [22, 33] 97 | const [math, science = 50, arts = 50, sst] = scores 98 | console.log(math,science,arts,sst); 99 | 100 | ans: 22 33 50 undefined; 101 | 102 | Solution Description 103 | Note that Default values provide a fallback if nothing is found in the source. If a part (an object property or an Array element) has no match in the source, it is matched against: 104 | its default value (if specified; it’s optional) 105 | undefined (otherwise) 106 | => scores array is destructured into variables - math, science, arts and sst but there are only two elements in the array. Therefore, math is assigned scores[0], science is assigned scores[1], arts is assigned the fallback default value of 50, (since, there are no more elements in scores array) and sst is assigned ‘undefined’ by default. 107 | 108 | 9. Priority List 109 | Send Feedback 110 | A student is creating a list of electronics items he wants to buy with decreasing priority(highest priority item at 0 index). 111 | Electronics=['Mobile', 'Watch', 'Kindle']. 112 | But due to college requirements, he wants to keep a certain item as his first priority. Can you add that item at the start to create a new priority list using the spread operator? 113 | 114 | ans: function newPriorityList(item) { 115 | var Electronics=['Mobile', 'Watch', 'Kindle']; 116 | // write your code here 117 | var ans = [item, ...Electronics]; 118 | return ans; 119 | 120 | } 121 | 122 | 123 | // Input and output has already been handled for you 124 | 125 | process.stdin.resume(); 126 | process.stdin.setEncoding("utf-8"); 127 | 128 | let remainder = ''; 129 | process.stdin.on('data', function (chunk) { 130 | var ans=newPriorityList(chunk); 131 | for(var i=0; isum+number, 0); 161 | // here args is a spread operator used to spread the variable input as in iterator whiuch is array in this case 162 | 163 | } 164 | 165 | 166 | // Input and output has already been handled for you 167 | 168 | process.stdin.resume(); 169 | process.stdin.setEncoding("utf-8"); 170 | 171 | let remainder = ''; 172 | process.stdin.on('data', function (chunk) { 173 | var arr = []; 174 | var a = chunk.toString().split(' '); 175 | for(var i=0; istudent.grade>=grade); 234 | return ans; 235 | } 236 | 237 | 238 | // Input and output has already been handled for you 239 | 240 | 241 | process.stdin.resume(); 242 | process.stdin.setEncoding("utf-8"); 243 | 244 | let remainder = ''; 245 | process.stdin.on('data', function (chunk) { 246 | let t = parseInt(chunk); 247 | let ans = studentGrades(t); 248 | for(var i=0; i{ 282 | if (acc.indexOf(curr) === -1) { 283 | acc.push(curr); 284 | } 285 | return acc 286 | }, []) 287 | return myNonDuplicateArray; 288 | 289 | } 290 | 291 | 292 | 293 | // Input and output has already been handled for you 294 | 295 | process.stdin.resume(); 296 | process.stdin.setEncoding("utf-8"); 297 | 298 | let remainder = ''; 299 | process.stdin.on('data', function (chunk) { 300 | var arr = []; 301 | var a = chunk.toString().split(' '); 302 | for(var i=0; i { 16 | store.dispatch({ 17 | type: "", 18 | }); 19 | }); 20 | } 21 | ans: Stack Overflow Error. 22 | Solution Description 23 | Calling dispatch() "without any conditions" is technically possible, however it leads to an infinite loop as every dispatch() call usually triggers the listener again. 24 | 25 | Q. store.subscribe() 26 | Send Feedback 27 | Q. What is the type of return value of subscribe method store.subscribe(listener) ? 28 | ans: function. 29 | Solution Description 30 | It returns a function that unsubscribes the change listener. 31 | 32 | const unsubscribe=store.subscribe(listener) 33 | unsubscribe(); 34 | 35 | Q. Pure functions 36 | Send Feedback 37 | Is it a pure function or not? 38 | var x = 1; 39 | const a = () => { 40 | var x = 2; 41 | return x*100; 42 | } 43 | ans: Yes. 44 | Solution Description 45 | It is a pure function because it doesnt rely on any global variables, the return statement uses the x from the local scope 46 | 47 | Q. Store 48 | Send Feedback 49 | Imagine the following reducer: 50 | const reducer = (state, action) => state 51 | What will be the result of creating a redux store from the following reducer like this? 52 | const store = createStore(reducer) 53 | console.log(store.getState()) 54 | ans: Undefined. 55 | Store 56 | Send Feedback 57 | Imagine the following reducer: 58 | const reducer = (state, action) => state 59 | What will be the result of creating a redux store from the following reducer like this? 60 | const store = createStore(reducer) 61 | console.log(store.getState()) 62 | 63 | Q. Spread operator 64 | Send Feedback 65 | Consider the following code: 66 | var d = {a: 1, b: 2}; 67 | var g = d; 68 | var h = {...d}; 69 | console.log((d==g) && (d==h)) 70 | What will be the output of the following code 71 | ans: False. 72 | Solution Description 73 | d is not equal to h 74 | 75 | Q. Immutable updates 76 | Send Feedback 77 | Consider the following code: 78 | var d = {a: 1, b: 2}; 79 | var h = {...d, b: 3}; 80 | console.log(h.b) 81 | What will be the output of the following code 82 | ans: 3. 83 | Solution Description 84 | In order to update values immutably, your code must make copies of existing objects/arrays, and then modify the copies 85 | 86 | Further readings: https://redux.js.org/tutorials/fundamentals/part-2-concepts-data-flow 87 | 88 | Q. Reducers 89 | Send Feedback 90 | What does a reducer return? 91 | ans: A state. 92 | 93 | Q. Data flow 94 | Send Feedback 95 | What is the flow of the data during a change in state of the redux store 96 | ans: UI > action> reducer>store. 97 | Solution Description 98 | This is the conventional method followed in react applications to change the state of redux store 99 | 100 | Q. Dispatch 101 | Send Feedback 102 | What does the dispatch method return? 103 | ans: The dispathched action. 104 | 105 | -------------------------------------------------------------------------------- /Questions and Exercises/22. Redux Continued/Questions.txt: -------------------------------------------------------------------------------- 1 | 1. Reducers 2 | Send Feedback 3 | Can we have multiple reducers in an app? 4 | ans: True. 5 | 6 | 2. Using combineReducers 7 | Send Feedback 8 | How do we call combineReducers() method if we have two reducer functions addReducer() and subtractReducer()? 9 | ans: combineReducers({add: addReducer, subtract: subtractReducer}) 10 | 11 | 3. Thunk 12 | Send Feedback 13 | Why do we use redux thunk? 14 | ans: to write action creators that return a function instead of a action. 15 | 16 | 4. combineReducers 17 | Send Feedback 18 | What does combineReducers() return? 19 | ans: A function. 20 | Solution Description 21 | A reducer that invokes every reducer inside the reducers object, and constructs a state object with the same shape 22 | 23 | 5. Currying 24 | Send Feedback 25 | Consider the following code: 26 | let sum = 0 27 | function add (a) { 28 | sum += a 29 | console.log(sum) 30 | return this.add 31 | } 32 | What will the following function call log in the console? 33 | add(2)(3)(3) 34 | ans: 2 5 8 35 | Solution Description 36 | It is doing currying in the same function and logs every sum in the process 37 | 38 | 6. True or False 39 | Send Feedback 40 | True or false 41 | applyMiddleware() can have multiple arguments 42 | ans: True. 43 | Solution Description 44 | Each argument is a middleware 45 | 46 | 7. Thunk 47 | Send Feedback 48 | What should a thunk return? 49 | ans: nothing. 50 | It calls the action if a function is passed as a function. 51 | 52 | 8. Multiple Middlewares 53 | Send Feedback 54 | Suppose you have multiple middlewares passed into the store. What will the next() in the last middleware refer to? 55 | ans: dispatch. 56 | Solution Description 57 | Each middleware calls the next one and the las one calls the dispatch function 58 | 59 | 9. Arrow functions 60 | Send Feedback 61 | Consider the following function: 62 | const f = () => () => () => fetch 63 | Is this call valid? 64 | f()()()(API_URL) 65 | ans: Yes. 66 | Solution Description 67 | The function f()()() returns fetch function 68 | -------------------------------------------------------------------------------- /Questions and Exercises/23. React and Redux/Questions.txt: -------------------------------------------------------------------------------- 1 | 1. Create context 2 | Send Feedback 3 | How many arguments does React.createContext() take? 4 | ans: 0 1 5 | Solution Description 6 | It can take a single argument which is the default value. It is optional 7 | 8 | 2. Context.Consumer 9 | Send Feedback 10 | what does a context consumer require as a child? 11 | ans: A function. 12 | Solution Description 13 | The function receives the current context value and returns a React node. 14 | 15 | 3. Connect() 16 | Send Feedback 17 | What does a connect function return? 18 | ans: A component. 19 | Solution Description 20 | The wrapper component with the store passed as props 21 | 22 | 4. component wrapper 23 | Send Feedback 24 | Why do we use a wrapper function? 25 | ans: To pass the store into props of the actual component. 26 | 27 | 5. True or False 28 | Send Feedback 29 | True or false? 30 | All consumers that are descendants of a Provider will re-render whenever the Provider’s value prop changes 31 | ans: True. 32 | Solution Description 33 | The propagation from Provider to its descendant consumers (including .contextType and useContext) is not subject to the shouldComponentUpdate method, so the consumer is updated even when an ancestor component skips an update. 34 | 35 | 6. True or False 36 | Send Feedback 37 | True or False 38 | Context provides a way to pass data through the component tree without having to pass props down manually at every level. 39 | ans: True. 40 | Solution Description 41 | Further Readings: https://reactjs.org/docs/context.html 42 | 43 | 7. connect() 2 44 | Send Feedback 45 | From which package we can import the connect() function? 46 | ans: react-redux. 47 | 48 | 8. connect() 49 | Send Feedback 50 | What is the use of the connect() function? 51 | ans: Connects a react component to a redux store. 52 | 53 | 9. Provider 54 | Send Feedback 55 | What is the use of ? 56 | ans: The makes the Redux store available to any nested components that have been wrapped in the connect() function. 57 | 58 | 10. HOCs 59 | Send Feedback 60 | What are higher order components? 61 | ans: A component that takes another component as a argumnet and returns another function. 62 | -------------------------------------------------------------------------------- /Questions and Exercises/3. Hello World/Questions and Answers.txt: -------------------------------------------------------------------------------- 1 | 1. What does Babel do ? 2 | ans: Compiles JSX into Javascript. 3 | 4 | 2. Webpack ,What does the webpack do ? 5 | ans: A module bundler. 6 | Solution Description 7 | Webpack is a module bundler. The main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset. 8 | Further Readings: https://webpack.js.org/concepts/why-webpack/ 9 | 10 | 3. At most, how many default import statements can a module have ? 11 | ans: In one js file you can have only one export. 12 | 13 | 4. Is JSX necessary to work with React ? 14 | ans: False. 15 | 16 | 5. How do you call a function fetch() in JSX ? 17 | ans: {fetch()} 18 | 19 | 6. Which of the following can be used to check if a user is logged in or not ? 20 | ans:
{isLoggedIn? username: "Hello World"}
21 | 22 | 7. Everything in react is a __________ 23 | ans: component. 24 | Solution Description 25 | Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. 26 | 27 | 8. Which tool is used to take JSX and convert it into createElement calls ? 28 | ans: Babel 29 | 30 | 9. Which among the following package contains render() function that renders a react element tree to the DOM? 31 | ans: ReactDom 32 | 33 | 10. What is the use of render() in React? 34 | ans: It renders a React element into the DOM in the supplied container and returns a reference to the component. 35 | Further Readings: https://reactjs.org/docs/rendering-elements.html 36 | 37 | 38 | -------------------------------------------------------------------------------- /Questions and Exercises/4. Mini Project Starting the project(Shopping Cart)/Questions.txt: -------------------------------------------------------------------------------- 1 | 1. How do you write an inline style specifying the font-size:10px and color:blue in JSX? 2 | ans: style={{fontSize:10, color:'blue'}}; 3 | 4 | 2. Which of the following is the correct syntax for adding a click event handler, foo, to a button in React Jsx ? 5 | ans: 17 | } 18 | } 19 | ans: Cant use hooks inside a class. 20 | 21 | 3. Can we use the same hook multiple times in a function? 22 | ans: true. 23 | Solution Description 24 | The state of each component is completely independent. Hooks are a way to reuse stateful logic, not state itself. In fact, each call to a Hook has a completely isolated state. So, you can even use the same custom Hook twice in one component. 25 | 26 | 4. What does useState returns? 27 | ans: A Pair. 28 | Solution Description 29 | useState hook returns the current state value and a function that lets you update it. 30 | 31 | 5. How many arguments are passed to useState ? 32 | ans: 1 33 | Solution Description 34 | Only argument is provided to useState which is its initial state. useState lets you use local state within a function component. You pass the initial state to this function and it returns a variable with the current state value (not necessarily the initial state) 35 | 36 | 6. What will be the value of count after clicking the button? 37 | const UpdateState = () => { 38 | const [count, setCount] = useState(19) 39 | const handleClick = () => setCount(count + 2) 40 | return ( 41 |
42 | Count value is: {count} 43 |
44 | 45 |
46 |
47 | ) 48 | } 49 | ans: 21. 50 | Solution Description 51 | The initial value will be set to 19. And when the button is clicked, counter gets incremented by 2. Hence, The count will become 21. 52 | 53 | 7. What is the purpose of useEffect Hook? 54 | ans: To invoke sideEffects from within functional components. 55 | Solution Description 56 | The useEffect hook is useful to perform additional work behind the scenes without affecting the appearance of the web page. 57 | 58 | 8. Dependency Array 59 | Send Feedback 60 | True/False 61 | If we skip the second argument (i.e, dependency array), this useEffect is called after every render. 62 | ans: True. 63 | Solution Description 64 | It runs before the first render and after every update. But, we can customise this by passing some additional arrays. useEffect runs after every update because every action requires newly updated data. 65 | 66 | 9. Which of the following statement is incorrect about react hooks? 67 | ans: We can call a Hook from a regular function. 68 | Solution Description 69 | Don’t call Hooks from regular JavaScript functions. Instead, you can: 70 | - > Call Hooks from React function components. 71 | - > Call Hooks from custom Hooks. 72 | 73 | By following this rule, you ensure that all stateful logic in a component is clearly visible from its source code. 74 | 75 | 10. Which of the following is not an example of react hook? 76 | ans: useCondition. 77 | Solution Description 78 | useRef, useReducer, useLayoutEffect, useCallback are additional hooks which are either variants of the basic ones, or only needed for specific edge cases. 79 | 80 | 11. A custom Hook is a JavaScript function 81 | ans: Whose name starts with "use" 82 | That may call other Hooks. 83 | ans a mechanism to reuse stateful logic. 84 | 85 | 8. Create a Custom Hook 86 | Send Feedback 87 | Create your own custom hook which toggles the text on clicking the button. 88 | ans: Solution Description 89 | function App() { 90 | const [isTextChanged, setIsTextChanged] = useToggle(); 91 | return ( 92 | {isTextChanged ? 'Toggled' : 'Click to Toggle'} 93 | ); 94 | } 95 | 96 | const useToggle = (initialState = false) => { 97 | const [state, setState] = useState(initialState); 98 | const toggle = useEffect(() => setState(state => !state), []); 99 | return [state, toggle] 100 | } 101 | -------------------------------------------------------------------------------- /Readme.md: -------------------------------------------------------------------------------- 1 | 2 | # Advanced Front End Development with React/Full Stack by Coding Ninjas 3 | 4 | A repo containing list of all questions and answers asked in Advanced Front End Development with React course provided by Coding Ninjas. 5 | I took the course as part of premium complete Web development Course with Backend and Front End Course in 2002. 6 | Started the React course on 29 June 2022, The questions alongwith their answers are provided lecture by lecture in very structured manner. 7 | 8 | 9 | 10 | 11 | ## Badges 12 | 13 | Add badges from somewhere like: [shields.io](https://shields.io/) 14 | 15 | [![MIT License](https://img.shields.io/apm/l/atomic-design-ui.svg?)](https://github.com/tterb/atomic-design-ui/blob/master/LICENSEs) 16 | [![GPLv3 License](https://img.shields.io/badge/License-GPL%20v3-yellow.svg)](https://opensource.org/licenses/) 17 | [![AGPL License](https://img.shields.io/badge/license-AGPL-blue.svg)](http://www.gnu.org/licenses/agpl-3.0) 18 | 19 | 20 | ## Appendix 21 | 22 | Please star the github section and purchase the React Course from the link provided on the right, if you want to develop in React. 23 | You will get a 15-20% discount using my link provided to you on the right. 24 | Enjoy.......... 25 | 26 | --------------------------------------------------------------------------------