创建新的 React 应用

Create React App

Create React App 是一个用于学习 React 的舒适环境，也是用 React 创建新的单页应用的最佳方式。

它会配置你的开发环境，以便使你能够使用最新的 JavaScript 特性，提供良好的开发体验，并为生产环境优化你的应用程序。你需要在你的机器上安装 Node >= 8.10 和 npm >= 5.6。要创建项目，请执行：

npx create-react-app my-app
//my-app是项目名
//下载时，速度会比较慢，多等会
//第一行的 npx 不是拼写错误 —— 它是 npm 5.2+ 附带的 package 运行工具。
cd my-app
npm start

  Create React App 不会处理后端逻辑或操纵数据库；它只是创建一个前端构建流水线（build pipeline），所以你可以使用它来配合任何你想使用的后端。它在内部使用 Babel 和 webpack，但你无需了解它们的任何细节。

当你准备好部署到生产环境时，执行 npm run build 会在 build 文件夹内生成你应用的优化版本。你能从它的 README 和用户指南了解 Create React App 的更多信息。

执行 npm run build打包后，会产生这个文件夹 

用的时候，把里面的static文件复制走就行

新建一个文件夹，在REACT文件夹中输入：npx create-react-app my-app

创建成功后会生成以下这些文件

 然后按顺序输入cd my-app；npm start命令

成功后按ctrl键，并单击下面两个网址

 就会跳转到下面这个页面，你的react项目就创建成功了

进入package.json这个包

 

start是用来启动项目的【npm run start或npm start】，可以在package.json包里start改成别的

build是用来打包项目的【npm run build】

 

 打开public中的index.html文件

 查看body中的内容

页面上显示的内容是挂载到这个id为root的div上的

红圈圈住的文件可以全部删除，里面都是默认的样式图片等等

index.js文件里只保留这些东西

 App.js文件里只保留这些东西

 之后就可以在App.js中写东西了，下面是一个例子

// 要给页面加样式，可以新建一个css文件，然后引进来
// 或者直接加在ul、li标签里面   <ul style="">
function App() {
  //JSX语法
  return (
    <>
      {/* <>是模板标签，相当于template，不会在页面中显示 */}
      <ul>
        <li>苹果</li>
        <li>梨</li>
        <li>西瓜</li>
      </ul>
      <h2>hello!世界你好，我是银河护卫队</h2>
    </>
  );
}

export default App;

 运行后的页面

上面这种是函数组件

下面我们来写类组件

在src中新建文件夹components，再给里面建jsx文件

 在jsx文件中写类组件

//引入react
import { Component } from "react";
// 创建类组件
class HelloWorld extends Component{
    // 渲染函数,类似于vue中钩子函数,在组件的生命周期内，自动执行的函数
render(){
    return(
        <>
        <h2>银河护卫队滚</h2>
        </>
    );
}
}

//将组件导出
export default HelloWorld;

在App.js文件中引入组件 

  运行后的页面

JSX 简介

考虑如下变量声明：

const element = <h1>Hello, world!</h1>;

这个标签语法既不是字符串也不是 HTML。

它被称为 JSX，是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。JSX 可以生成 React “元素”。

为什么使用 JSX？

React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中展示准备好的数据。

React 并没有采用将标记与逻辑进行分离到不同文件这种人为地分离方式，而是通过将二者共同存放在称之为“组件”的松散耦合单元之中，来实现关注点分离。

React 不强制要求使用 JSX，但是大多数人发现，在 JavaScript 代码中将 JSX 和 UI 放在一起时，会在视觉上有辅助作用。它还可以使 React 显示更多有用的错误和警告消息。

在 JSX 中嵌入表达式

在下面的例子中，我们声明了一个名为 name 的变量，然后在 JSX 中使用它，并将它包裹在大括号中：

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

元素渲染

元素是构成 React 应用的最小砖块。

元素描述了你在屏幕上想看到的内容。

const element = <h1>Hello, world</h1>;

与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。

注意：

你可能会将元素与另一个被熟知的概念——“组件”混淆起来。我们会在下一个章节介绍组件。组件是由元素构成的。我们强烈建议你不要觉得繁琐而跳过本章节，应当深入阅读这一章节。

将一个元素渲染为 DOM

假设你的 HTML 文件某处有一个 <div>：

<div id="root"></div>

我们将其称为“根” DOM 节点，因为该节点内的所有内容都将由 React DOM 管理。

仅使用 React 构建的应用通常只有单一的根 DOM 节点。如果你在将 React 集成进一个已有应用，那么你可以在应用中包含任意多的独立根 DOM 节点。

想要将一个 React 元素渲染到根 DOM 节点中，只需把它们一起传入 ReactDOM.render()：

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

页面上会展示出 “Hello, world”。

更新已渲染的元素

React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。

根据我们已有的知识，更新 UI 唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render()。

考虑一个计时器的例子：

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

示例： 

 页面显示：

点击“更新时间”按钮，上面的时间回改变

组件 & Props

组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。本指南旨在介绍组件的相关理念。你可以参考详细组件 API。

组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。

函数组件与 class 组件

定义组件最简单的方式就是编写 JavaScript 函数：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

该函数是一个有效的 React 组件，因为它接收唯一带有数据的 “props”（代表属性）对象与并返回一个 React 元素。这类组件被称为“函数组件”，因为它本质上就是 JavaScript 函数。

你同时还可以使用 ES6 的 class 来定义组件：

class Welcome extends React.Component { // 必须继承自React.Component
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

上述两个组件在 React 里是等效的。

父组件向子组件传值：

第一步：给父组件写入内容

第二步：给构造器constructor和继承super传入组件函数props

 页面显示：

注意： 组件名称必须以大写字母开头。

React 会将以小写字母开头的组件视为原生 DOM 标签。例如，<div /> 代表 HTML 的 div 标签，而 <Welcome /> 则代表一个组件，并且需在作用域内使用 Welcome。

组合组件

组件可以在其输出中引用其他组件。这就可以让我们用同一组件来抽象出任意层次的细节。按钮，表单，对话框，甚至整个屏幕的内容：在 React 应用程序中，这些通常都会以组件的形式表示。

1. 在父组件中先引入子组件Welcome.jsx 【新建一个Welcome.jsx】

2. 使用子组件当作标签

 3.给子组件Welcome.jsx写入代码

//引入react
import { Component } from "react";

// 创建类组件
class Welcome extends Component {
    constructor(props) {  //构造一个定时器
        super(props);
        //提供状态
        this.state = {
           
        }
    }

    // 渲染函数,类似于vue中钩子函数,在组件的生命周期内，自动执行的函数
    render() {
        return (
            <>
               <div>
                {this.props.name}-----{this.props.title}
                {/* name是写在父组件中的 */}
               </div>
            </>
        );
    }
}

//将组件导出
export default Welcome;

 页面效果：