DEV Community: Ansh Sheladiya

How to structure React project

Ansh Sheladiya — Wed, 10 Apr 2024 07:30:00 +0000

src
|
+-- assets            
|
+-- components        
|
+-- config           
|
+-- features          
|
+-- hooks             
|
+-- lib               
|
+-- providers         
|
+-- routes            
|
+-- stores            
|
+-- test              
|
+-- types             
|
+-- utils

components: Shared components that grace the entire kingdom
config: The vault of global configurations, env variables, and secrets
features: Feature based modules
hooks: Mystical hooks, shared across the entire realm
libs: re-exporting different libraries preconfigured for the application
providers: Keepers of the application’s life force, the providers
routes: routes configuration
stores: global state stores
test: The arena of trials, where utilities and mock servers prove their mettle
types: base types used across the application
utils: shared utility functions

Apollo GraphQL - Setup ReactJS

Ansh Sheladiya — Wed, 10 Apr 2024 07:16:48 +0000

1. Install Dependencies

npm install @apollo/client graphql

Configure Apollo Client

// index.js or App.js

import React from 'react';
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
import App from './App';

const client = new ApolloClient({
  uri: 'YOUR_GRAPHQL_ENDPOINT_URI',
  cache: new InMemoryCache()
});

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
);

Write GraphQL Queries

// queries.js

import { gql } from '@apollo/client';

export const GET_BOOKS = gql`
  query GetBooks {
    books {
      title
      author
    }
  }
`;

4. Use Query Component or Hooks
Using useQuery hook:

import React from 'react';
import { useQuery } from '@apollo/client';
import { GET_BOOKS } from './queries';

const BookList = () => {
  const { loading, error, data } = useQuery(GET_BOOKS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return (
    <div>
      {data.books.map((book, index) => (
        <div key={index}>
          <h3>{book.title}</h3>
          <p>{book.author}</p>
        </div>
      ))}
    </div>
  );
};

export default BookList;

Using Query component:

import React from 'react';
import { Query } from '@apollo/client/react/components';
import { GET_BOOKS } from './queries';

const BookList = () => (
  <Query query={GET_BOOKS}>
    {({ loading, error, data }) => {
      if (loading) return <p>Loading...</p>;
      if (error) return <p>Error :(</p>;

      return (
        <div>
          {data.books.map((book, index) => (
            <div key={index}>
              <h3>{book.title}</h3>
              <p>{book.author}</p>
            </div>
          ))}
        </div>
      );
    }}
  </Query>
);

export default BookList;

5. Mutations and Subscriptions

For mutations and subscriptions, you can use useMutation and useSubscription hooks respectively provided by Apollo Client.

Controlled and Uncontrolled components in react

Ansh Sheladiya — Wed, 10 Apr 2024 07:00:38 +0000

Controlled Component Example:
In a controlled component, the form data is handled by the React component's state. Each form input element has its value controlled by React state, and onChange event handlers are used to update the state whenever the input changes.

import React, { useState } from 'react';

const ControlledComponent = () => {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Submitted value:', value);
    // You can perform further actions like API calls, etc.
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        value={value} 
        onChange={handleChange} 
        placeholder="Enter text" 
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default ControlledComponent;

Uncontrolled Component Example:
In an uncontrolled component, the form data is handled by the DOM itself. We use refs to get the values of form inputs when needed.

import React, { useRef } from 'react';

const UncontrolledComponent = () => {
  const inputRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Submitted value:', inputRef.current.value);
    // You can perform further actions like API calls, etc.
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        ref={inputRef} 
        placeholder="Enter text" 
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default UncontrolledComponent;

TANSTACK

Ansh Sheladiya — Wed, 10 Apr 2024 04:49:38 +0000

High-quality open-source software for web developers

tanstack.com

The Config File Of Tailwind CSS

Ansh Sheladiya — Wed, 10 Apr 2024 04:30:37 +0000

module.exports = {
  // Paths to scan for classes to purge unused styles in production builds
  purge: ['./src/**/*.html', './src/**/*.js'],

  // Configuration for dark mode
  darkMode: 'class', // 'class' will enable dark mode by adding a class to the <body>, can also be 'media' or 'false'

  // Theme customization
  theme: {
    extend: {
      // Extend default color palette with custom colors
      colors: {
        primary: '#FF0000',
        secondary: '#00FF00',
      },
      // Extend default font family with custom fonts
      fontFamily: {
        sans: ['Roboto', 'sans-serif'],
      },
    },
  },

  // Variants customization
  variants: {
    extend: {
      // Extend variants for backgroundColor utility class to include responsive, hover, focus, and active states
      backgroundColor: ['responsive', 'hover', 'focus', 'active'],
    },
  },

  // Additional plugins to enhance Tailwind's functionality
  plugins: [
    require('@tailwindcss/forms'), // Plugin for styling form elements
    require('@tailwindcss/typography'), // Plugin for styling typography
  ],
}