react应用搭建-记录

基本要求

如果你有使用其他SPA框架或者库的经验，应该已经非常熟悉Web开发的基本内容。如果是刚开始学习Web开发，在学习React之前，你应该要先了解一下HTML、CSS和JavaScript ES6。

Node和NPM

node是基于Chorme V8引擎的JavaScript运行环境，比如浏览器也是JavaScript的运行环境。

npm是node.js包管理和分发工具，也是node.js默认的包管理器，用于node.js包的发布、传播、
依赖控制。npm提供了命令行工具，可以方便的下载、安装、升级、删除包，也可以让你作为开发这发布并维护包。

nodean安装略过…

React应用创建

安装react初始化套件

npm install -g create-react-app

你可以通过检查create-react-app得版本来验证是否安装成功

create-react-app --version
//执行后显示版本号，如：5.0.1

如果版本号有成功显示出来，那么你就可以创建你的第一个react应用了。我把它命名为react-demo，你也可以选择其他的名字。创建过程需要花费一点时间。创建完成后，直接切换到该文件夹。

//创建
create-react-app react-demo
等待创建完成后，切换到react-demo
cd react-demo

创建完成

现在你可以在编辑器打开这个目录。类似是下面的文件结构（根据你的create-react-app版本不同，可能另有差距）。

 README.md
 node_modules/
 package.json
 .gitignore
 public/
   favicon.ico
   index.html
   manifest.json
 src/
   App.css
   App.js
   App.test.js
   index.css
   index.js
   logo.svg
   registerServiceWorker.js

简单划分一下这些文件和文件夹：

• README.md： 后缀为.md表示这是一个markdown文件。是一个纯文本创建格式化文档得标记语言，很多源代码项目包含一个README.md文件，其中包含了这个项目的的基本指令和介绍。当你把项目发布到一些平台得时候就能直接看到README.md里面的内容，比如Github，现在这个文件中的内容是创建时的默认内容，你可以自由编辑。
• mode_modules这个文件夹包含了所有通过 npm 安装的 node 包。在你使用了 create-react-app 之后，就有一堆 node 包已经被安装了。通常你不需要特别去关心这个文件夹里面的内容，只需要在命令行用 npm 安装或者卸载 node 包就可以。
• package.json： 这个文件包含了 node 包依赖列表和一些其他的项目配置
• .gitignore： 这个文件包含了所有不应该添加到 git 仓库（repository）中的文件和文件夹，他们只存在你本地项目文件夹中。典型的例子就是node_modules/,只要有package.json就足够其他人获取和安装所有的依赖了，没必要把整个以来打包共享出去。
• public/： 这个文件夹包含了所有你的项目构建出的产品文件。最终所有你写在 src/ 文件夹里面的代码都会在项目构建的时候被打包放在 public 文件夹下
• manifest.json： 和 registerServiceWorker.js: 在这个阶段不用管这些文件用来干什么，现在这个阶段还用不到他

你不需要去修改上面的这些文件和文件夹，现在首要关注的是实现 React 组件的 src/App.js 文件。它主要用于实现你的应用，不过之后你可能会把你的组件分离到多个文件中，其中每个文件来维护一个或者多个特定的组件。

create-react-app创建的是一个npm项目。你可以通过npm来给你的项目安装和卸载node包。另外安装之后还附带了几个npm脚本：

// 在 http://localhost:3000 启动应用(在端口被占用时会提示你是否使用其他端口运行项目)
npm start
// 运行
npm test
// 构建项目的产品文件
npm run build

现在可以使用npm start运行这个项目了，项目运行成功之后你可以在浏览器中访问http://localhost:3000/访问这个项目

效果如下：