React学习【1】创建项目，简单函数式组件案例

特点：

1. 声明式的设计。
2. 高效，采用虚拟DOM来实现DOM的渲染，最大限度的减少DOM的操作。
3. 灵活。跟其他库灵活搭配使用。
4. JSX，在JS里面写HTML，JavaScript语法的拓展。
5. 组件化，模块化。代码容易复用，大型项目喜欢。
6. 单向数据流。没有实现数据的双向绑定。

创建项目

1、通过引入使用

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

2、通过react的脚手架，创建项目进行开发，部署。

1. 安装脚手架Create React App

cnpm install -g create-react-app

2. 创建项目

create-react-app demo01

React元素渲染

JSX允许的普通对象写法

let app = <App />;
let root = document.getElementById('root');

let h1 = <h1>helloworld</h1>;

注意：JSX元素对象，或者组件对象，必须只有1个根元素根节点

函数渲染实现时钟变换

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)

函数式组件

//react函数式组件
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)

B站视频链接