目标简述

• 简单了解React
• Props传值
• 组件之间的交互

开发者工具

使用vscode开发

搭建环境创建项目

1.安装node.js和npm

2.使用create-react-app创建项目并运行

1.在dos命令窗口，指定文件目录，输入命令npx create-react-app react_01

2.出现以下内容，表示项目创建成功。

3.输入cd react_01

4.启动命令npm start

3.在vscode编辑器中启动

1.vscode打开文件夹，选择创建的项目

2.选择终端-->新建终端

3.在终端栏输入命令npm start

项目目录简介

关于项目目录的简介，我挑几个自己认为重要的，我按照自己理解的去说，哪里描述的不够准确，希望在评论指出。。。谢谢。。。

1. src

src是source的简写，简单的说就是我们写的页面功能代码都在这个目录下边

1. package.json

项目的配置文件，里面主要是项目的启动打包命令，安装的依赖及其他

例如上面用到的npm start就是

1. package-lock.json

作为package.json的补充

1. node_modules

安装的依赖，一些工具和组件

1. public

下面讲代码带过。

目前为止，我们准备的环境项目都搭建好了，也成功运行起来了。下面开始小游戏的代码开发。

代码开发

正式开始之前，先对示例的代码稍微点下。

为什么页面打开的时候首页展示是这样的内容呢，那么这个页面是怎么搭建的呢？

弄懂这两个问题，对后面学习帮助很大，不然的话代码跟着敲了好几天，甚至做出来东西，还说不出个所以然来。

页面展示的内容，一定是这个目录下，我们一起跟踪下。

我首先打开src目录下的index.js文件，对于刚开始学习的人来说，确实看不懂，但是也大概能看出来首先加载的不会是后缀为.js的文件。

src/index.js

然后打开public目录下的index.html，发现title对应上了，而且还有个提示，那应该是这个文件不会错

重点来了，div的root好像是个空的，说明首页加载的时候，还有另外一个js给index.html渲染了dom。按照这个思路，能发现上src/index.js加载的时候做了渲染这个事情。

下面看下index.js

从上往下依次看，最醒目就是./index.css，毫无疑问，这个一定是引入样式，react和react-dom就是react相关的功能组件，App是个什么现在看不出来，另外一个我很少用，看英文注释，像是类似可以把运行性能状况输出到控制台中，可以暂时不用。从document.getElementById('root')可以看出来，是对div为root做了操作，继续点App，看到了熟悉的一幕

分别是log，文字，链接，看起来这个就是页面的数据来源了。

定义了一个App函数，定义了这几个dom元素。那么与前面就连起来了

render 方法的返回值描述了App函数定义的元素。React 根据描述，然后把结果展示出来。更具体地来说，render 返回了一个 React 元素。大多数的 React 开发者使用了一种名为 “JSX” 的特殊语法，语法 <div /> 会被编译成 React.createElement('div')。

因为是开始，所以宁愿多花点时间在开头把简单的东西捋顺了，而不是急着敲代码，后面学起来才更容易。今天先这样吧，后面持续更新。。。