创建与启动

不安装情况下: npx create-react-app 项目名

第一步，全局安装：npm i -g create-react-app
第二步，切换到想创项目的目录，使用命令：create-react-app hello-react
或者一二步，的结合直接执行 npx create-react-app hello-react
第三步，进入项目文件夹：cd hello-react
第四步，启动项目：npm start

项目结构

public —— 静态资源文件夹
favicon.icon ——— 网站页签图标
index.html ———— 主页面
logo192.png ———- logo图
logo512.png ———- logo图
manifest.json ——- 应用加壳的配置文件
robots.txt ———— 爬虫协议文件
src —— 源码文件夹
App.css ———— App组件的样式
App.js ————- App组件
App.test.js —— 用于给App做测试
index.css ——— 样式
index.js ———- 入口文件
logo.svg ———- logo图
reportWebVitals.js
—- 页面性能分析文件(需要web-vitals库的支持)
setupTests.js
—— 组件单元测试的文件(需要jest-dom库的支持)

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.         <meta charset="utf-8" />
  5.         <!-- %PUBLIC_URL%代表public文件夹的路径 -->
  6.         <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  7.         <!-- 开启理想视口，用于做移动端网页的适配 -->
  8.         <meta name="viewport" content="width=device-width, initial-scale=1" />
  9.         <!-- 用于配置浏览器页签+地址栏的颜色(仅支持安卓手机浏览器) -->
  10.         <meta name="theme-color" content="red" />
  11.         <meta name="description"content="Web site created using create-react-app"/>
  12.         <!-- 用于指定网页添加到手机主屏幕后的图标 -->
  13.         <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
  14.         <!-- 应用加壳时的配置文件 -->
  15.         <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  16.     <title>React App</title>
  17.   </head>
  18.   <body>
  19.         <!-- 若浏览器不支持js则展示标签中的内容 -->
  20.     <noscript>You need to enable JavaScript to run this app.</noscript>
  21.     <div id="root"></div>
  22.   </body>
  23. </html>

index.js

// 从 react 的包当中引入了 React。只要你要写 React.js 组件就必须引入React, 因为react里有
一种语法叫JSX，要写JSX，就必须引入React
import React from 'react'
// ReactDOM 可以帮助我们把 React 组件渲染到页面上去，没有其它的作用了。
import ReactDOM from 'react-dom'
// ReactDOM里有一个render方法，功能就是把组件渲染并且构造 DOM 树，然后插入到页面上某个特定的
元素上
ReactDOM.render(
  // 这里就比较奇怪了，它并不是一个字符串，看起来像是纯 HTML 代码写在 JavaScript 代码里面。语
  法错误吗？这并不是合法的 JavaScript 代码, “在 JavaScript 写的标签的”语法叫 JSXJavaScript XML。
  <h1>欢迎进入React的世界</h1>,
  // 渲染到哪里
  document.getElementById('root')
)