react开发环境搭建 create-react-app,工程目录简介

react开发环境搭建 create-react-app

有两种方式使用react

  1. 引入.js文件来使用react
  2. 通过脚手架工具,官方提供脚手架create-react-app健壮性好,简单,定制性强,调试方便
    接下里,开始环境搭建
    1> 首先打开官网,https://reactjs.org,进入doc,右侧的installation->add react to new app,如图
    react开发环境搭建 create-react-app,工程目录简介_第1张图片
    找到create-react-app,开始安装
    2>得安装npm和node.
    3>mac版本
    终端进入桌面,执行如下操作。
    npx create-react-app my-app
    cd my-app
    npm start
    react开发环境搭建 create-react-app,工程目录简介_第2张图片
    react开发环境搭建 create-react-app,工程目录简介_第3张图片
    到此, create-react-app脚手架react开发环境搭建完成

工程目录简介

react开发环境搭建 create-react-app,工程目录简介_第4张图片
1、README.md是一些简单介绍,自己可以将内容删除改为此项目的简单介绍等
2、package-lock.json 项目一来安装包版本号
3、package.json 任何一个脚手架工具里面都有这个文件,代表这个脚手架是node的一个包文件,有项目的一些简单介绍,一些react的依赖和指令
4、.gitignore文件 一些不想上传到git的文件
5、node_modules 项目依赖的一些第三方的包
6、public目录

  1. favicon.ico是下图图标
    react开发环境搭建 create-react-app,工程目录简介_第5张图片
    1. index.html
      项目首页的html模版
    2. manifest.json

7、src目录,项目开发最重要的文件,放置所有源代码

  1. App.css
  2. App.js
  3. App.test.js 自动化测试文件
  4. index.css
  5. index.js 所有代码入口,整个工程入口
  6. logo.svg
  7. serviceWorker.js
    pwa( progressive web application ) 理念是 通过写网页的方式写移动端的app。在https协议的服务器上,当用户第一次访问的时候需要联网才能看到网页,但是一旦用户访 问完网页然后断网,并且引用了下面的文件,即使断网,第二次访问的时候,依然可以看到之前访问的页面。serviceWorker协助将之前的网页存储在浏览器之内

有些文件是一般用不到的,所以一个简单的react工程的目录就是下图
react开发环境搭建 create-react-app,工程目录简介_第6张图片

你可能感兴趣的:(react,react)