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 (
<div className="App">
</div>
);
}
}
//将App组件暴露
export default App;
以上是 React 开发环境搭建 的全部内容， 来源链接： utcz.com/z/382236.html
