react学习笔记（一）

目标：掌握react项目的搭建方式，了解目录结构

一、安装基本环境

前提：安装了Node和npm ，如果网速不优秀可以用cnpm代理，

就是在命令行执行这样一句：npm config set registry https://registry.npm.taobao.org，这方面的帖子很多

安装：官网上提供yarn和npm两种安装方式

1.用yarn：

yarn init
yarn add react react-dom

2.用npm:

npm init
npm install --save react react-dom

使用：create-react-app自动构建工具，这是官网建议使用的.看名字很像是自定义的某app名，其实它就是个工具，帮助我们自动构建react前端工程，生成目录

命令：npm install create-react-app -g。使用cnpm就是 cnpm install create-react-app -g

二、构建项目

使用：使用刚刚下载的工具

命令：create-react-app 自定义项目名

注意：第一次我尝试用驼峰命名法定义项目名，命令行提示错误，最终命名为react-first-test，成功了

注意：

1.当命令执行之后，会看到项目文件夹下 已经又了 node-modules文件夹并且各种依赖已经存在，就省了例如npm install这样的步骤，它都自动做好了

2.官网上说，如果版本大于等于6，可以像上面命令这样写；如果npm版本是5.2.0+的话，使用的命令是

npm create-react-app my-app

三、运行项目

使用：在项目路径下，用npm 启动工程，然后在浏览器中就能打开

命令：npm start

效果：提示compiled successfully.就是编译成功了

查看：在浏览器输入http://localhost:3000/，回车运行即可

四、目录结构解析

一、node_modules 存放下载的依赖包

二、public文件夹

1.favicon.ico是浏览器tab上图标，也是这个项目的一个标志，也可以说是代表一个公司的标志。可以替换。

2.index.html是项目的入口文件，引用了第三方类库啊，还可以引入cdn.  <div id="root"></div>是项目的总容器，所有的内容存储在这个容器中。这个容器有且只能有一个。各个页面上出现的ducumeng.getElementById('root')就是这个元素；默认对应的js是src/index.js

3.manifest.json当web页面被用于Android主页面使用时的配置文件

三、src文件夹

1. App组件系列文件 注意：引用样式采用就近原则，例如在App.js中import 'App.css',就有限使用App.css的样式
2. index.css是全局样式
3. index.js是入口页面index.html默认对应的，在其中引用其他组件（比如默认目录是App组件），把它渲染到root项目容器