React 项目初始化

2022-07-27

字数统计: 1.5k字 | 阅读时长≈ 6分

前言

作为一个合格的程序员，只会 Vue 框架是不够的，况且现在好多公司在用 React ，所以我们还是来一起学习一下 React 吧。同样，会从项目初始化开始，做一个 React 系列的文章。
我们可以使用 Create React App 快速初始化一个 React 项目，Create React App 是一个官方支持的创建 React 单页应用程序的方法。
首先，我们需要保证本地的 Node 版本在 6+ ，以及 npm 版本在 5.2+

创建项目

官方给出了三种快速创建应用的命令，我们来看一下：

npx

1	$ npx create-react-app ProjectName

npm

1	$ npm init react-app ProjectName

Yarn

1	$ yarn create react-app ProjectName

这里，我们使用第一种方式快速开始吧。

1	$ npx create-react-app reactDemo

首先，npx 来自 npm 5.2+ ,所以这就是为什么我们需要保证本地 npm 版本在 5.2+ 了。
其次，npx 还能避免全局安装的模块，这也就说明了，为什么我们不需要全局安装 create-react-app 这个模块。
我们在执行上面的命令行时，npx 会将 create-react-app 下载到一个临时目录，使用之后再删除。所以以后每次执行上面的命令都会重新下载 create-react-app。
执行完命令后，我们会得到一个名为 reactDemo 的目录，它的目录结构如下：

reactDemo
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── serviceWorker.js
    └── setupTests.js

官方有如下的一段说明：

If you’ve previously installed create-react-app globally via npm install -g create-react-app, we recommend you uninstall the package using npm uninstall -g create-react-app or yarn global remove create-react-app to ensure that npx always uses the latest version.

意思是，如果你使用 npm install -g create-react-app 命令行全局安装过 create-react-app ，建议执行 npm uninstall -g create-react-app 或 yarn global remove create-react-app 命令删除，以保证 npx 是最新版的。

启动项目

1 2	$ cd reactDemo $ npm start

我们进入到 reactDemo 目录下，执行 start 命令，就可以启动项目了。

添加 TypeScript

现在越来越多的项目开始使用 TypeScript 来进行开发了，这里我们不过多的介绍 TypeScript 的优势，我们直接在项目中引入 TypeScript 。
由于我们已经搭建好了一个 React 项目了，所以我们可以执行以下命令直接安装 TypeScript

1	$ npm install --save typescript @types/node @types/react @types/react-dom @types/jest

1	$ yarn add typescript @types/node @types/react @types/react-dom @types/jest

假如，我们还没有搭建 React 项目，官方给出了以下命令，可以在搭建项目的同时把 TypeScript 引入：

1	$ npx create-react-app my-app --template typescript

install 之后，我们需要把文件重命名为 TypeScript 文件，如：src/index.js to src/index.tsx，并且重新启动项目。

添加 Router

Create React App 并没有规定特定的路由解决方案，但是 React Router 是一个比较受欢迎的方案，接下来，我们先添加 React Router 吧。

1	$ npm install --save react-router-dom

1	$ yarn add react-router-dom

安装完 React Router 之后，我们来把 App.js 文件改写一下。这里先写一个简单的页面跳转，后续会详细讲解一下 React Router。

import {
    BrowserRouter as Router,
    Routes,
    Route,
    Link
} from "react-router-dom";

export default function App() {
    return (
        <div className="App">
            <header className="App-header">
                <p>
                   Learn React
                </p>
            </header>
            <Router>
                <Link to='/'>Home</Link>
                <Link to='/about'>About</Link>
                <Routes>
                    <Route path="/" element={<Home/>}/>
                    <Route path="/about" element={<About/>}/>
                </Routes>
            </Router>
        </div>
    );
}
/*
* 这里展示了两种方式写组件，哪种方式都可以
* */
function Home() {
    return (
        <div>
            <h2>Home</h2>
        </div>
    );
}
const About = () => {
    return <div>About</div>
}

这里，我们简单的写了两个组件 Home 和 About ，项目启动之后，我们可以看到页面有 2 个路由，可以进行切换。
先来简单看下 Link Router Routes 和 Route 的区别吧

Router 可以看作是一个路由盒子，我们把路由以及路由组件都放在这个标签里
Link React 中点击切换到哪一个组件的链接，呈现一个可访问的 a 元素， to 是路径
Route 表示你的路由页面，path 是路径，element 是组件名
Routes 替换了老版本里的 Switch

这样，一个简单的 React 路由跳转就实现了。

添加 Axios

接下来再安装 Axios ，这样我们的 React 项目最基本的就完成了，就可以进行路由跳转以及数据请求了

安装

1	$ npm install axios --save

引入

1	import axios from 'axios'

之后就可以使用 Axios 进行数据请求了。我们还是在 App.js 中去写一个请求数据的实现

import {
    BrowserRouter as Router,
    Routes,
    Route,
    Link
} from "react-router-dom";
import  axios  from 'axios'

export default function App() {
    function getData(){
        var  api='https://www.api.com';
        axios.get(api)
            .then(function (response) {
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            });
    }
    return (
        <div className="App">
            <header className="App-header">
                <p onClick={getData}>
                    Learn React
                </p>
            </header>
            <Router>
                <Link to='/'>Home</Link>
                <Link to='/about'>About</Link>
                <Routes>
                    <Route path="/" element={<Home/>}/>
                    <Route path="/about" element={<About/>}/>
                </Routes>
            </Router>
        </div>
    );
}

function Home() {
    return (
        <div>
            <h2>Home</h2>
        </div>
    );
}
const About = () => {
    return <div>About</div>
}

这样，一个最基础的 React 项目就初始化成功了。但是，实际写项目的时候，我们往往会进行一系列的封装、分层，所以后续会出 React 的架构设计。

本文作者： Gladysdrea
本文链接： https://gladysdrea.github.io/blogs/2022/07/27/React系列/react项目初始化/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！