从零开始创建 React 应用 第一部分：设置
由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！
本文是“从零开始创建 React 应用”系列文章的预览部分，您可以在https://www.codespot.org找到其他部分。
系列介绍
由于 React 目前是最热门的前端技术之一，我决定开设一个系列课程，旨在向大家展示如何从零开始创建一个完整的 React js 应用。如今，大多数前端应用都用于展示从后端服务获取的实时数据，因此我认为创建一个加密货币单页应用会很有意义，该应用可以显示从后端服务获取的加密货币价格和历史图表。
注意：要学习本 ReactJS 系列课程，您应该具备 JavaScript 编程语言的一些基础知识，如果您了解 ES6 则更好。
设置 React
在开始设置 ReactJS 应用之前，首先需要在计算机上安装 Node.js。要检查 Node.js 是否已安装，请在 Windows 系统中打开终端或 PowerShell，然后输入：
node -v
如果这里显示的是 node 版本，您可以跳过安装部分；否则，您应该打开nodejs.org，在那里您可以找到最新版本的 node.js。
设置 React js 很简单。首先，我们将应用命名为 crypto-app。接下来，打开终端并指定应用存放的文件夹路径。要创建一个 React 项目，我们需要使用以下命令：
npx create-react-app crypto-app
如果你愿意，可以随意给你的应用取个别的名字，但我这里会把应用命名为 crypto-app。
几秒钟后，设置过程会完成，并显示一些关于我们新 React 应用的信息。现在，当我们在应用目录下时，就可以使用以下命令了：
npm start #starts the development server
npm run build #bundles the app into static files for production
npm test #starts the test runner
要启动我们的开发服务器，首先，我们需要使用命令进入项目文件夹cd crypto-app，进入项目文件夹后，我们最终可以使用命令启动开发服务器npm start，我们的浏览器将在 localhost:3000 为我们打开应用程序，在那里我们应该会看到 React 欢迎屏幕。
React 文件结构
要打开我们的 React 项目，我们需要使用文本编辑器或 IDE。如果您还没有安装任何编辑器，可以查看我关于“五款最佳文本编辑器”的文章。在文本编辑器中打开项目后，我们可以看到一些配置文件和文件夹。
- node_modules - contains all node dependencies
- public - public files that are served
- src - source code of our ReactJS app
.gitignore - record which files should git ignore
package-lock.json - contains an exact, versioned dependency tree
package.json - contains various metadata relevant to the project
README.md - readme markdown file
首先，我们来看一下 public 文件夹。这里有一个重要的文件，那就是index.html。这是一个普通的 HTML 页面，属于单页 HTML 项目，也就是说，我们不会在这个项目中添加更多的 HTML 文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
注：我已经删除了注释，这样文件看起来会更简洁一些，因为它其实并不像看起来那么复杂。
如果您需要添加任何输入、库（例如 CSS）或元标签，都可以在此文件中进行操作。关于此文件，您最需要记住的是，它<div id="root"></div>是 React 应用程序的挂载点。
另一个值得关注的地方是src文件夹。打开src文件夹后，我们可以看到里面有几个文件，这些文件就是我们的 React 应用。其中最重要的文件是 .js 文件index.js。让我们看看它长什么样：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
这里的ReactDOM.render(<App />, document.getElementById('root'));方法会渲染我们的 React 应用。第一个参数是<App />组件（我们稍后会深入探讨 React 组件，现在你可以把它想象成某种元素），它已在文件顶部导入。第二个参数用于访问 DOM 中的根元素，也就是之前在 public 文件夹中看到的 HTML 文件。
现在让我们打开这个App.js文件，这是我们目前唯一的 ReactJS 组件。
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
这里我们看到的是 JSX 代码（稍后我们会了解它是什么），现在，我们将删除包装 div 中的所有内容，同时删除顶部的 logo 导入，然后添加一个 h1 标签用于测试，并在其中输入文本：Hello, World!，然后保存它！
import React from 'react';
import './App.css';
function App() {
return (
<div className="App">
<h1>Hello, World!</h1>
</div>
);
}
export default App;
App.js
由于npm start命令正在运行，这将自动触发重新编译，并自动重新加载您的页面（localhost:3000），您现在将看到“Hello, World”，而不是之前的内容。我们也可以删除该logo.svg文件，因为它不再需要了。最后，让我们看看可用的两个 CSS 文件，App.css我们将删除其中除第一个.App类之外的所有内容。
.App {
text-align: center;
}
App.css
其余文件serviceWorker.js与渐进式 Web 应用有关，还有一些文件与单元测试有关。
部分概述
在本部分中，我们已经了解了如何从头开始创建 React 应用程序，也了解了新创建的 React 应用程序的项目结构，最后，我们还调整了一些组件。
课程代码可在 GitHub 上找到：从零开始创建 React 应用，分支为：01-setting-up。
下一部分：从零开始创建 React 应用 第 2 部分：组件化。
文章来源：https://dev.to/vasilevskialeks/create-react-app-from-scratch-part-1-setting-up-4b3g