react入门

最新推荐文章于 2024-09-16 01:38:17 发布

RuoChen_ing

最新推荐文章于 2024-09-16 01:38:17 发布

阅读量54

点赞数

文章标签： react.js

本文链接：https://blog.csdn.net/RuoChen_ing/article/details/120492602

版权

React入门

react是facebook出的一款针对于view视图层的library(库),它主要的作用是操作view视图

jsx
jsx是一种语法,可以在js中直接写html代码

基础使用

babel.js
做js代码转换
react.js
react的核心库
react-dom.js
react中dom编辑插件,在浏览器中使用的

// 这是jsx代码块
// 每一个组件都需要一个返回值,返回的是一个dom结构,表示当前组件的内容
function App(){
	return(<div className="app">
		<h1>我是一个组件</h1>
	</div>)
}

// 表示在页面中展示我们的组件
// 参数一 表示组件
// 参数二 表示dom节点
ReactDom.render(<App />,document.getElementById('app'))

<!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>
</head>
<body>
    <div id="app"></div>
    <!-- babel react.js react-dom.js -->
    <!-- react-dom需要在react之后引入-->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.development.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.development.js"></script>
    <script type="text/babel">
        const list = [1,2,3,4,5,6,7]
        const tags = [<h1 key="1">这是一级标题</h1>,<a key="2" href="http://www.baidu.com">百度一下</a>,]
        const msg = "我是一句话";
        // 在react中,如果我们要展示数据,可以直接使用{}
        const Counter = () => <button>计数器</button>;
        // 第一个组件,React组件还是一个function对象;
        function App(){
            return(
                <div className="main">
                    <h1>我是一个组件</h1>
                    <Counter />
                    <p>{msg}</p>
                    <p>{list}</p>
                    {tags}
                    <ul>
                        {list.map((item) => {
                            return <li key={item + Math.random()}>{item}</li>
                        })}
                    </ul>
                    <ul>
                        {list.map((item) =>(
                            <li key={item + Math.random()}>{item}</li>
                            ))}
                    </ul>
                </div>
            );
        }
        ReactDOM.render(<App />, document.getElementById("app"));
    </script>
</body>
</html>