Lembaran Cheat React.js Komprehensif untuk Pembangun

React.js telah menjadi asas dalam pembangunan web moden untuk membina aplikasi web yang dinamik dan berprestasi tinggi. Helaian panduan komprehensif ini akan merangkumi semua yang anda perlu ketahui untuk menguasai React.js, termasuk contoh praktikal, coretan kod dan penjelasan terperinci tentang semua ciri. Matlamatnya adalah untuk menyediakan panduan mendalam yang boleh anda rujuk pada bila-bila masa.

1. Pengenalan kepada React

React.js, selalunya hanya dirujuk sebagai React, ialah perpustakaan JavaScript sumber terbuka yang digunakan untuk membina antara muka pengguna, terutamanya untuk aplikasi satu halaman yang anda perlukan pengalaman pengguna yang pantas dan interaktif. Dibangunkan oleh Facebook, React membenarkan pembangun mencipta aplikasi web yang besar yang boleh mengemas kini dan menghasilkan dengan cekap sebagai tindak balas kepada perubahan data.

Konsep teras React ialah komponen, iaitu modul serba lengkap yang menghasilkan beberapa output. Komponen boleh disarang, diurus dan dikendalikan secara bebas, menjadikan proses pembangunan cekap dan boleh diselenggara.

2. Bermula dengan React

Menyediakan Persekitaran

Sebelum bermula dengan React, anda perlu menyediakan persekitaran pembangunan. Begini caranya:

1. Pasang Node.js dan npm: React bergantung pada Node.js dan npm (Pengurus Pakej Node) untuk mengurus kebergantungan.

• Muat turun dan pasang Node.js daripada tapak web rasmi.

• Sahkan pemasangan dengan menjalankan:
  

   node -v
   npm -v
  

  Salin selepas log masuk

1. Pasang Apl Buat React: Apl Buat Reaksi ialah persekitaran yang selesa untuk mempelajari React dan cara terbaik untuk memulakan aplikasi satu halaman baharu dalam React.
   

   npm install -g create-react-app
   

   Salin selepas log masuk

Mencipta Apl React Baharu

Setelah persekitaran disediakan, anda boleh membuat aplikasi React baharu.

1. Buat Projek Baharu:
   

   npx create-react-app my-app
   cd my-app
   npm start
   

   Salin selepas log masuk

Arahan ini mencipta direktori baharu dengan nama yang ditentukan (apl saya), menyediakan projek React baharu dan memulakan pelayan pembangunan. Anda boleh membuka penyemak imbas anda dan pergi ke http://localhost:3000 untuk melihat aplikasi React baharu anda.

3. Komponen Bertindak balas

Komponen ialah bahan binaan bagi mana-mana aplikasi React. Mereka membenarkan anda membahagikan UI kepada bahagian bebas yang boleh diguna semula.

Komponen Berfungsi

Komponen fungsian ialah fungsi JavaScript yang menerima prop sebagai hujah dan mengembalikan elemen React. Ia lebih ringkas dan lebih mudah untuk ditulis berbanding komponen kelas.

import React from 'react';

const Welcome = ({ name }) => {
  return <h1>Welcome, {name}!</h1>;
};

export default Welcome;

Komponen Kelas

Komponen kelas ialah kelas ES6 yang memanjangkan React.Component dan mempunyai kaedah render yang mengembalikan elemen React.

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Welcome, {this.props.name}!</h1>;
  }
}

export default Welcome;

Perbezaan Antara Komponen Fungsian dan Kelas

• Pengurusan Negeri: Komponen berfungsi menggunakan cangkuk (useState, useEffect, dsb.) untuk pengurusan keadaan, manakala komponen kelas menggunakan kaedah this.state dan kitaran hayat.

• Kaedah Kitar Hayat: Komponen kelas mempunyai kaedah kitaran hayat seperti componentDidMount, componentDidUpdate dan componentWillUnmount. Komponen berfungsi menggunakan cangkuk useEffect untuk mengendalikan kesan sampingan.

• Kesederhanaan: Komponen berfungsi lebih ringkas dan kurang bertele-tele, menjadikannya lebih mudah dibaca dan diselenggara.

4. JSX

JSX ialah sambungan sintaks yang membolehkan anda menulis HTML terus dalam JavaScript. Ia menghasilkan "elemen" React.

Sintaks JSX

JSX kelihatan seperti HTML tetapi diubah menjadi JavaScript.

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

Membenamkan Ungkapan

Anda boleh membenamkan sebarang ungkapan JavaScript dalam JSX dengan membungkusnya dalam pendakap kerinting.

const name = 'John';
const element = <h1>Hello, {name}!</h1>;

Atribut JSX

JSX membenarkan anda menggunakan atribut dengan sintaks yang serupa dengan HTML.

const element = <img src={user.avatarUrl} alt={user.name} />;

5. Negeri dan Props

Memahami Negara

State ialah objek terbina dalam yang menyimpan nilai harta yang dimiliki oleh komponen tersebut. Apabila objek keadaan berubah, komponen itu dipaparkan semula.

Menguruskan Negeri dengan useState Hook

Kait useState digunakan untuk menambah keadaan pada komponen berfungsi.

import React, { useState } from 'react';

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

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

export default Counter;

Memahami Props

Props ialah hujah yang dihantar ke dalam komponen React. Props dihantar ke komponen melalui atribut HTML.

Melepasi Props

Prop adalah baca sahaja dan tidak boleh diubah.

const Greeting = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

const App = () => {
  return <Greeting name="Alice" />;
};

Jenis Prop dan Prop Lalai

PropTypes membolehkan anda menentukan jenis prop yang harus diterima oleh komponen. Prop lalai boleh ditakrifkan untuk memastikan prop akan mempunyai nilai jika ia tidak dinyatakan.

import React from 'react';
import PropTypes from 'prop-types';

const Greeting = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};

Greeting.defaultProps = {
  name: 'Guest',
};

export default Greeting;

6. Component Lifecycle

Lifecycle Methods in Class Components

Lifecycle methods are special methods in class components that run at specific points in a component's life.

• componentDidMount: Executed after the component is rendered.

• componentDidUpdate: Executed after the component's updates are flushed to the DOM.

• componentWillUnmount: Executed before the component is removed from the DOM.
  

class MyComponent extends React.Component {
  componentDidMount() {
    // Runs after component is mounted
  }

  componentDidUpdate(prevProps, prevState) {
    // Runs after component updates
  }

  componentWillUnmount() {
    // Runs before component is unmounted
  }

  render() {
    return <div>My Component</div>;
  }
}

Using useEffect Hook

The useEffect hook combines the functionalities of componentDidMount, componentDidUpdate, and componentWillUnmount.

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

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

  useEffect(() => {
    // Runs on mount and update
    document.title = `You clicked ${count} times`;

    // Cleanup function (runs on unmount)
    return () => {
      console.log('Cleanup');
    };
  }, [count]); // Dependency array

  return (
    <div>
      <p>You

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

export default MyComponent;

7. Handling Events

Event Handling in React

React events are named using camelCase, rather than lowercase. With JSX, you pass a function as the event handler, rather than a string.

const handleClick = () => {
  console.log('Button clicked');
};

const MyComponent = () => {
  return <button onClick={handleClick}>Click me</button>;
};

Synthetic Events

React's event system is known as Synthetic Events. It is a cross-browser wrapper around the browser's native event system.

Handling Forms

Handling forms in React involves controlling the input elements and managing the state.

import React, { useState } from 'react';

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

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

  const handleSubmit = (event) => {
    event.preventDefault();
    alert('A name was submitted: ' + value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={value} onChange={handleChange} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
};

export default MyForm;

Event Handler Best Practices

• Avoid inline event handlers: Define event handlers outside of the JSX for better readability and performance.

• Use Arrow Functions: Use arrow functions to avoid issues with this binding.

• Debounce Expensive Operations: Debounce expensive operations like API calls to avoid performance issues.

8. Conditional Rendering

if-else Statements

You can use JavaScript if-else statements inside the render method.

const MyComponent = ({ isLoggedIn }) => {
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <h1>Please sign in.</h1>;
  }
};

Ternary Operators

Ternary operators are a concise way to perform conditional rendering.

const MyComponent = ({ isLoggedIn }) => {
  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>}
    </div>
  );
};

Logical && Operator

You can use the logical && operator to include elements conditionally.

const MyComponent = ({ isLoggedIn }) => {
  return (
    <div>
      {isLoggedIn && <h1>Welcome back!</h1>}
    </div>
  );
};

Inline If with Logical && Operator

Inline if with logical && operator allows you to conditionally include an element in the output.

const Mailbox = ({ unreadMessages }) => {
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
};

9. Lists and Keys

Rendering Lists

You can build collections of elements and include them in JSX using curly braces {}.

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

const NumberList = () => {
  return (
    <ul>{listItems}</ul>
  );
};

Using Keys

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.

const NumberList = (props) => {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
};

Keys Must Only Be Unique Among Siblings

Keys used within arrays should be unique among their siblings.

function Blog(props) {
  const sidebar = (
    <ul>
      {props.posts.map((post) =>
        <li key={post.id}>
          {post.title}
        </li>
      )}
    </ul>
  );
  const content = props.posts.map((post) =>
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );
  return (
    <div>
      {sidebar}
      <hr />
      {content}
    </div>
  );
}

10. Forms and Controlled Components

Handling Form Data

Handling form data in React involves managing the state of the form fields.

import React, { useState } from 'react';

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

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

  const handleSubmit = (event) => {
    event.preventDefault();
    alert('A name was submitted: ' + value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={value} onChange={handleChange} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
};

export default MyForm;

Controlled vs Uncontrolled Components

Controlled components are those that are controlled by React state. Uncontrolled components are those that maintain their own internal state.

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Using Refs for Uncontrolled Components

Refs provide a way to access DOM nodes or React elements created in the render method.

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.input = React.createRef();
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.current.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={this.input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Form Validation

Form validation ensures that user inputs are valid.

const MyForm = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    if (!name || !email) {
      setError('Name and Email are required');
    } else {
      setError('');
      // Submit form
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {error && <p>{error}</p>}
      <label>
        Name:
        <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      </label>
      <label>
        Email:
        <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
};

export default MyForm;

11. React Router

React Router is a library for routing in React applications. It allows you to handle navigation and rendering of different components based on the URL.

Setting Up React Router

1. Install React Router:
   

   npm install react-router-dom
   

   Salin selepas log masuk

2. Set Up Routes:
   

   import React from 'react';
   import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
   
   const Home = () => <h2>Home</h2>;
   const About = () => <h2>About</h2>;
   
   const App = () => {
     return (
       <Router>
         <Switch>
           <Route exact path="/" component={Home} />
           <Route path="/about" component={About} />
         </Switch>
       </Router>
     );
   };
   
   export default App;
   

   Salin selepas log masuk

Route Parameters

You can use route parameters to capture values from the URL.

import React from 'react';
import { BrowserRouter as Router, Route,

 Switch, useParams } from 'react-router-dom';

const User = () => {
  const { id } = useParams();
  return <h2>User ID: {id}</h2>;
};

const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/user/:id" component={User} />
      </Switch>
    </Router>
  );
};

export default App;

Nested Routes

Nested routes allow you to render sub-components within a parent component.

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link, useRouteMatch } from 'react-router-dom';

const Topic = ({ match }) => <h3>Requested Topic ID: {match.params.topicId}</h3>;

const Topics = ({ match }) => {
  let { path, url } = useRouteMatch();
  return (
    <div>
      <h2>Topics</h2>
      <ul>
        <li>
          <Link to={`${url}/components`}>Components</Link>
        </li>
        <li>
          <Link to={`${url}/props-v-state`}>Props v. State</Link>
        </li>
      </ul>
      <Switch>
        <Route exact path={path}>
          <h3>Please select a topic.</h3>
        </Route>
        <Route path={`${path}/:topicId`} component={Topic} />
      </Switch>
    </div>
  );
};

const App = () => {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/topics">Topics</Link>
          </li>
        </ul>
        <hr />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/topics" component={Topics} />
        </Switch>
      </div>
    </Router>
  );
};

export default App;

Redirects and Navigation

You can use the Redirect component to redirect to a different route programmatically.

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';

const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Redirect from="/old-path" to="/new-path" />
      </Switch>
    </Router>
  );
};

export default App;

12. Context API

The Context API provides a way to pass data through the component tree without having to pass props down manually at every level.

Creating Context

To create a context, use React.createContext.

const MyContext = React.createContext();

Consuming Context

To consume a context value, use the useContext hook in functional components or Context.Consumer in class components.

const MyComponent = () => {
  const value = useContext(MyContext);
  return <div>{value}</div>;
};

Context with Functional Components

const MyComponent = () => {
  return (
    <MyContext.Provider value="Hello">
      <AnotherComponent />
    </MyContext.Provider>
  );
};

const AnotherComponent = () => {
  const value = useContext(MyContext);
  return <div>{value}</div>;
};

Updating Context

To update context, create a provider component with state.

const MyProvider = ({ children }) => {
  const [value, setValue] = useState('Hello');
  return (
    <MyContext.Provider value={{ value, setValue }}>
      {children}
    </MyContext.Provider>
  );
};

const MyComponent = () => {
  const { value, setValue } = useContext(MyContext);
  return (
    <div>
      {value}
      <button onClick={() => setValue('Updated Value')}>Update</button>
    </div>
  );
};

Context Best Practices

• Avoid overusing context: Use context sparingly and only for global data.

• Use multiple contexts: Separate concerns by using multiple contexts.

• Memoize context values: Use useMemo to avoid unnecessary re-renders.

13. Hooks

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

Basic Hooks (useState, useEffect)

• useState: Adds state to functional components.

• useEffect: Performs side effects in functional components.

Additional Hooks (useContext, useReducer)

• useContext: Accesses context values.

• useReducer: Manages complex state logic.
  

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <div>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

Custom Hooks

Custom hooks are functions that encapsulate logic and can be reused across components.

const useFetch = (url) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => setData(data));
  }, [url]);

  return data;
};

const MyComponent = () => {
  const data = useFetch('https://api.example.com/data');
  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
};

Rules of Hooks

• Call hooks at the top level: Do not call hooks inside loops, conditions, or nested functions.

• Only call hooks from React functions: Call hooks from functional components or custom hooks.

14. Higher-Order Components (HOC)

Higher-Order Components (HOC) are functions that take a component and return a new component.

Understanding HOCs

HOCs are used to add additional functionality to components.

const withLogging = (WrappedComponent) => {
  return (props) => {
    console.log('Rendering', WrappedComponent.name);
    return <WrappedComponent {...props} />;
  };
};

Creating HOCs

const EnhancedComponent = withLogging(MyComponent);

Using HOCs

const MyComponent = (props) => {
  return <div>My Component</div>;
};

const EnhancedComponent = withLogging(MyComponent);

HOC Best Practices

• Do not mutate the original component: Return a new component.

• Use display names for debugging: Set displayName on the HOC for better debugging.

15. Error Boundaries

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI.

Implementing Error Boundaries

Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.log(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

Catching Errors

Error boundaries catch errors in the render method and in lifecycle methods.

const MyComponent = () => {
  throw new Error('An error occurred');
  return <div>My Component</div>;
};

const App = () => {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
};

Error Boundaries Best Practices

• Use error boundaries to catch errors in components: Use error boundaries to catch and display errors in UI components.

• Log errors for debugging: Log errors to external services for debugging.

16. React Performance Optimization

Memoization

Memoization helps to avoid re-rendering components unnecessarily.

import React, { memo } from 'react';

const MyComponent = memo(({ value }) => {
  return <div>{value}</div>;
});

Code Splitting

Code splitting helps to load only the necessary code and improve performance.

import React, { Suspense, lazy } from 'react';

const OtherComponent = lazy(() => import('./OtherComponent'));

const MyComponent = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </Suspense>
  );
};

Lazy Loading

Lazy loading helps to load components only when they are needed.

import React, { Suspense, lazy } from 'react';

const Other

Component = lazy(() => import('./OtherComponent'));

const MyComponent = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </Suspense>
  );
};

useMemo and useCallback

• useMemo: Memoizes expensive calculations.

• useCallback: Memoizes functions.
  

const MyComponent = ({ value }) => {
  const memoizedValue = useMemo(() => {
    return computeExpensiveValue(value);
  }, [value]);

  const memoizedCallback = useCallback(() => {
    doSomething(value);
  }, [value]);

  return (
    <div>
      {memoizedValue}
      <button onClick={memoizedCallback}>Click me</button>
    </div>
  );
};

React Developer Tools

Use React Developer Tools to identify performance bottlenecks.

17. Testing in React

Jest and React Testing Library

Jest and React Testing Library are popular tools for testing React components.

Writing Tests

• Snapshot Testing: Capture the rendered component and compare it with a saved snapshot.

• Unit Testing: Test individual components and functions.

• Integration Testing: Test the integration between components and services.
  

import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';

test('renders MyComponent', () => {
  render(<MyComponent />);
  const element = screen.getByText(/My Component/i);
  expect(element).toBeInTheDocument();
});

18. React Best Practices

Component Structure

• Organize components by feature: Group related components together.

• Use descriptive names: Use clear and descriptive names for components and props.

• Keep components small: Break down large components into smaller, reusable components.

State Management

• Lift state up: Lift state to the nearest common ancestor.

• Gunakan Konteks untuk keadaan global: Gunakan API Konteks untuk pengurusan keadaan global.

Penggayaan

• Gunakan Modul CSS: Gunakan modul CSS untuk gaya berskop dan modular.

• Gunakan komponen gaya: Gunakan komponen gaya untuk penggayaan dinamik.

Prestasi

• Elakkan pemaparan semula yang tidak perlu: Gunakan memoisasi dan alat pengoptimuman prestasi terbina dalam React.

• Gunakan Pemisahan Kod: Pisahkan kod anda untuk memuatkan komponen yang diperlukan sahaja.

Menguji

• Tulis ujian komprehensif: Tulis ujian untuk semua bahagian kritikal aplikasi anda.

• Gunakan ujian syot kilat: Gunakan ujian syot kilat untuk menangkap perubahan yang tidak diingini.

Kesimpulan

React.js ialah perpustakaan yang berkuasa untuk membina aplikasi web moden. Dengan memahami dan menggunakan konsep terasnya, anda boleh membina aplikasi yang cekap, boleh diselenggara dan berskala. Helaian panduan ini berfungsi sebagai panduan komprehensif untuk membantu anda menguasai React.js, merangkumi segala-galanya daripada konsep asas kepada topik lanjutan.

Atas ialah kandungan terperinci Lembaran Cheat React.js Komprehensif untuk Pembangun. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!