Hello React!

项目创建成功之后，会生成一个文件夹，文件夹里有很多文件，对文件进行简要介绍。

启动上次创建好的项目，在项目目录执行 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 标签。

里面有些内容还不知道意思暂时不需要管，到时候用到会讲。

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(, 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(, document.getElementById('root'));

App.js：

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      Hello React
    );
  }
}

export default App;

index.html：



  
    
    
    
    
    React App

打开 localhost:3000 地址，会看到，我们修改好的 Hello React 就显示在了首页上。

公众号