react学习 新建react项目_yarn创建react项目

目录

一.安装（几种方法）

1. 直接引入js文件链接

2. 用 npm 安装 React 16（最新18了，原理相同）

4.用yarn安装react脚手架（最推荐）

3. 用react脚手架create-react-app构建项目

二.react学习

1. 3个基础文件和1个属性文件

2. 使用

3. 谷歌调试工具

三.用脚手架开发

1.命令

1.1 查看脚手架版本

1.2 启动项目

1.3 打包

1.4 测试

1.5 显示webpack的配置文件

2.目录文件

2.1 public

2.2 src

2.3 package.json

3.定义组件

---

react的中文官网对初学者不是很友好，不想vue一样清晰明了。

react外连接代码打不开，体验好糟糕呀。

放弃官网，去菜鸟教程学了

React 教程 | 菜鸟教程

一.安装（几种方法）

1. 直接引入js文件链接

CDN 提供了 React 的 UMD 版本：

使用方法：直接在html中引入react的如下链接，

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

但上面的方式，每次加载都要卡一会，因为是调react服务器的文件，要先和服务器交互。

https://unpkg.com/react@16/umd/react.development.js

https://unpkg.com/react-dom@16/umd/react-dom.development.js

小妙招：把这2个链接地址分别在浏览器打开，直接复制代码出来用；或者F12 ，点Sources，找到文件，右键Save as... 直接保存下来用。（如果用18版，就把16改成18）

或者用 Staticfile CDN 的 React CDN 库

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

或从官网下载后引入(这些有点旧，不建议)

Downloads | React

2. 用 npm 安装 React 16（最新18了，原理相同）

运行：

npm install --save react@^16.13.0 react-dom@^16.13.0

或安装其他最新版也可。

4.用yarn安装react脚手架（最推荐）

yarn和react都是facebook出品，你懂得。

(1). 在yarn官网下载yarn

yarn官网 ：Home page | Yarn

(2).直接npm 安装 yarn

npm install -g yarn

再安装react脚手架

yarn global add create-react-app

启动项目 yarn start

如果在编辑器中打开项目，启动项目报系统上禁止运行脚本，如下：

在项目所在的文件夹，用cmd命令行里启动项目就行了。

比如在项目react20240323下启动。

但不是解决问题的根本办法，需用下面方法解决（window10,其他的系统大家可以自己搜索一下）

打开Powershell，

运行Set-ExecutionPolicy -ExecutionPolicy Unrestricted -Scope CurrentUser

Y

之后就能在编辑器上启动项目了

3. 用react脚手架create-react-app构建项目

运行：

npm install -g create-react-app

（怎么安装特定版本的脚手架？npm install -g create-react-app@^4.0.3 吗?）

可以查到以前的版本 create-react-app - npm

然后再新建项目  create-react-app react02

到项目文件夹react02中，运行 npm start 启动项目

在安装脚手架之前，不需要安装react，因为脚手架会在新建项目的时候安装react

二.react学习

1. 3个基础文件和1个属性文件

• react.development.js - React 的核心库
• react-dom.development.js - React 的扩展库，提供与 DOM 相关的功能
• babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持(JSX转为JS)。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。
• prop-types.js - React的属性限制文件，15版一行单拿出来了。

babel可直接引入，或安装，安装如下：

    babel6：npm install --save-dev babel-core babel-cli

    babel7：npm install --save-dev @babel/core @babel/cli （安装报错，是npm版本太低）

Babel 安装_大前小白的博客-CSDN博客_babel 安装

关于初学者怎么白嫖个babel.js，如下

①打开官网Babel · The compiler for next generation JavaScript

②点击上面的Setup → 点 In the browser →把例子中引入的babel.js地址复制到浏览器中，等一小会 → Ctrl a + ctrl c 把代码复制 → 在本地新建个babel.js，把代码复制进来保存。

prop-type.js 原理同上 网址为：https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js

2. 使用

react使用 JSX编程，则 <script> 标签的 type 属性(媒体类型)需要设置为 text/babel，表示script中的代码是JSX，靠babel翻译成js。

<script type="text/babel"> </script>

MIME媒体类型：MIME 类型 - HTTP | MDN

3. 谷歌调试工具

从谷歌应用商店下载是最快的，还有一种是下面的方法。

在谷歌浏览器打开网址：下载地址，选从Crx4Chrome下载，

下载完了之后将crx后缀改为zip，然后将这个zip拖到谷歌浏览器扩展程序那里就行了。

初学的时候，我下载的是4.20.2版本的。

三.用脚手架开发

1.命令

1.1 查看脚手架版本

create-react-app --version

1.2 启动项目

npm start

启动后很智能的提示你当前的项目网页地址

1.3 打包

npm run build

1.4 测试

npm test

1.5 显示webpack的配置文件

npm run eject

webpack的配置文件默认是隐藏的，用这个命令可使文件显示，但显示之后就不能退回了。

2.目录文件

2.1 public

     public文件下存放：

     (1). 静态资源，比如网站页签图标(favicon.ico)、图片(.png)

     (2). index.html 项目的根文件，应用的主页面。

<!-- %PUBLIC_URL%代表public文件夹的路径 -->
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<!-- 开启理想视口，用于做移动端网页适配 -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- 用于配置浏览器页签+地址栏颜色(仅支持安卓手机浏览器，兼容性一般) -->
<meta name="theme-color" content="#000000" />
<meta
   name="description"
   content="Web site created using create-react-app"
/>
<!-- 用于指定网页添加到手机主屏幕后的图标 -->
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />    
<!-- 应用加壳时的配置文件-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

     (3). manifest.json 给页面加壳，变成手机APP，它指定了开始页面 index.html，一切的开始都从这里开始，所以这个是代码执行的源头。

     (4). robots.txt 爬虫协议文件，指定网站哪些可以被爬，哪些不可以。

2.2 src

    (1). App.js 定义了一个名为App的组件，在index.html中挂载的组件就是它。

    (2). App.css App组件的样式文件

    (3). APP.test.js APP的测试文件，一般不用

    (4). index.js 入口文件，它不是组件，它的作用是引入插件、组件和文件，并将App组件挂载到index.html的id=root的元素里。

         其中的React.StrictMode可以帮助我们查看哪里写的不对，因为react经常哪个写法就弃用了，这个可以很好的帮助到我们，作用就是检查代码。

    (5). index.css 全局样式文件，里面放着公共样式。

    (6). logo.svg 图片

    (7). reportWebVitals 用于记录性能的。

    (8). setupTests.js 用于应用的整体测试，或模块的单元测试。

2.3 package.json

3.定义组件

用函数定义一个组件：

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>现在是 {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

用 ES6 class 来定义一个组件：

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>现在是 {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

最后把组件渲染到dom上：

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('example')
  );
}
 
setInterval(tick, 1000);