轻松地建立一个现代的工作清单网站，该网站使用React，Vite和Tailwind CSS建立

Creating a modern, efficient and effective job listing website requires the use of up-to-date technology, such as React, Vite, and Tailwind CSS. In this article, we will guide you through setting up the development environment and creating a job listing website using these technologies.

I.建立开发环境

在我们开始之前，您将需要node.jsandVite安装在计算机上。这些工具的安装过程可以在其各自的文档网站上找到。

After we install the tools, we will create a new project using Vite by using the command below:

NPM创建Vite@最新

然后，我们将获得要使用的库，在这里我们将使用React，因此请选择React和JavaScript。

成功创建了您的React项目后，下一步是安装尾风CSS。Tailwind CSS是一种公用事业第一的CSS框架，可轻松有效地造型您的Web应用程序。

要安装Tailwind CSS，您需要在项目目录中运行以下命令：

NPM安装-D parwindcss Postcss autoprefixer

npx tailwindcss init -p

安装尾风CSS后，下一步是配置它以匹配项目的设计系统。这可以通过编辑尾风来完成。config.cs文件。

这是尾风的示例。配置后的config.cs文件可能看起来像：

您也可以在index.css文件上导入CSS

之后，下一步是使用以下命令来编译JS：

NPM运行开发

That’s correct, after configuring Tailwind CSS and adding it to your project, the next step is to start building the components that you need for your job listing website.

II. Building the user interface

在这里，我们将使用Tailwind CSS创建一个用户界面，在开始之前，我们定义其中的组件：

标题组件，我们将为标头创建一个组件以及标题上的背景图像。您可以检查下面的代码：

2. Background Component, then we will create a background component to put the background image file for the header

3.在创建全部创建标头的组件之后，下一步是为页脚部分创建一个组件。这是页脚组件的代码：

4.我们已经完成了页脚组件，下一步是创建作业列表组件，我们将在构建工作列表时创建两个组件，即Joblist和JobCard。这是宜伯的代码：

解释：

在代码中，某些数据作业道具可用于持有从应用程序接收的作业数据。JSX。
数据作业将被循环并调用其中的工作板组件，以便我们可以显示作业数据。

5. Job Card Component, kita akan membuat komponen untuk menampilkan informasi dari pekerjaan seperti gambar, judul, tools, informasi tanggal, tempat, dan bahasa pemrograman. Kodenya bisa kamu lihat dibawah ini:

最后，我们创建了几个组件，在构建工作清单网站的UI时需要这些组件，下一步是我们将创建数据和功能以显示作业数据。

iii。添加功能

1。Preparing data

在第一步中，我们将通过将其输入到名为data.json的JSON文件中来准备工作列表数据，以下是数据的内容。

2.将状态添加到应用程序。JSX

Next, we will create a new state in the App. jsx component and compose the UI component that we have previously created. Here is the complete code:

Explanations

有一个工作状态，可用于持有工作清单数据。
有一个称为过滤器的状态，该状态可用于以工具，语言，级别和角色信息的形式持有工作信息。然后使用FilterFuncfunction.
已创建的状态将插入带有Props名称过滤Jobs的宽带组件中。

3.在Jobcard.jsx中显示作业详细信息和标签

在此步骤中，我们将尝试显示通过该应用程序中的道具发送的作业信息和标签。JSX，因此在JobCard组件中添加一些代码如下：

4. Joblist.jsx中的处理职位道具

最后一步是，将joblist.jsx文件中的代码更改为这样，以使用循环显示：

在我们创建了多个使用状态处理数据的功能之后，最后一步是我们将通过：

NPM运行开发

然后，我们的代码的显示如下：

Congratulations, we can finally create a job listing website using React, Vite, and TailwindCss. The next step is to deploy it on the server so that the website that we will create can be seen by many people.

iv。结论

By following the steps outlined in this article, you should now have a solid understanding of how to set up a development environment for building a job listing website using React, Vite, and Tailwind CSS.

您已经学会了如何使用Vite和Tailwind CSS作为CSS超集。我们还学习了如何在React和使用状态数据中创建组件来存储有关作业清单的信息。您还可以在提供的GitHub存储库上看到完整的代码https://github.com/bangadam/job-listing-react-vite-tailwind

重要的是要记住，这只是一个基本指南，这些技术还可以做更多的事情。我建议您探索所使用的工具和库的文档，并尝试构建一个更复杂的应用程序。

If you run into any issues or have questions about the code or process, you can refer to the GitHub repository or reach out for help. Good luck building your job listing website!