react——初步创建页面

最新推荐文章于 2024-04-26 17:08:56 发布

有蝉

最新推荐文章于 2024-04-26 17:08:56 发布

阅读量719

点赞数

文章标签： react

本文链接：https://blog.csdn.net/qq_37899792/article/details/107556214

版权

create react app:https://www.html.cn/create-react-app/docs/getting-started/

创建一个react项目的步骤

npx create-react-app my-app
cd my-app
npm start

(npx 来自 npm 5.2+ 或更高版本, 查看 npm 旧版本的说明)

你无需安装或配置 Webpack 或 Babel 等工具。它们是预先配置好并且隐藏的，因此你可以专注于代码。

只需创建一个项目，就可以了。

jsx语法

1.定义虚拟DOM，不能使用“”
2.标签中混入JS表达式的时候使用{}
3.样式的类名指定不要使用class，使用className
4.内敛样式要使用style={{样式:"值"}}
5.不能有多个根标签，只能有一个跟标签
6.标签必须闭合
7.如果小写字母开头，就将标签转化为html同名元素，如果html中无该标签对应的元素，就报错
如果是大写字母开头，react就去渲染对应的组件，如果没有就报错

以下为jsx语法示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .sss{
            color: red;
        }
    </style>
</head>
<body>
    <!-- 准备好容器 -->
    <div id="test">
        
    </div>
</body>
<!-- 引入依赖 ,引入的时候，必须就按照这个步骤-->
<!-- 引入react核心库 全局多了React -->
<script src="../React-js/react.development.js" type="text/javascript"></script>
<!-- 引入react-dom 用于支持react操作dom  全局多了ReactDOM-->
<script src="../React-js/react-dom.development.js" type="text/javascript"></script>
<!-- 解析jsx -->
<script src="../React-js/babel.min.js" type="text/javascript"></script>

<!--这里使用了js来创建虚拟DOM-->
<script type="text/babel">
        const MyId = "title";
        const MyData = "Cyk";
        // 1.创建虚拟DOM[在这使用了js的语法]React.createElement(标签,标签属性,内容)
       // const VDOM = React.createElement('h1',{id:"title"},"nihao")

       //不需要加"",jsx语法
        const VDOM = (
            <h1 id = {MyId.toLocaleUpperCase()}>
                <span className = "sss" style = {{fontSize:'50px'}}>{MyData}</span>   
                
            </h1>
        )
        // 2.渲染，如果有多个渲染同一个容器，后面的会将前面的覆盖掉
        ReactDOM.render(VDOM,document.getElementById("test"));
        
        /*
        JS表达式：返回一个值，可以放在任何一个需要值的地方  a  a+b  demo(a)  arr.map() function text(){}
        JS语句：if(){} for(){} while(){} swith(){} 不会返回一个值
        */

        //1.定义虚拟DOM，不能使用“”
        //2.标签中混入JS表达式的时候使用{}
        //3.样式的类名指定不要使用class，使用className
        //4.内敛样式要使用style={{样式:"值"}}
        //5.不能有多个根标签，只能有一个跟标签
        //6.标签必须闭合
        //7.如果小写字母开头，就将标签转化为html同名元素，如果html中无该标签对应的元素，就报错
        // 如果是大写字母开头，react就去渲染对应的组件，如果没有就报错
</script>

</html>

有蝉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react——初步创建页面

create react app:https://www.html.cn/create-react-app/docs/getting-started/创建一个react项目的步骤npx create-react-app my-appcd my-appnpm start(npx来自 npm 5.2+ 或更高版本, 查看npm 旧版本的说明)你无需安装或配置 Webpack 或 Babel 等工具。它们是预先配置好并且隐藏的，因此你可以专注于代码。只需创建一个项目，就可以...
复制链接

扫一扫