学习目标

  • 了解React基本知识

  React是构建用户界面的JavaScript库,主要用于构建UI界面。Facebook在2013年开源。


React 特点

  • 声明式设计
  • 高效,采用虚拟DOM实现DOM的渲染,最大限度减少DOM操作
  • 灵活,与其他库灵活搭配使用。
  • JSX,俗称JS里面写HTML,JS语法的扩展。
  • 组件化、模块化。代码易复用,2016年之前大型项目偏爱react
  • 单向数据流。没有实现数据的双向绑定。数据 -> 视图 -> 事件 -> 数据

创建项目

  • 第一种方式:通过script引入使用,仅用于学习调试。
  • 第二种方式:通过react脚手架,创建项目进行开发、部署。


1. 安装脚手架 create react app

cnpm install -g create-react-app

2. 创建项目

create-react-app reactapp_01(项目名称可以自定义)

3. 运行项目

3.1 cd reactapp_01
3.2 npm start
3.3 打开 http://localhost:3000/

React项目目录解析

认识React_react

  • package.json
  • 管理下载的依赖包,在项目中经常用到的是"react"库,“react-dom”(将jsx语法渲染到dom中)
  • 包含项目信息、项目依赖模块、npm运行脚本的命令缩写等。
  • start: 启动项目
  • build: 打包项目

                  认识React_数据_02


  • public文件夹
  • favicon.ico

      浏览器tab上图标,也是这个项目的一个标志,也可以说是代表一个公司的标志。可以替换。

  • index.html

     项目的入口文件,引用了第三方类库,还可以引入cdn      <div id="root"></div>是项目的总容器,所有的内容存储在这个容器中。这个容器有且只能有一个。

  • manifest.json
  • 当web页面被用于Android主页面使用时的配置文件
  • src
  • 开发中的主要区域,页面都写在这里。
  • App.js: 一个组件,index.js将App.js渲染到页面中


import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}

export default App;

return的内容是类似于html结构的内容,就是jsx,jsx语法是react的主要语法。内部的div的className是为了区分html语法的一个类名,这个是div的样式引用。在这个文件中,只能用一个div容器,如果在div的同级目录添加别的内容,便会报错。

  • index.js
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

<App /> 是JS普通对象

let app = <App />
let root = document.getElementById('root')
ReactDOM.render(app, root);
let root = document.getElementById('root')
let h1 = <h1>hello world</h1>
ReactDOM.render(h1, root);
let root = document.getElementById('root')
let h1 = <h1>hello world</h1><span>hi</span>
ReactDOM.render(h1, root);

以上代码会报错,因为span没有父元素。h1与span是同级。

let root = document.getElementById('root')
let h1 = <h1>hello world<span>hi</span></h1>
ReactDOM.render(h1, root);

以上代码是正确的,将span放入h1,作为h1的孩子。

参考链接:

​https://www.runoob.com/react/react-install.html​​ (React 安装)