React (基础与安装)

最新推荐文章于 2024-03-02 22:54:00 发布

success_on

最新推荐文章于 2024-03-02 22:54:00 发布

阅读量416

点赞数 1

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/a2690656046/article/details/119116671

版权

React 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

介绍:

React 是一个用于构建用户界面的 JavaScript 库，是用 JavaScript 构建「快速响应」的大型 Web 应用程序的首选方式。

由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。

在 React 中，可以将页面中每个部分分成每一个独立的小模块，每个小模块就是组建，这些组件可以互相组合和嵌套，就组成每一个页面。相比传统操作 DOM 的前端开发方式，我们「主要要关心的是应用中数据的变化」，React 会帮我们将 UI 渲染完成。

流程:

在学习react时,和我们学习vue一样也要先了解它的使用方式.
那么首先呢是
第一种使用方式 - 直接在index中使用

<!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>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        ReactDOM.render(
            React.createElement("h1",null,"我是子元素"),
            document.querySelector("#root"),
            ()=>{
                console.log("渲染成功")
            }
        )
    </script>
</body>
</html>

在这里插入图片描述
第二种-React创建视图

<script>
        let h1 = React.createElement("h1",null,"我是标题")
        let p = React.createElement("h1",null,"我是一个短路标签")
        let el = React.createElement(
            "header",
            {id:"header"},
            h1,
            p
        )

        ReactDOM.render(
            el,
            document.querySelector("#root"),
            ()=>{
                console.log("渲染成功")
            }
        )
    </script>

可以看到我们这种先定义后再使用的方式也是可以的

第三种-JSX
注意:
JSX 是一个基于 JavaScript + XML 的一个扩展语法

它可以作为值使用
它并不是字符串
它也不是HTML
它可以配合JavaScript 表达式一起使用

<body>
    <div id="root"></div>

    <script type="text/babel">

        ReactDOM.render(
            <header>
                <h1>hello react</h1>
                <p>JSX的渲染</p>
            </header>,
            document.querySelector("#root"),
            ()=>{
                console.log("渲染成功")
            }
        )
    </script>
</body>
	//还要引入这个
    <script src="js/babel.min.js"></script>

JSX是直接把我们的标签放到了需要渲染的位置了,方便很多,但是格式不美观

第四种-插值表达式

 <div id="root"></div>

    <script type="text/babel">
        // let str = "天气不错"
        // let str = 1
        // let str = false 不输出
        // let str = false
        // let str = ["哈哈","狠狠","呼呼"]
        let str = {
            name:"唐悠悠",
            age:18,
            sex:"女"}
        ReactDOM.render(
            <header>
                <h1>{str.name}</h1>
                <p>JSX的渲染</p>
            </header>,
            document.querySelector("#root"),
            ()=>{
                console.log("渲染成功")
            }
        )
    </script>
</body>
    <script src="js/babel.min.js"></script>

这个插值则是定义一个变量,然后和JSX方式一样,直接在标签内使用,不过它是把值赋值给变量后,再调用变量.

第五种-条件输出

 <div id="root"></div>

    <script type="text/babel">

        ReactDOM.render(
            <header>
                <h1>{false ? "成立":"不成立"}</h1>
                <p>{true ||"利用JSX渲染"}</p>
                <div>{true&&"正确"}</div>
            </header>,
            document.querySelector("#root"),
            ()=>{
                console.log("渲染成功")
            }
        )
    </script>
  <script src="js/babel.min.js"></script>

这里是进行了我们常用的条件判断三元运算符来使用,本质依然是JSX

第六种-列表循环

    <div id="root"></div>

    <!-- <ul></ul> -->

    <script type="text/babel">

        let data = [
            "内容1",
            "内容2",
            "内容3",
            "内容4"
        ]
        // function toData(){
        //     let arr =[];
        //     data.forEach(item=>{
        //        arr.push(<li>{item}</li>) 
        //     })
        //     return arr
        // }


        ReactDOM.render(
            // <header>
            //    {toData()}
            // </header>,
            <ul>
                {
                    data.map(item=>{
                        return<li>{item}</li>
                    })
                }
            </ul>,
            document.querySelector("#root"),
            ()=>{
                console.log("渲染成功")
            }
        )
    </script>
  <script src="js/babel.min.js"></script>

这里则是有两种方式进行云环渲染,一种是直接JSX格式,循环完后调用变量,另一种则是再要渲染的内容出进行循环代码.

第七种-JSX注意事项

JSX 使用注意事项
必须有,且只有一个顶层的包含元素 - React.Fragment
JSX 不是html，很多属性在编写时不一样
className
style
列表渲染时，必须有 key 值
在 jsx 所有标签必须闭合
组件的首字母一定大写，标签一定要小写

好了,这里呢,基础就到这里了,下面是我们安装和使用React

安装React

npm

npm i -g create-react-app

yarn

yarn global add create-react-app

使用
安装完成以后，即可使用 create-react-app 命令

create-react-app <项目名称>

或者通过 npx 的方式

npx

npx create-react-app <项目名称>

运行命令以后，就会在运行命令所在目录下面创建一个以项目名称为名的目录

然后我们进入创建的项目

cd <项目名>

npm start

如果在启动项目时出现错误,那多半是 eject 没安装上,我们需要在命令行上输入

npm run eject

然后选择yes,重新跑下项目就可以了.

总结:

React的使用是多样的有一下很多种使用方式

第一种使用方式 - 直接在index中使用

第二种-React创建视图

第三种-JSX

第四种-插值表达式

第五种-条件输出

第六种-列表循环

第七种-JSX注意事项

然后就是我们的安装了,这个可以往上看,如果觉得不详细的可以搜索一下

哦吼,然后就是我个人在安装时遇到的一些问题了
我在安装React时,在全局安装后,创建项目时,使用了大写字母,不行!,常见项目时只能使用小写字母,
然后就是启动项目时报的错误,报的是项目没有获取到,后来我仔细检测发现是package.json文件里的script中的eject属性没有安装上,因此在命令行上使用npm run eject后选择yes,也就是把文件暴露出来,这样就能获取到了,然后再重新启动下项目就可以啦.

喜欢的话可以点赞关注收藏三连

success_on

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
React (基础与安装)

介绍:React 是一个用于构建用户界面的 JavaScript 库，是用 JavaScript 构建「快速响应」的大型 Web 应用程序的首选方式。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。在 React 中，可以将页面中每个部分分成每一个独立的小模块，每个小模块就是组建，这些组件可以互相组合和嵌套，就组成每一个页面。相比传统操作 DOM 的前端开发方式，我们「主要要关心的是应用中数
复制链接

扫一扫

专栏目录