用create-react-app构建一个react项目

1. 检测node版本(需要>=6)

node -v

2. 检测npm版本(需要>=5.2)

npm -v

3. 检测yarn是否安装

 yarn -v

4. node?npm?yarn

   1. Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境
   2. npm全称是 Node Package Manager,就是node的包管理工具
   3. yarn 和npm类似,是为了弥补 npm 的一些缺陷而出现的

5. 安装create-react-app脚手架

 npm install -g create-react-app

6. 检测 create-react-app版本

 create-react-app --version

7. 打开vscode,创建项目文件夹,使用脚手架创建工程

 create-react-app app01

8. 进入到工程目录

 cd app05

9. 启动工程

 yarn start

10. 默认效果
    
11. 下面尝试实现自己的页面
12. 在/src下新建文件Hello.js

import React from 'react';
function Hello(){
     
    return(<div>
        <h1>hello,world!</h1>
    </div>);
}
export default Hello;

13. 在/src下新建文件Hello.css

h1 {
     
    color: blue ;
}

14. 打开inde.js,将工程默认渲染的页面改为Hello.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import Hello from './Hello';
import * as serviceWorker from './serviceWorker';

// ReactDOM.render(, document.getElementById('root'));
ReactDOM.render(<Hello />, document.getElementById('root'));

serviceWorker.unregister();

16. 最终效果
    
17. 介绍目录结构

• node_modules 第三方依赖也就是构建这个React项目可能会用到的工具
• public文件夹中是 index.html存放目录，也就是React根页面的所在地
• src 存放源代码,是项目开发中的主要区域
• package.json 模块项目的核心配置文件

18. 快速添加依赖,在本地 node_modules 目录安装 package.json 里列出的所有依赖

 yarn install

19. 开发流程
    1. 创建项目 create-react-app app01
    2. 启动项目 npm run start/ yarn start
       • react项目内置了一个静态服务器
       • 先启动了静态服务器
       • 然后将前端代码构建后部署到静态服务器中
    3. 编写代码
       • 如果代码发生了变化，会自动更新与部署