feat: add navigation articles for react

articles/building-apps/views/add-view/hilla.adoc

@@ -64,6 +64,8 @@ Defining the function name as `customersView` or `customerList` does not result
 
 The routing uses the React component's name for creating the default automatic title for the view. For example, the title for the `CustomersView` component is `Customers`, and the title for the `HelloWorldView` component is `Hello World`. This automatically-determined title is used when creating the navigation menu based on utilities from the routing API.
 
+Another important convention to consider while naming the views and directories is to use the `_` (underscore) character at the beginning of the file or directory name to instruct the routing system to ignore it. For example, a file named as `_AddressFormComponent.tsx` is ignored when creating routes for views. This is useful for creating utility files and reusable components that are not intended to be available as navigation targets.
+
 The details about the automatic title and the navigation menu are covered in more detail in the <<../navigate#,Navigate to a View>> guide.
 
 

articles/building-apps/views/navigate/hilla.adoc

@@ -0,0 +1,181 @@
+---
+title: React
+page-title: How to navigate to a view in React | Vaadin
+description: Learn how to navigate between React views in a Vaadin application.
+meta-description: This guide covers how to navigate to a React or Flow view in Vaadin applications, including creating links and programmatic navigation.
+order: 10
+---
+
+
+= Navigation in React
+
+In this guide, you'll learn how to use `<NavLink>` component and `useNavigate` hook of `react-router` to navigate between views. At the end, a mini-tutorial helps you to apply these concepts in a real Vaadin application.
+
+
+== Navigating Between Views Using Links
+
+The `<NavLink>` component from `react-router` renders a clickable link for navigation. In HTML, it corresponds to an anchor (`<a>`) element.
+
+[TIP]
+Links are preferable to programmatic navigation because they *improve accessibility*. They also allow users to open links in new browser tabs.
+
+
+For example, to create a link to a view located at `/some-view`, you can use the following code:
+
+[source,tsx]
+----
+import { NavLink } from 'react-router';
+
+<NavLink to="/some-view">Some View</NavLink>
+----
+
+This code creates a clickable link labeled "Some View" that navigates to the `/some-view` route when clicked.
+
+
+== Programmatic Navigation
+
+In some scenarios, you may need to navigate between views programmatically, such as after a form submission or in response to user interactions. For this you can use the `useNavigate` hook of `react-router` to achieve this.
+
+Here's an example of how to use `useNavigate` for programmatic navigation:
+
+[source,tsx]
+----
+import { useNavigate } from 'react-router';
+
+function MyComponent() {
+const navigate = useNavigate();
+
+  const handleClick = () => {
+    navigate('/target-view');
+  };
+
+  return (
+    <button onClick={handleClick}>
+      Go to Target View
+    </button>
+  );
+}
+----
+
+In the above example, clicking the button navigates the user to `/target-view`.
+
+
+== Flow Views
+
+To navigate from a React view to a Flow view that is implemented in Java, the same principles apply. You can use the `NavLink` component or the `useNavigate` hook to navigate to the Flow view.
+
+
+== Try It
+
+In this mini-tutorial, you'll learn how to navigate between React views using both *links* and *programmatic navigation*.
+
+
+First, generate a <<{articles}/getting-started/start#,walking skeleton with a React UI>>, <<{articles}/getting-started/import#,open>> it in your IDE, and <<{articles}/getting-started/run#,run>> it.
+
+
+=== Modify the Todo View
+
+Change the path of the `TodoView` to `todo`. The `TodoView` is stored in the file `@index.tsx` that is located directly under the `views` directory. To change its route to `/todo`, rename the file to `todo.tsx` so that the directory structure looks like this:
+
+[source]
+----
+views
+├── @layout.tsx
+├── _ErrorHandler.ts
+└── todo.tsx
+----
+
+This is a convenience step for having a simple and clear Main view for the next steps.
+
+
+=== Create the About View
+
+You'll start by creating a new view called `AboutView`. This view is going to be the target view of navigation in this mini-tutorial. In the `views` directory, create a new file named [filename]`about.tsx`:
+
+[source,tsx]
+.about.tsx
+----
+export default function AboutView() {
+    return <h1>About View</h1>;
+}
+----
+
+The path for this view is automatically resolved to `/about`, and users can access it by navigating to `\https://example.com/about`.
+
+=== Create a Main View
+
+Next, create a new main view. This view is going to be the source of navigation in this mini-tutorial. In the `views` directory, create a new file called `@index.tsx`:
+
+[source,tsx]
+[email protected]
+----
+export default function MainView() {
+    return <h1>Main View</h1>;
+}
+----
+
+=== Add a Link to the Main View
+
+Now, add a link that targets the `AboutView` from the `MainView`. In the `@index.tsx` file, add the following code:
+
+[source,tsx]
+[email protected]
+----
+import { NavLink } from 'react-router';
+
+export default function MainView() {
+    return (
+        <>
+            <h1>Main View</h1>
+            <NavLink to="/about">Link to About</NavLink>
+        </>
+    );
+}
+----
+
+This code creates a clickable link labeled "Link to About" that navigates to the `/about` route when clicked.
+
+=== Add a Button for Programmatic Navigation
+
+Now, add a button that navigates to the `AboutView` programmatically. In the `@index.tsx` file, change the codes to have the following code:
+
+[source,tsx]
+[email protected]
+----
+import { NavLink, useNavigate } from 'react-router';
+
+export default function MainView() {
+    const navigate = useNavigate();
+
+    const handleClick = () => {
+        navigate('/about');
+    };
+
+    return (
+        <>
+            <h1>Main View</h1>
+            <NavLink to="/about">Link to About</NavLink>
+            <button onClick={handleClick}>
+                Go to About
+            </button>
+        </>
+    );
+}
+----
+
+This code creates a button labeled "Go to About" that navigates to the `/about` route when clicked.
+
+=== Test the Navigation
+
+Now, run the application and navigate to the main view. You should see the "Link to About" link and the "Go to About" button. Clicking either of them should navigate you to the `AboutView`.
+
+
+== Final Thoughts
+
+You've now explored different ways to navigate between views. Here's what you've learned:
+
+* Creating a navigation link using `NavLink` component from `react-router` library.
+* Programmatically navigating using the `useNavigate` hook from `react-router` library.
+* Navigating between React views and Flow views.
+
+Now that you know how to navigate between views, check out the <<../pass-data#,Pass Data to a View>> guide to learn how to pass data to a view while navigating to it.