初始化一个React项目保姆级全过程

根据这个教程下来，应该可以大致了解React项目基于Nextjs框架的搭建与结构。这些东西看似简单，但对于入门者来说需要一段时间去摸索尝试才能理清思路。前期的搭建反而不算难事，后期了解结构之后就可以进行开发啦！！！

Xu1030

3065人浏览 · 2024-12-10 22:27:05

Xu1030 · 2024-12-10 22:27:05 发布

基础环境准备

Nodejs，一个快速的npm
如果还没有安装的话可以看看之前这篇:
2024最新版Node.js详细安装教程（含npm配置淘宝最新镜像地址）

使用Nextjs搭建

中括号内为自己项目的名字，此处括号不用填！

npx create-next-app@latest [项目名]

比如我要创建my-web，那么就是

npx create-next-app@latest my-web

经典提问环节：（此处偏向初学者教程，追求比较纯粹简单的JavaScript与React）

D:\React>npx create-next-app@latest my-next-app
√ Would you like to use TypeScript? ... No / Yes	//建议No，这里相当于强类型的JavaScript。可以后续再学
√ Would you like to use ESLint? ... No / Yes		//建议Yes，开发规范，不规范会报错
√ Would you like to use Tailwind CSS? ... No / Yes	//建议Yes，后续方便CSS设置多一个快捷方法
√ Would you like your code inside a `src/` directory? ... No / Yes	//建议Yes，项目结构好看，源代码在src之下
√ Would you like to use App Router? (recommended) ... No / Yes		//建议Yes，路由管理容易，体现在网页打开界面
√ Would you like to use Turbopack for next dev? ... No / Yes		//建议No，因为还不是很稳定
√ Would you like to customize the import alias (@/* by default)? ... No / Yes	//建议Yes，缺省路径方便，不用也没事
√ What import alias would you like configured? ... @/*		//直接Enter回车即可，这里是自定义缺省符，默认就好了
Creating a new Next.js app in D:\React\my-next-app.

一会后就创建完成啦！

进入文件里看看(还是注意括号内为自己项目的名字，此处括号不用填！)

cd [项目名]

比如我之前创的是my-web，那么就是

cd my-web

分支：是否要使用React19？

截止2024/12/09，按照前面这个步骤下载的是React19项目。但很多组件库嘛都似乎对React18的支持更加稳定一点，于是我们想要使用React18的同志们可以在此处降级。

查询React版本：（注意前面要先cd进到项目内）
```
npm list react
```
大概率是这样子:
更改React版本：
```
npm install react@18 react-dom@18
```
检查:
```
npm list react
```
大概率变成了这样子:
那么我们的React18项目就构建好啦！！！

进来看看

启动你的文本编辑器后打开刚创建好的文件，选package-json，点击dev旁边的运行
在这里插入图片描述

然后点击下方控制台输出的链接，一般来说是http://localhost:3000，看到这个页面就已经成功啦！

还需要做什么？

在休息之前，我们可以先趁着这个劲把可能需要的组件库配好，岂不快哉？！

安装 Tailwind CSS，配合组件库和自己使用非常爽

一行安装，十分优雅:
```
npm install -D tailwindcss postcss autoprefixer
```
保险起见，确认一下:
```
npx tailwindcss init
```
看到这样说明可以了：

魔术 UI Magic UI，一个很流行的组件库

也是优雅地一行安装：

npx shadcn@latest init

问你三个问题：

√ Which style would you like to use? » Default					//选Default比较自由点
√ Which color would you like to use as the base color? » Slate	//我喜欢Slate简洁点。选择不纠结，CSS可以调
√ Would you like to use CSS variables for theming? ... no / yes	//Yes，灵活一些

后续如何引入Magic UI组件，这里给一个地址，更方便看

Aceternity UI Aceternity UI，一个黑科技库

还是优雅，前端的轮胎店是真的方便：

npm i framer-motion clsx tailwind-merge

添加一些配置到项目中的tailwind.config.js之中，直接按我的复制粘贴可能比较快，如果出错了就删掉再用npx tailwindcss init

const {
    default: flattenColorPalette,
} = require("tailwindcss/lib/util/flattenColorPalette");

/** @type {import('tailwindcss').Config} */
module.exports = {
    darkMode: ["class"],
    content: [
        "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
        "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
        "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    ],
    theme: {
        extend: {
            colors: {
                background: 'hsl(var(--background))',
                foreground: 'hsl(var(--foreground))',
                card: {
                    DEFAULT: 'hsl(var(--card))',
                    foreground: 'hsl(var(--card-foreground))'
                },
                popover: {
                    DEFAULT: 'hsl(var(--popover))',
                    foreground: 'hsl(var(--popover-foreground))'
                },
                primary: {
                    DEFAULT: 'hsl(var(--primary))',
                    foreground: 'hsl(var(--primary-foreground))'
                },
                secondary: {
                    DEFAULT: 'hsl(var(--secondary))',
                    foreground: 'hsl(var(--secondary-foreground))'
                },
                muted: {
                    DEFAULT: 'hsl(var(--muted))',
                    foreground: 'hsl(var(--muted-foreground))'
                },
                accent: {
                    DEFAULT: 'hsl(var(--accent))',
                    foreground: 'hsl(var(--accent-foreground))'
                },
                destructive: {
                    DEFAULT: 'hsl(var(--destructive))',
                    foreground: 'hsl(var(--destructive-foreground))'
                },
                border: 'hsl(var(--border))',
                input: 'hsl(var(--input))',
                ring: 'hsl(var(--ring))',
                chart: {
                    '1': 'hsl(var(--chart-1))',
                    '2': 'hsl(var(--chart-2))',
                    '3': 'hsl(var(--chart-3))',
                    '4': 'hsl(var(--chart-4))',
                    '5': 'hsl(var(--chart-5))'
                }
            },
            borderRadius: {
                lg: 'var(--radius)',
                md: 'calc(var(--radius) - 2px)',
                sm: 'calc(var(--radius) - 4px)'
            }
        }
    },
    plugins: [require("tailwindcss-animate")],
};

搞定后别忘了格式化一下代码： Ctrl+Alt+/
引入Aceternity UI的方法应组件而变，所以建议访问Aceternity UI

（推荐但暂时没必要）Motion - A modern animation library for JavaScript and React Motion，以前的Framer Motion，做动画做得很顶尖的一个库。但我们现在还是先留意框架，语法，细节。到需要动画时再回过头来学，以免一去不回走了歪路。

站上山顶，俯瞰结构

直接看图说话：
在这里插入图片描述

当然，此处还都是Nextjs帮我们创建的结构。我们要想创建界面/路由，还需要进一步设置。

创建路由与界面

如何新建界面？

此处比较简单，你可以在app文件夹下创建一个目录(也叫文件夹)，名字就是你想要给新界面起的名字。再在这个目录下创建一个page.jsx，这个页面与之前的主页面不一样了，对应的是新界面，你也可以同样地添加一个page.module.css文件来为新界面添加样式。（module.css是模块化css，建议先这样导入不容易乱）

比如此处我想新建一个technology页面，那么先创一个文件夹，再对应添加上css和page.jsx
在这里插入图片描述

如何使用路由?

路由（App Router）实际上就是指网页资源路径，和URL相关。Next.js 路由基于文件系统，也就是说，URL 和文件结构是一一对应的。不用觉得路由很高大上，可以理解为分岔路口，为不同页面区分通道。这里来个例子大概就懂啦，刚开始会使用就行·
举个例子，比如当前你运行这个刚新建好的项目，网址默认为：http://localhost:3000，打开的是你的page.js，也就是主页。如果你想要跳转到自己新建的页面，比如刚刚创建的technology，那么只需要在网址后添加/technology，（即http://localhost:3000/technology）Nextjs就会自动打开这个页面。当然，此方法只用于开发者刚开始初始化调试使用，用户并不知道网站的每个路由叫什么，因此在后续开发中需要用到一些组件或者功能，让用户可以无缝衔接使用你的每个页面。
在这里插入图片描述

小结

根据这个教程下来，应该可以大致了解React项目基于Nextjs框架的搭建与结构。这些东西看似简单，但对于入门者来说需要一段时间去摸索尝试才能理清思路。前期的搭建反而不算难事，后期了解结构之后就可以进行开发啦。望每个小白都可以快速入门React项目，并自由地探索自己的想法与技术。XuIsSharing！！！希望能陪你更远！