项目创建成功之后，会生成一个文件夹，文件夹里有很多文件，对文件进行简要介绍。
启动上次创建好的项目，在项目目录执行 npm start 进行启动。
执行命令之后，会自动启动一个本地服务器，运行 React 的源代码。访问 localhost:3000 默认端口地址，就可以进行访问。
以下是项目文件夹的主要文件：
package-lock.json：
这个文件主要是我们项目依赖的安装包的版本号和下载地址，这个文件一般不用操作。
README.md：
这个文件相当于是项目的说明文件。里面的东西基本上可以清空，然后写上自己项目的介绍之类的内容。md 后缀是 markdown 文件，一种记事本格式。
package.json：
这里有一些项目的资料，项目名称 name 、项目版本 version、是否是私有项目 private 、React 版本的一些内容 dependencies 、npm 命令设置 scripts 、配置文件 eslintConfig、浏览器列表 browserslist 。
package.json 是 node.js 的一个包管理文件。
.gitignore：
是控制使用 Git 上传文件时，哪些文件文件该上传到 Git 空间，哪些不用上传的配置。
node_modules 文件夹:
里面放的是下载好的依赖包文件，这里面的东西也不需要对它下手，把它当做是运行环境需要的文件就好。
public 文件夹：
这个文件夹里面有三个文件，分别是 favicon.ico、index.html、manifest.json：
浏览器打开 localhost:3000 会看到，在标签栏里有个小图标，你那个图标就是 favicon.ico 文件决定的。
这个小图标你可以自己设置。
index.html 是 localhost:3000 首页的模板，就是访问本地服务器时看到的那个页面。把模板里的注释删掉，会发现，一共只有 20 行不到的 html 标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<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>
里面有些内容还不知道意思暂时不需要管，到时候用到会讲。
src 文件夹：
这个目录是开发当中最重要的一个目录。里面放了整个项目中的所有源代码。
项目的入口文件是 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: http://bit.ly/CRA-PWA
serviceWorker.unregister();
为什么叫入口文件，因为整个项目都要从 index.js 文件开始执行。没有入口文件，我们整个项目就无法跑起来。
语法暂时不多介绍，在实战当中之后会做相应的解释。
Hellow React：
一个简单的 Hello React 其实只需要 App.js 、index.js 和 index.html 就可以实现，我们可以先把多余的文件都删掉，还有那些没必要的引入代码也删掉。
index.js :
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
App.js：
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<h1>Hello React</h1>
);
}
}
export default App;
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>
打开 localhost:3000 地址，会看到，我们修改好的 Hello React 就显示在了首页上。
公众号
网友评论