React.js教程（元素渲染/JSX/组件）

最新推荐文章于 2024-07-25 09:06:52 发布

Nanshan south

最新推荐文章于 2024-07-25 09:06:52 发布

阅读量402

点赞数

React是用于构建用户界面的JavaScript库，JavaScript的库分别是：AnglarJS2,React,Jquery;

我使用的是CDN（要是开发阶段，尽量不要用下面CDN，因为慢慢慢慢慢。。。悠悠）：

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

元素渲染：

输出：const element=<h1></h1>

将元素渲染到DOM中：<div id=""></div>

要将React元素渲染到根DOM节中，用React.DOM将其渲染到页面上；React的注释格式是：{/**/}：

<div id="demo"></div>
<script type="text/bable">{/*type这里一定要写*/}
conter element=<h1>Hello</h1>;
ReactDOM.render(
element,
document.getElementById('demo')
);
</script>

更新元素渲染：

React元素不能被更改，只有建立一个新的元素，将其传入进去，React元素会只更新被修改的内容。

<body>
<div id="demo"></div>
</body>
<script type="text/babel">
{/*Component：ES6类，封装要展示的东西*/}
    class Clock extends React.Component {
        render() {
            return (
                    <div>
                        <h1>Hello, world!</h1>
                        <h2>现在是 {this.props.date.toLocaleTimeString()}.</h2>
                    </div>
            );
        }
    }
function tick() {
    ReactDOM.render(
            <Clock date={new Date()}/>,
        document.getElementById('demo')
    );
}
setInterval(tick, 1000);

</script>

JSX：是React用来代替常规的javaScript；

使用JSX：

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);

使用多个嵌套(要使用<div></div>进行包裹）：

<div>
<h1>hello</h1>
<h2>React</h2>
<p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
</div>
    ,
    document.getElementById('demo')
);

样式：

<div id="demo"></div>
<script type="text/babel">
    var myStyle = {
    fontSize:100,
    color:'#ff0000'
    };
ReactDOM.render(
<h1 style={myStyle}>你好</h1>,
document.getElementById('demo')
);
</script>

外部使用：

HTML文件：

<div id=demo></div>
<script src="JSX.js" type="text/babel"></script>

JSX.js文件为"p"添加自定义，需要加入"data-"：

ReactDOM.render(
<div>
<h2>欢迎学习 React</h2>
<p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
</div>
    ,
    document.getElementById('demo')
);

JavaScript表达式：

<div id="demo"></div>
<script type="text/babel">
    var i=1;
    ReactDOM.render(
        <div>
            <h1>{i == 1 ? 'true':'false'}</h1>
            {/*注释写在花括号里，不能使用if else判断语句，使用三元算法*/}
        </div>
        ,
        document.getElementById("demo")
    );
</script>

数组：

<div id="demo"></div>
<script type="text/babel">
    var val=[
        <h1>1</h1>,
        <h2>2</h2>,
        <h3>3</h3>,
    ];
    ReactDOM.render(
            <div>{val}</div>,
        document.getElementById('demo')
    );
</script>

组件：

下面使用的是函数定义的组件：

 function Hellomi(props) {
        return <h1>hihao{props.name}</h1>;
    }

    const element = <Hellomi name="dfg"/>;
    ReactDOM.render(
        element,
        document.getElementById('demo')
    );

使用ES6 class定义组件：

class Welcome extends React.Component {
  render() {
    return <h1>Hello World!</h1>;
  }
}

PS：原生的HTML元素名是以小写字母开头的，但在自定义React类名以大写字母开头的。

name属性通过props.name来获取。在添加属性时，class属性需要写className，for属性需要写classFor;class和for是JavaScript的保留字。

复合组件：

function Name(props) {
        return <h1>姓名：{props.name}</h1>;
    }

    function Six(props) {
        return <h1>性别：{props.six}</h1>;
    }

    function Password(props) {
        return <h1>密码{props.password}</h1>;
    }

    function App() {
        return (
                <div>
                    <Name name="黎明"/>
                    <Six six="女"/>
                    <Password password="1234"/>
                </div>
        );
    }

    ReactDOM.render(
            <App/>,
        document.getElementById('example')
    );

PS：创建多个组件合并成一个组件，把组件的不同点进行分离。