react入门与实战（一）：引言和环境的搭建

这篇文章所包含的内容如下，方便检索：
运用CRA脚手架快速创建react项目

目的

不知不觉也接触react一年零2个月了，早俩年其实一直是用到vue(2)开发，总是听到别人来对比说啥 react好还是vue好，听人说再多，不如实际拉出来溜溜，这就是我去年这会想要学习react的初衷。写这篇博客主要是给自己留个小纪念，一个总结，是查漏补缺的机会，也希望能给一些想要入门react的小伙伴给点思路，假如写的不好，欢迎大家指点。

大纲

• 创建一个react项目
• 介绍写JSX及其生命周期
• 如何在react中编写组件（类组件以及函数式组件）
• react中组件之间的内部通信
• 介绍下react的高阶组件以及传送门
• 如何使用react-router
• 结合react跟react-router，如何做到H5项目的框架搭建
• react hook、redux、mobx、dva等（后续看效果再决定是否加入）

---

正文

创建一个react项目

创建react项目/应用的方法有很多，本文直接通过CRA（create-react-app的简称）脚手架快速构建项目。

前置要求:
需要电脑安装有node环境
打开命令行终端（不懂如何打开的可以百度或者私聊哈，应该算是计算机基础）
在命令行终端直接输入 node -v
正常输出版本号即表明node环境OK，不然需要去下载一个nodejs
建议大家尽量让自己的node版本控制在10+，也可以使用nvm快速切换node版本

安装Node> = 10（即能保证npm 5.2+ =》 自带npx）

// 利用npx快速构建一个最新的项目名称为[my-app-test01]的react项目
// npx作用是在不需要安装全局脚手架的情况下获取到当前最新版本的cra
// 耐心等待几分钟。。。图1所示
npx create-react-app my-app-test01 
// 安装成功 如图2所示
// 进入my-app-test01 目录
cd my-app-test01 
// 启动项目 默认端口号3000，如被占据，输入提示Y即可打开空闲端口号
npm start

1.png

2.png

3.png

如果npx因为npm版本太低导致无法使用，而你又不想升级node以及npm的话，可以使用
npm install -g create-react-app
create-react-app my-app-test01 来创建项目，当然不是很建议

npx下载依赖过程报错，建议检查下网络环境

4-成功跑起项目.png

react项目目录简介

create-react-app 提供了开发React应用所需的工具。它的初始文件结构如下：
当前react版本为@17.0.1、 [email protected]

my-app-test01
├── .git                       // git目录文件
├── README.md                  // 项目说明文件
├── node_modules               // 项目依赖文件 
├── package.json               // Node.js/npm为了建立该应用程序所管理着的文件信息
├── package-lock.json          // Node.js/npm为了建立该应用程序所管理着的文件信息
├── .gitignore                 // git忽略文件
├── public                     // 包含开发项目时浏览器读取的文件
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── robots.txt
│   └── manifest.json
└── src                         // 源码目录，也就是我们接下来操作最多的目录文件
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

现在我们已经大概了解了通过CRA创建的react项目的文件结构，接下来我们可能需要根据自己的习惯进行相关文件的挪动以及修改，这就因人而异了。

favicon.ico
logo192.png
logo512.png
robots.txt
manifest.json
serviceWorker.js
这几个看需要删除，这里我暂且不做处理

接下来我们模仿vue-cli的结构，大概做下资源路径的调整，如下：

my-app-test01
├── .git 
├── README.md
├── node_modules 
├── package.json
├── package-lock.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── robots.txt
│   └── manifest.json
└── src
    ├── assets +
       ├── css +
           └── index.css +
       ├── img +
          └── logo.svg +
       └── js +
    ├── component +
    ├── libs +
    ├── router +
    ├── views +
        └── Test +
          ├── App.css +
          ├── App.js +
          └── App.test.js +
    ├── App.css -
    ├── App.js -
    ├── App.test.js -
    ├── index.css -
    ├── index.js m
    ├── logo.svg -
    └── serviceWorker.js

如图所示

修改后的项目结构

好了，现在的文档结构看的比较顺眼了，页面归页面，样式归样式，也有了主入口index.js，现在让我们来最后看一下三个重点文件的关键点。

1. src/index.js 项目代码主入口，作用跟vue的main.js相仿
2. src/views/Test/App.js当前页面代码
3. public/index.html单页index.html

// src/views/Test/App.js导出App.js
export default App;

// src/index.js
import App from './views/Test/App';
// 在ID为root的容器中渲染App内容
ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);

// public/index.html

好了，以上就是关于创建react项目的所有内容，接下来我们尝试做一下修改App.js里面的内容

// src/views/Test/App.js
// line.18
Learn React，从现在开始

改完后，发现浏览器热更新，页面修改成功，大功告成。

尝试修改文案

项目demo我会上传到GitHub，大家有需要可自行download

---

参考链接：
react
create react app
nodejs
npx
GitHub-demo