CSS is responsible for styling in React JS. Some of the options you can choose when it comes to styling React app include;

1. Using inline style with your JSX

Inline styling involves writing CSS directly within your JSX code. Each style is written as an object where CSS properties are defined in camelCase. e.g., instead of ‘background-color‘, you use ‘backgroundColor’.

For example;

import React from 'react';

function Button() {
  const buttonStyle = {
    backgroundColor: 'blue',
    color: 'white',
    padding: '10px 20px',
    fontSize: '16px'
  };

  return (
    <button style={buttonStyle}>
      Click Me
    </button>
  );
}

export default Button;

You can also write style properties directly within the style attribute using double curly braces. This method is more concise for simple or one-time style.

For example;

import React from 'react';

function Button() {
  return (
    <button style={{ backgroundColor: 'blue', color: 'white', padding: '10px 20px', fontSize: '16px' }}>
      Click Me
    </button>
  );
}

export default Button;

2. Using CSS framework

React can also integrate with various CSS frameworks like Bootstrap, Material-UI, or Tailwind CSS. These frameworks provide a collection of pre-written CSS styles that you can easily implement in your React project.

They are important for rapidly developing a visually appealing UI with consistent styling.

3. CSS modules

CSS module is a file in which all class names and animation names are scoped locally by default. Meaning, the styles you define in a CSS module are exclusive to the component avoiding conflicts with other styles in your application.

You can create a .module.css file, write your standard CSS, and then import and use these styles in your React component. This method is highly effective for maintaining a clean and organized styling structure, especially in larger applications.

States and Hooks

State refers to the data or information that a component holds, which can change over time due to user actions or other factors. It’s like a memory for your component, storing values that the component might need to render or operate.

Importance of state in React Apps

1. Dynamic content: Allow component react to user input, server responses, or other changes, making your application interactive.

2. Reactivity: React components automatically re-render whenever their state changes. This means the UI is always in sync with the current state, providing a seamless user experience.

3. Component isolation: Each component in React has its own state, separate from other components, making it easier to manage and debug the application.

4. Control over behavior: State can be used to control various aspects of a component’s behavior and appearance.

Some common examples of state usage can include:

• Form inputs and controls, e.g., text fields, check-boxes, etc.

• Data fetched from an API that needs to be displayed.

• UI elements like modals or dropdowns that open and close.

Here is a simple state usage in a functional component:

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Here, useState is a hook that lets you add React state to functional components. count is the current state, and setCount is a function that updates it. Clicking the button updates the state which automatically triggers a re-render with the new count.

What are hooks

Hooks are a feature introduced in React 16.8 that allows us to use state and other React features in functional components. Some key points about hooks include:

1. Use state in functional components: useState hook lets you add state to functional components. Previously, state was only usable in class components.

2. Manage side-effects: useEffect hook is used for side effects in functional components, like data fetching, subscriptions, or manually changing the DOM.

3. Custom Hooks: You can create your own hooks to reuse stateful logic between components. Custom hooks are a powerful way to extract component logic into reusable functions.

4. Other built-in Hooks: React provides additional hooks like useContext for accessing context data, useReducer for state management using reducers, and useRef for referencing DOM elements.

5. Rules of Hooks: Hooks come with a set of rules. They should only be called at the top level of a component (not inside loops, conditions, or nested functions) and only from React functions (not regular JavaScript functions).

Example of useState and useEffect:

import React, { useState, useEffect } from 'react';

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

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

In this example, useState is used to keep track of the count, and useEffect is used to perform the side effect of updating the document title.

Links for various Hooks:

1. useEffect

2. useState