React Basics - Jobs with Skills

React is a JavaScript library for building user interfaces, particularly single-page applications where UI updates are frequent and dynamic. Here’s a brief overview of the basics of React:

1. Components:

React applications are built using components. Components are reusable, self-contained units that can represent a part of a UI.
Components can be functional or class-based.

Functional Component:

import React from 'react';

function MyComponent() {
  return <div>Hello, World!</div>;
}

export default MyComponent;

Class Component:

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return <div>Hello, World!</div>;
  }
}

export default MyComponent;

2. JSX (JavaScript XML):

JSX is a syntax extension for JavaScript recommended by React for describing what the UI should look like.
It allows you to write HTML elements and components in a JavaScript file.

import React from 'react';

const element = <h1>Hello, JSX!</h1>;

export default element;

3. Props:

Props (short for properties) are a way to pass data from a parent component to a child component.
Props are read-only and cannot be modified by the child component.

import React from 'react';

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

export default Greeting;

4. State:

State is used for mutable data that can change over time. It is managed within a component.
State changes trigger re-renders of the component.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

5. Handling Events:

React uses camelCase for event names, and event handlers are passed as functions.

import React, { useState } from 'react';

function ButtonClicker() {
  const [clicked, setClicked] = useState(false);

  const handleClick = () => {
    setClicked(true);
  };

  return (
    <div>
      <button onClick={handleClick}>Click me!</button>
      {clicked && <p>Button was clicked!</p>}
    </div>
  );
}

export default ButtonClicker;

6. Conditional Rendering:

Use conditional statements or ternary operators for conditional rendering.

import React from 'react';

function UserGreeting({ isLoggedIn }) {
  return isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>;
}

export default UserGreeting;

7. Lists and Keys:

Use the map function to render lists of elements. Provide a unique key prop to help React identify which items have changed, added, or removed.

import React from 'react';

function ListExample({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

export default ListExample;

8. Lifecycle Methods (Class Components):

Class components have lifecycle methods that allow you to execute code at different points in a component’s life.

import React, { Component } from 'react';

class MyComponent extends Component {
  componentDidMount() {
    console.log('Component mounted');
  }

  componentWillUnmount() {
    console.log('Component will unmount');
  }

  render() {
    return <div>Hello, World!</div>;
  }
}

export default MyComponent;

9. Hooks (Functional Components):

Hooks are functions that let you use state and other React features in functional components.

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

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

  useEffect(() => {
    console.log('Component updated');
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default MyComponent;

Conclusion:

React provides a powerful and efficient way to build user interfaces. Understanding the basics of components, JSX, props, state, and event handling is crucial for building React applications. As you become more familiar with these concepts, you can explore more advanced topics, such as routing, state management, and integrating with back-end services.

Back to