MENU

React学习笔记【1】

第一节

React构建用户界面的Javascript库,主要用于构建UI界面

特点

  • 声明式的设计
  • 高效:采用虚拟DOM来实现DOM的渲染,最大限度的减少DOM的操作
  • 灵活:跟其他库可以灵活搭配使用
  • JSX:俗称JS里写HTML,Javascript语法的扩展
  • 组件化、模块化,代码容易复用,大型项目非常喜欢React
  • 单向的数据流(没有数据的双向绑定)。数据=》视图=》事件=》数据

创建项目

通过script标签引入使用

仅用于学习调试使用

通过react脚手架,创建项目进行开发,部署

npm install -g create-react-app && create-react-app APPNAME


第二节

React 元素渲染
元素是组件的最小单位
一个元素或一个组件只能有一个根结点

使用JSX的写法可以创建JS元素对象

let h1=<h1>hello world</h1>
注意:JSX元素对象,或者组件对象,必须只有一个根元素(根结点)


本节代码

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';

//JSX语法
// <App /> JS普通对象
//render-渲染方法:将App渲染到DOM上
//一个组件参数,一个元素参数(渲染到什么地方)
// let app = <App />;
// let root = document.getElementById('root');
// let h1=<h1>hello world</h1>
// ReactDOM.render(app,root);


//实现页面时刻的显示

// function clock() {
//     let time = new Date().toLocaleTimeString();
//     let element = (
//         <div>
//             <h1>现在的时间是 {time}</h1>
//             <h2>这是副标腿</h2>
//         </div>
//     );
//     let root = document.querySelector('#root');
//     ReactDOM.render(element, root);
// }

// setInterval(clock, 1000);


//reacth函数式组件
function Clock(props) {
    return (
        <div>
            <h1>
                现在的时间是{props.date.toLocaleTimeString()}
            </h1>
            <h2>
                这是函数式组件开发
            </h2>
        </div>
    )
}

function run() {
    ReactDOM.render(
        <Clock date={new Date()} />,
        document.querySelector('#root')
    )
}

setInterval(run, 1000)

文章标题:React学习笔记【1】
如果文中内容侵犯了您的权益,请及时与博主取得联系进行删除!
本站文章未经许可禁止转载,本文地址:https://blog.wanvale.com/archives/234/

Archives QR Code Tip
QR Code for this page
Tipping QR Code