React 开发环境搭建

React 开发环境搭建：

1.安装nodejs
（安装nodejs稳定版本
https://nodejs.org/dist/v8.11.2/node-v8.11.2-x64.msi
odejs.org/dist/v8.11.2/node-v8.11.2-x86.msi）

2.安装好node之后，在cmd中检查版本 node –v
安装完node之后npm页会自动安装，检查版本 npm –v

3.安装cnpm，代替npm
在百度上搜索cnpm，找淘宝镜像（http://npm.taobao.org/）

在当前页面上下拉找：

复制去cmd安装cnpm

安装完成之后，检查版本 cnpm –v
输出以下为安装完成：

安装yarn 依赖工具（https://yarn.bootcss.com/）
在中文官网里面有windows安装yarn的方式。

4.简单安装yarn：cnpm install -g yarn 或 npm install –g yarn

5.安装完成之后，检查yarn的版本 yarn –v

6.创建React 开发环境 官方文档（https://reactjs.org/）

安装脚手架：cnpm install -g create-react-app 或 npm install –g create-react-app

脚手架安装完成之后 创建项目 （自己选择文件的位置）（我默认项目文件盘）

7.cmd命令窗口切换到E盘：进入你创建的目录

8.输入创建项目的命令 create-react-app reactdemo
项目创建完成之后，会在你的项目目录里面生成你创建的文件

Cmd命令框下拉 下面的指令提示你项目文件的运行、编译等等功能

9.Cd到项目里面
cd reactdemo01
npm start 或者yarn start 运行
npm run build 或者yarn build 生成项目

10.运行之后

React项目创建成功

11.目录分析
Src文件为开发文件（对src文件进行开发整理）
其他文件可以先不管

• package-lock.json

这个文件主要是我们项目依赖的安装包的版本号和下载地址，这个文件一般不用操作。包括项目名称 name 、项目版本 version、是否是私有项目 private 、React 版本的一些内容 dependencies 、npm 命令设置 scripts 、配置文件 eslintConfig、浏览器列表 browserslist 。package.json 是 node.js 的一个包管理文件。

• README.md

这个文件相当于是项目的说明文件。里面的东西基本上可以清空，然后写上自己项目的介绍之类的内容。md 后缀是 markdown 文件，一种记事本格式。

• .gitignore

是控制使用 Git 上传文件时，哪些文件文件该上传到 Git 空间，哪些不用上传的配置。

• node_modules 文件夹

里面放的是下载好的依赖包文件，这里面的东西也不需要对它下手，把它当做是运行环境需要的文件就好。

• public 文件夹

这个文件夹里面有三个文件，分别是 favicon.ico、index.html、manifest.json

浏览器打开 localhost:3000 会看到，在标签栏里有个小图标，你那个图标就是 favicon.ico 文件决定的。

index.html 是 localhost:3000 首页的模板，就是访问本地服务器时看到的那个页面

• src文件  

index.js值项目的主入口文件，整个项目都要从 index.js 文件开始执行

App.js是主组件入口

整理前的文件夹目录:

整理后的文件夹目录

分析App.js组件 

//引入react对象，import后边的声明：React是整个react对象（当前对象的属性）
import React, { Component } from 'react';
//引入当前组件的的css脚本
import '../assets/css/App.css';

//ES6中的类继承写法
//class声明类   extends继承
class App extends Component {
  //render方法值渲染模板界面    有返回值且返回的是一个对象， render  里面的元素只能有一个根节点
  render() {
    return (
      

       
      
    );
  }
}
//将App组件暴露
export default App;