用编辑器打开之前我们创建的这个 React 项目 ... atom ./

node_modules 这里存储的就是项目依赖的一些东西 .. react 本身 .. webpack .. babel，还有它们依赖的一些其它的东西 ... 项目的依赖在 package.json 这个文件里说清楚了 ..

开发依赖这里，只有一个 react-scripts ，在这个包里会说清楚 react 项目需要的所有的工具 ..

dependencies 是项目的依赖 .. 这里有 react ... 还有 react-dom ...

这个项目的下面，有个 public 目录，一般公开的资源都会放在这个目录的下面 .. 现在这里有个 favicon.ico ... 还有一个 index.html ..

src 表示 source ，应用的源 ..

index.js 是应用的入口文件 ... 文档的头部先导入了一些东西 ... 比如React，ReactDOM ... 这些是一般的 React 项目必须要用的一些东西 ..

下面的 App 是定义好的一个 React 组件 ... 然后还导入了一个 css 文件 ...

在下面又用了 ReactDOM 的 render 方法，显示了一个组件 ... 就是在上面导入进来的 App 组件 ...

再打开这个 App.js

在这个文件里定义了一个叫 App 的组件 ... 这个组件在浏览器上显示的这些东西 ..

文件的一开始，导入进来两个东西，一个是 React，还有一个 Component ，定义 React 组件需要用到这个 Component ..

下面导入进来一个 logo.svg ... 它就是这里的这个 React 标志 ...

在它的下面，又导入进来一个 css 文件 .. 在这个文件里定义了组件里面需要用到的一些 css 样式 ...

继续再看这个 App.js

一个 React 组件可以是一个类 .. 这个类继承了 React 里面的 Component ...

在这个类里，用了一下 render 方法 ... 它返回了组件里要显示的一些东西 ..

这里你会看到一些像 html 的东西，但是又有点区别，比如在 html 的上面，添加 css 类，用的是 class，这里用的是 className ... 因为这些并不是 html .. 是一种特别的格式，叫 JSX .. React 会把它们转换成正常的 JavaScript ...

文件的最后，导出来上面定义的这个 React 组件 ... 这样你就可以在其它的地方，导入并且使用这个 React 组件了 ..