React基础入门

React基础

一.React 是什么?

一个用于构建用户界面的 JavaScript 库
中文手册:https://react.docschina.org/

二.声明式

React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图,当数据变动时 React 能高效更新并渲染合适的组件。
以声明式编写 UI,可以让你的代码更加可靠,且方便调试。

三.组件化

构建管理自身状态的封装组件,然后对其组合以构成复杂的 UI。
由于组件逻辑使用 JavaScript 编写而非模板,因此你可以轻松地在应用中传递数据,并保持状态与 DOM 分离。

四.React的特点

1.声明式编码
2.组件化编码
3.React Native 编写原生应用
4.高效(优秀的Diffing算法)

五.如何使用 React

基于浏览器的模式

  • React.js 提供 React.js 核心功能代码,如:虚拟 dom,组件
    • React.createElement(type,props,children);
  • ReactDOM 提供了与浏览器交互的 DOM 功能,如:dom 渲染
    • ReactDOM.render(element, container[, callback])
      • element:要渲染的内容
      • container:要渲染的内容存放容器
      • callback:渲染后的回调函数

六.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>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>

第一种使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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>
</head>
<body>
    <div id="root"></div>
    <script>
        ReactDOM.render(
            React.createElement("h1",null,"哈哈哈"),
            document.querySelector("#root"),
            ()=>{
                console.log("渲染成功")
            }
        )
    </script>
</body>
</html>

第二种React创建视图

<script>
        let h1 = React.createElement("h1",null,"我是一个标题")
        let p = React.createElement("h1",null,"我是一个标签")
        let el = React.createElement(
            "header",
            {id:"header"},
            h1,
            p
        )
        ReactDOM.render(
            el,
            document.querySelector("#root"),
            ()=>{
                console.log("渲染成功")
            }
        )
    </script>

七.babel

babel-standalone.js:在浏览器中处理 JSX
https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js

八.JSX

什么是JSX?

全称: JavaScript XML
JSX 是一个基于 JavaScript + XML 的一个扩展语法
- 它可以作为值使用
- 它并不是字符串
- 它也不是HTML
- 它可以配合JavaScript 表达式一起使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
</head>

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

    <script type="text/babel">

        ReactDOM.render(
            <header>
                <h1>hello react</h1>
                <p>利用JSX来渲染</p>
            </header>,
            document.querySelector("#root"), () => {
                console.log("渲染成功");
            }
        );
    </script>
</body>

</html>
**注:** 它可以作为值使用,它并不是字符串,它也不是HTML, 它可以配合JavaScript 表达式一起使用

JSX的注意事项

JSX 基于javaScript 和 Xml 的扩展语法
- 可以作为值使用
- 它不是字符串
- 它不是html
- 它可以配合js 表达式一起使用
- 它不可以和Js语句一起使用
- 所有标签名必须小写
- 所有标签必须闭合 哪怕单标签
- class 要写作className
- style 接收的是一个对象 并不是字符串
- 每次只能输出一个标签

React为什么使用JSX?

JSX语法糖允许前端开发者使用我们最熟悉的类HTML标签语法来创建虚拟DOM在降低学习成本的同时,也提升了研发效率与研发体验。

插值表达式

在 JXS 中可以使用 {表达式} 嵌入表达式

表达式:产生值的一组代码的集合

  • 变量
  • 算术运算
  • 函数调用
  • ……
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
</head>

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

    <script type="text/babel">
    // let data = "今天周一"   // 原样输出
    // let data = 1;    // 原样输出
    // let data = false    // 不输出
    // let data = undefined;    // 不输出
    // let data = null      // 不输出
    // let data = ["一","二","三"];     // 去掉, 原样输出
    let data = {
        name:"小明",
        age: 18
    }
        ReactDOM.render(
            <header>
                <h1>{data.name}</h1>
                <p>利用JSX来渲染</p>
            </header >,
            document.querySelector("#root"), () => {
                console.log("渲染成功");
            }
        );
    </script>
</body>

</html>

注意: 分清楚 表达式 与 语句 的区别,if、for、while 这些都是语句,JSX 不支持语句

条件输出

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
</head>

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

    <script type="text/babel">

        // ? 类似  if...else
        // || 类似 if(!) 取反
        // && 类似 if()
        ReactDOM.render(
            <header>
                <h1>{false ? "成立" : "不成立"}</h1>
                <p>{true || "利用JSX来渲染"}</p>
                <div>{true && "正确"}</div>
            </header>,
            document.querySelector("#root"), () => {
                console.log("渲染成功");
            }
        );
    </script>
</body>

</html>

列表循环

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
</head>

<body>
    <div id="root">
        <!-- <ul v-for="item in arr">
            <li>{{item}}</li>
        </ul> -->
    </div>

    <script type="text/babel">

        let data = [
            "内容1",
            "内容2",
            "内容3"
        ]
        function toData() {
            let arr = [];
            data.forEach(item => {
                arr.push(<li>{item}</li>)
            });
            return arr;
        }
        // ReactDOM.render(
        //     <header>
        //         {toData()}
        //     </header>,
        //     document.querySelector("#root"), () => {
        //         console.log("渲染成功");
        //     }
        // );


        ReactDOM.render(
            <ul>
                {
                    data.map(item => {
                        return <li>{item}</li>
                    })
                }
            </ul>,
            document.querySelector("#root"), () => {
                console.log("渲染成功");
            }
        );
    </script>
</body>

</html>

九.基于自动化的集成环境模式 - create-react-app - 脚手架

介绍

通过前面 script 的方式虽然也能完成 React.js 的开发,但是有一个现在前端很重要的特性 - 模块化,无法使用。

Create React App 是一个使用 Node.js 编写的命令行工具,通过它可以帮助我们快速生成 React.js 项目,并内置了 Babel、Webpack 等工具帮助我们实现 ES6+ 解析、模块化解析打包,也就是通过它,我们可以使用 模块化 以及 ES6+ 等更新的一些特性。同时它还内置 ESLint 语法检测工具、Jest 单元测试工具。还有一个基于 Node.js 的 WebServer 帮助我们更好的在本地预览应用,其实还有更多。

这些都通过 Create React App 帮助我们安装并配置好了,开箱即用

安装与使用

通过 npm、yarn、npx 都可以

安装

npm
npm i -g create-react-app
yarn
yarn global add create-react-app

使用

安装完成以后,即可使用 create-react-app 命令

create-react-app <项目名称>

或者通过 npx 的方式

npx
npx create-react-app <项目名称>

运行命令以后,就会在运行命令所在目录下面创建一个以项目名称为名的目录

然后我们进入创建的项目

npm start
启动一个内置的本地 WebServer,根目录映射到 ‘./public’ 目录,默认端口:3000

npm run test
运行 Jest 测试

npm run build

打包应用(准备上线)

组件

对具有一定独立功能的数据与方法的封装,对外暴露接口,有利于代码功能的复用,且不用担心冲突问题。

函数式组件

  • 函数的名称就是组件的名称
  • 函数的返回值就是组件要渲染的内容

class类式组件

  • 组件类必须继承 React.Component
  • 组件类必须有 render 方法

创建一个FriendList.js组件

import React, { Component } from "react";
export default class FriendList extends Component {
  render() {
  	return (
		<div className="friend-list">
                <div className="friend-group">
                    <dt>家人</dt>
                    <dd>爸爸</dd>
                    <dd>妈妈</dd>
                </div>
                <div className="friend-group">
                    <dt>朋友</dt>
                    <dd>张三</dd>
                    <dd>李四</dd>
                    <dd>王五</dd>
                </div>
                <div className="friend-group">
                    <dt>客户</dt>
                    <dd>阿里</dd>
                    <dd>腾讯</dd>
                    <dd>头条</dd>
                </div>
            </div>
	);
  }
}

组件复用 - 数据抽取

为了提高组件的复用性,通常会把组件中的一些可变数据提取出来

let datas = {
    family: {
        title: '家人',
        list: [
            {name: '爸爸'},
            {name: '妈妈'}
        ]
    },
    friend: {
        title: '朋友',
        list: [
            {name: '张三'},
            {name: '李四'},
            {name: '王五'}
        ]
    },
    customer: {
        title: '客户',
        list: [
            {name: '阿里'},
            {name: '腾讯'},
            {name: '头条'}
        ]
    }
};

十.总结

今天学习了什么是react,react的基本使用,还有react的脚手架的搭建以及目录的介绍,和JSX语法

React是一个声明式、高效、灵活的、创建用户界面的JavaScript库

上一篇:认识React,了解React


下一篇:JSX 空的根元素