2.Basics-2.md

100 React Questions (Basics - 2)

Q1. What is Arrow Function Expression in JSX? V. IMP.

• An Arrow Function Expression is a concise (expressing a lot of information clearly and in a few words) way to write functions.

• Arrow functions are often used because they do not bind their own this context, making them more predictable and reducing potential errors related to the this keyword.

  // Arrow Function Expression
  const ArrowFunc = (props) => {
      return (
          <>
              <h1>{props.name}</h1>
          </>
      )
  }
  
  export default ArrowFunc

Q2. How to Setup React first project?

• Install Node
• Install code editor VS Code
• Command to create project npx create-reactapp my-app-name
• Open project folder
• Run npm start to start the project

Q3. What are the Main Files in a React project?

S.No	File Name	Description
1	index.html	Single page for React application.
2	Components/component1.js	Your application components.
3	App.js	Main component or container or Root component.
4	App.test.js (Optional)	Used for writing tests for the App.js file.
5	Index.css (Optional)	This is a global CSS file that serves as the main stylesheet for the entire application.
6	index.js	Entry point for JavaScript. Renders the main React component (App) into the root DOM element.

Q4. How React App Load and display the components in browser? V. IMP.

• index.html

  Single page which loads index.js by React libraries

• index.js

  Replace root element of index.html file by App component

• App.js

  Root component which is the container of all the child components.

• ChildComponent.js

  Custom child components placed over app component.

Q5. What is the difference between React and Angular?

React	Angular
React and Angular both are used to create single page UI applications using components.
1. React is a JavaScript library	1. Angular is a complete framework.
2. React uses a virtual DOM which makes it faster. 🏆	2. Angular uses a real DOM
3. React is smaller in size and lightweight and therefore faster sometime. 🏆	3. Angular is bigger because it is a complete framework.
4. React depends on external libraries for many complex features, so developer has to write many lines of code for complex functionalities.	4. Since Angular is a complete framework, therefore it provides built-in support for features like routing, forms, validation, and HTTP requests. 🏆
5. React is simple to learn and more popular than Angular. 🏆	5. Angular is slightly difficult to learn as it has Typescript, OOPS concept and many more things.

Q6. What are other 5 JS frameworks other than React?

• Angular (new version)
• Vue.js
• AngularJS (old version)
• Backbone.js
• Ember.js

Q7. Whether React is a Framework or a Library? What is the difference?

Library	Framework
Developers import the libraries at the top and then used its functions in components.	Developers need to follow a specific structure or pattern defined by the framework.
React is commonly referred to as a JavaScript library.	Angular is a framework.

Q8. How React provides Reusability and Composition? (advantage of components)

React provides reusability and composition through its component-based architecture.

• Reusability: Once you create a component, you can re-use it in different parts of your application or even in multiple projects.

• Composition: Composition is creating new and big components by combining existing small components. Its advantage is, change to one small component will not impact other components.

Q9. What are State, Stateless, Stateful and State Management terms?

• state refers to the current state of the component.

• Stateful or state management refers to, when a user performs some actions on the UI, then the React application should be able to update and re-render that data or state on the UI.

  import React from 'react';
  
  // Stateless Example
  function ComponentState() {
  let count = 0; // Initial state
  
  const increment = () => {
      count += 1;
      console.log(`Count: ${count}`);
  }
  
  return (
      <div>
          <p>Stateless Example</p>
          <p> Count: {count}</p> {/*Not Updating*/}
          <button onClick={increment}>Click</button>
      </div>
  )
  }
  
  export default ComponentState;

	Props	State
Uses	It Passes data from one component to another component	Holds information about the component
Readability	Read Only	Changeable
Mutability	Immutable	Are Mutable
Stateless Component	Can have Props	Can not have State
Child Component	Child Component can access	Child Component can not access
Set Initial Value for Child	Yes	Yes
Parent can change Value	Yes	No

Q10. What are Props in JSX? V. IMP.

props (properties) are a way to pass data from a parent component to a child component.

function App() {
    return (
        <ChildComponent name="Happy" purpose="Interview" />
    );
}

function ChildComponent(props) {
    return <div>{props.name}, {props.purpose}!</div>;
}

---

Previous: React Basic I
Next: File and Folder