项目创建成功之后,会生成一个文件夹,文件夹里有很多文件,对文件进行简要介绍。
启动上次创建好的项目,在项目目录执行 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
就显示在了首页上。