React Basics，一个前端项目。
#css #初学者 #react #hooks

旅程

大约两个月前开始学习编码是一段旅程，并且测试了一个人在几周内可以学到多少信息，以收集一些基础知识，以在主题领域组建一个工作项目多年掌握。学习JavaScript基本面是为下一阶段的React做准备。正如React充满挑战的那样，这绝对令人惊奇，因为React的库库可以为开发人员做能力，并允许他们为客户提供愉快的体验。下面的项目只是反应可以做什么的样本，随着更多技能的发展，想象力以及理解将成为未来创建的项目的催化剂。

十二生肖项目

它看起来并不多，但是黄道带项目是一个简单的单页应用程序，可以显示一些数据并可以跟踪我们所调用的日记帐帖子。

Project gif

简而言之，这是一个水疗中心，它具有多个路线，其中有一些显示的图像，用于发布新日记帐条目的表格以及一种搜索特定日记帐分录的方式。

钩子

在构建这个项目时，有几个非常有用的钩子内置在React中。 USESESTATE和使用效果使我们能够具有控制表格，导航到提交的另一页，跟踪过滤后的输入，并从DB.JSON渲染信息。

const [zodiac, setZodiac] = useState([]);

useEffect(() => {
    fetch("http://localhost:3000/western_zodiac")
    .then(response => response.json())
    .then(zodiacList => setZodiac(zodiacList))
    .catch(error => alert(error))
    },[])

上面的代码获取信息并在状态传递后将其作为卡组件传递后的页面。在此项目中，来自DB.JSON文件有2个提取调用。一个用于页面上的十二生肖符号和信息，另一个用于渲染日记帐分录容器中的帖子。这些组件是通过更新页面加载和“发布” CRUD操作时通过更新状态渲染的。

const [query, setQuery] = useState("")

const filteredPosts = showJournalEntry.filter
    (post => 
post.post.toLowerCase().includes(query) || post.title.toLowerCase().includes(query) || post.date.toLowerCase().includes(query)
)

post

上面的代码允许页面跟踪搜索值的状态并过滤匹配目标的帖子。当用户输入 /邮政路径顶部的搜索栏输入时，正在进行的状态更新将根据用户搜索的内容进行更新和重新渲染页面。

const navigate = useNavigate()

 const handleSubmit = (e) => {
        e.preventDefault();
        navigate("/post", {replace: true})

nav
表单提交后，上面的代码使用“帖子” CRUD操作导航到帖子容器页面。提交后能够导航到另一页可以证明是非常有用的工具。这是“/邮政路线”的简单导航。

Usenavigate Hook将用户从“/post/new”到“/post”。

提交给用户。

hooray

image blah

反应路由器

React Router版本6用于创建该项目。路线是该项目的新工具。使用React路由器允许多个通往单个页面应用程序的路径，以一次仅渲染页面的某些部分。

<Routes>
        <Route path="/" element={ <Home /> } />
        <Route path="/zodiac" element={ <ZodiacContainer zodiac={zodiac} /> } />
        <Route path="/zodiac/:id" element={ <ZodiacCard  /> } />
        <Route path="/post/new" element={ <JournalEntryForm setShowJournalEntries={setShowJournalEntries}/> } />
        <Route path="/post" element={ <JournalEntryContainer showJournalEntry={filteredPosts} query={query} setQuery={setQuery}/> } />
        <Route path='/*' element={<NotFound />}/>
      </Routes>

通过使用React中的路由，创建了网站上的导航，可以为用户提供愉快的体验。如果在基于Web的应用程序中寻找特定的内容，则使用RESTFUL路由约定可以更轻松地找到一些东西。

navbar

使用NAVBAR可以轻松在水疗中心进行导航。有了一些简单的#CSS造型，制作按钮看起来简单而专业。 

.navButton{
  width: 80%;
  border-radius: 10px;
  box-shadow: 4px 4px rgb(117, 6, 117);
}

一个简单的按钮#CSS样式

十二生肖项目仅进行一些非常简单的路线并创建动态页面。 React Router允许用户策划特定的体验，使用户可以按开发人员打算以开发人员的方式消化网站的内容。

综上所述

使用React作为框架是前端开发中的强大工具，并可以提供舒适的用户体验。该项目是许多踏脚石中第一个开发更复杂应用程序的项目。随着React库中不断变化的内容，有很多东西要学习。创建的越多，从经验中学到的就越多。该项目已完成，并进入下一个项目。

tldr：制作了一个反应项目，它可以获取东西，您可以用它来保存您的工作。