React 实践

项目地址：还没创建

至少要知道的知识

HTML、CSS、JavaScript、npm 包管理器、了解 ReactRouter@5

首先了解 React 是什么，有什么优势

JavaScript library used to create websites
Allows us to easily create Single Page Apps - SPA's for short

通过组件化开发

组件化提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用
任何的应用都会被抽象成一颗组件树

react router

导航和链接：React Router 提供了导航和链接组件，可以方便地在应用程序中进行页面之间的导航。

React Router 提供了一种灵活而强大的方式来管理应用程序的路由，使得构建单页应用程序更加简单和高效。

环境准备

代码环境：VSCode

安装插件：Simple React Snippets
安装浏览器插件：
设置：Add Emmet: item=javascript; value=javascriptreact

安装 node.js

官网：Node.js (nodejs.org) 点击下载安装

初始化工程环境

创建 react-app，名为 test

$ npx create-react-app test
$ cd test

安装过程可能要挺久的，先玩会儿原神

安装好了，能看到这样的结构

分析一下，我把目前用的上的选上然后解释

然后还要记得安装 router 使用 @5 版本

$ npm install react-router-dom@5

开始开发

本次开发一个简单的博客页面，以此了解以下 React 的组件化

将页面分为导航栏和内容栏，要实现的功能如下:

点击导航栏 Home 回到主页面 http://localhost:3000/
点击 NewBlog 能来到一个写博客页面 http://localhost:3000/create
点击一个博客，能来到博客的具体内容 id为博客的唯一标识 http://localhost:3000/blogs/2

化繁为简

由于本次实践为了了解 React 的组件化功能，样式先准备好了，把这些数据复制到 index.css
index.css - 掘金 (juejin.cn) 然后记得 import index.css到 index.js

import ./index.css

对了，就是但凡要用到外面文件的东西，都要 import，有点像 c 语言的 #include
同时写好的文件也要export 函数名，这样外部才能调用到他

从index.html 和 index.js 解析 React 结构

index.html 在body 中只有一个 div id = root 的盒子
index.js

通过 getElementById 选择到那个在 index.html 中的id = "root" 盒子，然后注意，在 root.render ()里面写的是 jsx 有点类似于 HTML 对吧

React 使用 JSX 来替代常规的 JavaScript。
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

总之就是有点像在js中写的一种 xml ，在js中写html，所以这就是整个项目目录中只有一个index.html且他基本不用动，因为我们的html都写在了js中了

好了，继续看render 里面的内容，<React.StrictMode></ReactStrictMode> 里面包裹了 <APP />，所以我们知道，我们后面所有写的代码都在app.js里面，且是以严格模式执行的，就是说我们看到了 <APP /> ，那么我们就移步到 app.js 吧

app.js

可以看到这里面的app函数返回了一些jsx值，这是我们初始化react的时候默认写好的，我们可以运行这个项目看看

$ npm run start

现在我们来重写这里面的东西：
我们最终要实现的页面是这样的：

我们先把大致的框架写出来：

// app.js
<div className="App">
      <Navbar />
      <div className="content">myblogs</div>
</div>

然后我们就是把各个组件写好了

Navbar.js

将导航栏先写好

// 新建一个 Navbar.js (也在src目录下)
import { Link } from "react-router-dom/cjs/react-router-dom";

const Navbar = () => {
  return (
    <nav className="navbar">
      <h1>Kingston blog</h1>
      <div className="links">
        <Link to="/">Home</Link>
        <Link to="/create" style={{
          color: "white",
          backgroundColor: '#f1356d',
          borderRadius: '8px'
        }}>New blog</Link>
      </div>
    </nav>
  );
}

export default Navbar;

运行一下，项目跑的很好：

Home.js

home 页面是主界面，它用来展示博客的简略信息，通过点击博客跳转到具体的博客页面

要展示博客简略信息（标题、作者）我们需要获取从一个 db.json 文件信息,db.json 放在test/data下, db.json - 掘金 (juejin.cn)

然后在 8000 端口跑起来

npx json-server --watch data/db.json --port 8000

有了数据，我们还要写一个 useFetch 方法来读取信息
新建 ./useFetch 方法

在 home 中调用 useFetch 方法，将 8000 端口传入，就能得到数据了

// 新建 home.json 页面
import BlogList from "./BlogList";
import useFetch from "./useFetch";

const Home = () => {
  const { data: blogs, isPending, error } = useFetch('http://localhost:8000/blogs');

  return (
    <div className="home">
      {error && <div>{error}</div>}
      {isPending && <div>Loading...</div>}
      {blogs && <BlogList blogs={blogs} title="All Blogs" />}
    </div>
  );
}

export default Home;

然后就是我们将 blogs 数据传入BlogList.js，将这个组件加载到 home 组件中就完成了

// BlogList.js
import { Link } from "react-router-dom/cjs/react-router-dom.min";

const BlogList = ({ blogs, title, handleDelete }) => {
  return (
    <div className="blog-list">
      <h2>{title}</h2>
      {blogs.map((blog) => (
        <div className="blog-preview" key={blog.id}>
          <Link to={`/blogs/${blog.id}`}>
            <h2>{blog.title}</h2>
            <p>Written by {blog.author}</p>
          </Link>
        </div>
      ))}
    </div>
  );
}

export default BlogList;

总结

页面总算写好了，现在我们就能看到具体的页面了

具体的功能实现下一篇文章再写

浅尝 React | 青训营