React.js Core Concepts Flashcards For Beginners

In React, setState is a method used to update a component's state. It is a built-in method available on all class-based components, and it allows you to modify the state of the component, triggering a re-render of the component and any child components that depend on that state.

setState takes an object or a function as an argument, which is used to update the state of the component. When the state is updated, React will re-render the component and any child components that depend on that state.

Here's an example of using setState to update a component's state:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}

In React, "refs" are a way to access and manipulate DOM elements or React components directly. Refs provide a way to access a component's underlying DOM node, allowing you to modify its properties, call its methods, or attach event listeners to it.

Refs can be created using the createRef method or the useRef hook. They can then be passed to components as props or accessed directly in the component's code using the current property.

Here's an example of using a ref to access and modify a text input field:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();
  }

  focusTextInput = () => {
    this.textInput.current.focus();
  };

  render() {
    return (
      <div>
        <input type="text" ref={this.textInput} />
        <button onClick={this.focusTextInput}>Focus the text input</button>
      </div>
    );
  }
}

In React, "context" refers to a way of sharing data between components without the need to pass props down through every level of the component tree. It allows you to define a global data store that can be accessed by any component in the tree, regardless of where it is in the hierarchy.

Context is implemented using two main components: Provider and Consumer. The Provider component defines the global data store, while the Consumer component allows individual components to access the data stored in the Provider.

In React, "fragments" are a way to group a list of child elements without adding extra nodes to the DOM. Fragments allow you to group elements together without having to wrap them in a parent element, which can be useful for cases where a parent element would interfere with the layout or styling of the child elements.

Fragments can be created using the <React.Fragment> component or using the shorthand syntax <> and </>.

Here's an example of using fragments to group a list of elements without adding a parent element to the DOM:

function MyComponent() {
  return (
    <>
      <h1>My List</h1>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </>
  );
}

In React.js, "lifecycle methods" are a set of methods that are called at various stages in the life of a component. They allow you to execute code at specific points in a component's lifecycle, such as when it is first created, updated, or destroyed.

There are three categories of lifecycle methods:

1. Mounting methods - these methods are called when a component is first created and added to the DOM. The most common mounting method is componentDidMount, which is used to perform actions after the component has been added to the DOM, such as fetching data or setting up event listeners.
2. Updating methods - these methods are called when a component's state or props change, and they allow you to control what happens when the component is updated. Common updating methods include shouldComponentUpdate, which is used to determine whether the component should be re-rendered, and componentDidUpdate, which is used to perform actions after the component has been updated.
3. Unmounting methods - these methods are called when a component is removed from the DOM. The most common unmounting method is componentWillUnmount, which is used to perform cleanup actions before the component is destroyed, such as removing event listeners or clearing timeouts.

componentDidMount is a lifecycle method in React that is called immediately after a component is mounted (added to the DOM). It is commonly used to perform initialization tasks that require access to the DOM, such as fetching data from an API or setting up event listeners.

Here's an example of using componentDidMount to fetch data from an API:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
  }

  componentDidMount() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        this.setState({ data: data });
      });
  }

  render() {
    return (
      <div>
        {this.state.data ? (
          <p>Data: {this.state.data}</p>
        ) : (
          <p>Loading...</p>
        )}
      </div>
    );
  }
}

In React.js, props are short for "properties," and they are used to pass data from a parent component to a child component. Props are read-only and cannot be modified by the child component. Instead, they are used to configure the behavior or appearance of the child component.

Props can be any type of data, including strings, numbers, arrays, and objects. They are defined as attributes on a JSX element, and they can be accessed within the child component using the props object.

For example, a parent component might pass a string prop to a child component like this:

// Parent component
function App() {
  return (
    <ChildComponent greeting="Hello, world!" />
  );
}

// Child component
function ChildComponent(props) {
  return <h1>{props.greeting}</h1>;
}

In this example, the App component passes the string "Hello, world!" to the ChildComponent as a prop called greeting. The ChildComponent accesses this prop using the props object and renders it in an <h1> element.

Props allow for flexible and reusable components in React, as you can pass different data to the same component to customize its behavior or appearance.

React Hooks are a feature introduced in React 16.8. Hooks are functions that allow you to "hook into" React's internal state management and lifecycle methods. They provide a way to add state and other features to function components without the need for classes or complex state management logic.

Some of the most commonly used hooks in React include:

• useState: A hook that allows you to add state to a function component.
• useEffect: A hook that allows you to add lifecycle methods to a function component.
• useContext: A hook that allows you to use React's context API in a function component.
• useRef: A hook that allows you to create a reference to a DOM element or a value that persists between renders.

React components are the building blocks of React applications. They are reusable pieces of code that encapsulate functionality and state, allowing you to create complex user interfaces easily.

Components can be either class-based or function-based. Class-based components use a class declaration and have more advanced functionality, including lifecycle methods and the ability to manage state. Function-based components, on the other hand, are simpler and more lightweight, but they don't have access to lifecycle methods or state management.

React components can receive input data, called "props," which allow you to configure their behavior and appearance. They can also maintain their own internal state, which can be updated using the setState method.

Components can be nested within each other, allowing you to create complex UIs by composing smaller components into larger ones. This composability is one of the core strengths of React and makes it easy to build scalable and maintainable applications.

To "deploy" a React app means to make it available to the public by publishing it to a web server or hosting service. This involves taking the code that was developed on a local machine and making it available on the internet so that others can access it.

Deploying a React app typically involves several steps, including:

1. Building the app: The code for a React app must be "built" or compiled into a format that can be executed by a web browser. This involves running a command to create a production-ready build of the app.
2. Choosing a hosting service: The built app must then be uploaded to a web server or hosting service. There are many hosting options available, including cloud hosting services like Amazon Web Services (AWS) or Microsoft Azure, as well as dedicated web hosting services.
3. Configuring the hosting service: Once the app is uploaded, the hosting service must be configured to serve the app to users. This may involve configuring domain names, SSL certificates, and other settings.
4. Testing and debugging: Finally, the deployed app must be tested and debugged to ensure that it is functioning correctly and that users can access it without errors.

Deploying a React app can be a complex process, but there are many tools and services available to simplify the process and make it more manageable for developers.

In React.js, "SSR" or "Server-Side Rendering" refers to the technique of rendering React components on the server before sending them to the client's browser. This is accomplished by running the React application on the server using Node.js or another server-side environment, and then sending the fully-rendered HTML page to the client's browser.

SSR can provide several benefits in React.js applications:

1. Improved performance: SSR can improve the initial load time of a React application, as the client's browser receives a pre-rendered page that doesn't require additional JavaScript to render.
2. Better SEO: Search engines can easily crawl and index the pre-rendered HTML page, which can improve the application's SEO performance.
3. Improved user experience: SSR can provide a faster initial rendering of the application, which can improve the user experience and reduce bounce rates.

React provides a built-in library called "ReactDOMServer" that can be used to render React components on the server. Additionally, there are several popular server-side rendering frameworks and libraries available for React, such as Next.js and Gatsby.js, which provide additional features and functionality for SSR.

In React.js, "state" is a way for components to store and manage data internally. It represents the current state of a component and can change over time in response to user interactions or other events.

State is typically defined and initialized in the constructor of a class-based component, or using the useState hook in a function-based component. Once defined, the state can be accessed and updated using the this.state object in class-based components or the setState function in function-based components.

When the state of a component changes, React automatically re-renders the component and any child components that depend on that state. This means that updating the state can trigger a re-render of the entire component tree, resulting in updates to the UI.

State is often used to manage user input, form data, or other dynamic data within a component. It is important to note that state should be used sparingly and only for data that is specific to a component, as it can lead to performance issues if overused.

In React, there are two types of components: class-based components and function-based components.

Class-based components use a JavaScript class to define a component. They have more advanced functionality, including access to lifecycle methods and the ability to manage state. Class-based components are used when you need to manage state or access lifecycle methods.

Class-based component:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}

Function-based components, on the other hand, are simpler and more lightweight. They are defined as functions that return a React element, and they can accept props as arguments. Function-based components do not have access to lifecycle methods or state management, but they can use React hooks, which were introduced in React 16.8, to add state and other functionality.

Function-based component:

function App() {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
}

React Router is a popular library for building single-page applications (SPAs) with React.js. It allows you to handle routing and navigation in your application by mapping URLs to components.

React Router provides several components, including BrowserRouter and Switch, which allow you to define routes for your application. You can then use the Link component to create links between different pages or components in your application, and the Route component to define what component should be rendered for each route.

React Router also provides features like nested routes, route parameters, and redirects, making it a powerful tool for building complex applications. Additionally, it integrates well with other libraries and tools in the React ecosystem, such as Redux and React Native.

JSX is a syntax extension for JavaScript that allows developers to write HTML-like code in their JavaScript files. It is primarily used in React applications to define the structure and appearance of user interfaces.

JSX makes it easier to read and write code, especially when creating complex UIs, by allowing developers to write code that looks like HTML, but that is actually JavaScript under the hood. JSX elements represent the virtual DOM nodes that make up a React component, and they allow you to build the UI using familiar HTML-like syntax.

Under the hood, JSX is transpiled into regular JavaScript using tools like Babel. This allows the code to be interpreted by browsers and other JavaScript environments. While JSX is not mandatory for using React, it is the recommended way to write React components, as it makes the code more readable and maintainable.

In React, "conditional rendering" refers to the process of displaying different content or UI elements based on certain conditions. It allows you to control what is rendered based on user input, state, or other factors.

Conditional rendering can be achieved using JavaScript expressions inside of JSX elements. For example, you might conditionally render a component based on a boolean value like this:

function MyComponent(props) {
  const isLoggedIn = props.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? (
        <p>Welcome back!</p>
      ) : (
        <p>Please log in.</p>
      )}
    </div>
  );
}

In this example, the MyComponent function receives a boolean prop called isLoggedIn. Depending on the value of this prop, the component renders either a "Welcome back!" message or a "Please log in." message.