ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

React入门1

2022-01-22 17:04:01  阅读:173  来源: 互联网

标签:npm react 插件 入门 yarn React hello


React入门学习(1)

参考教程

文章目录

一.何为React

  • JS的UI库
  • JS的框架

二.why React

  • 使用率高

  • 页面组件化

  • 易于管理

  • 灵活

    • 单/多页面
    • 支持服务端渲染

三.React 环境准备

1.Node

何为Node

  • Node.js 是基于Chrome V8 引擎的JavaScript运行环境

    Chrome 对前端兼容性很好

Node作用

  • 前端开发环境
    • Webpack
    • NPM插件
    • Server
  • 服务端动态编程语言
    • Java Web
    • PHP Web
    • Node Web

2.NPM

概念

  • NPM是随同Node.js一起安装的包管理工具,能解决NodeJS代码部署上的很多问题

用法

  • npm -v
    • 查看版本号
  • npm init
    • 在文件夹下初始化配置信息
  • npm install
    • 局部安装
  • npm install -g
    • 全局安装

插件发布

​ 需要注册npm账号

image-20220122143411089

初始化操作示例

  • image-20220122141543913

    image-20220122141626546

    • 用vscode查看初始化之后的package.json

      image-20220122141706864

      scripts 脚本

      keywords 关键词

      author 作者

      license 许可证

    • 目前已有标准的配置,可以安装插件

      image-20220122142508147 image-20220122142537732

      –save 把插件保存到package里面

      会发现package.json多了这个内容

      image-20220122142736392

      当开发者克隆项目时,可以直接看到插件,通过npm install的方式就能下载下来

      • 安装插件之后会多了module的文件夹

        image-20220122142651795

      • 这时候如果删掉node_modules, 然后执行npm install ,由于package.json里面写了react插件的名字,会自动把插件拉下来

        image-20220122143106134 image-20220122143154096

        npm i 是 npm install 的简写

3.yarn

概念

  • 前端的包管理器

    没有平台

    下载插件的源地址还是npm

  • 特点:速度快 安全可靠

安装

image-20220122150914989

语法使用

记得要把yarn添加到环境变量

image-20220122152702632

yarn run 运行脚本

yarn add安装新插件

yarn install安装旧插件

yarn操作示例

image-20220122153422772

  • 这时如果把node_modules删掉,需要拉取react插件则使用yarn install即可

    image-20220122153555463

    image-20220122153630658

  • yarn remove react --save会把react从dependency中删掉

四.经典HelloWorld

1.引入react框架

CDN方式

适合多页面开发

  • 链接

    react底层核心库:
    https://unpkg.com/react@16/umd/react.development.js
    操作dom库,类似jQuery:
    https://unpkg.com/react-dom@16/umd/react-dom.development.js
    解析本地ES6语法:
    https://unpkg.com/babel-standalone@6/babel.min.js
    

    新版:

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

2.基本语法

  • ReactDOM.render()

    渲染元素到视图中

  • React.createElement()

    创建元素 可添加属性

  • React.Component

3.开始编写hello world

CDN方式引入框架库

<!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>React Demo:Hello World</title>
    <!-- <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> -->
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
</head> 
<body>
    <div id="app"></div>
    <script>
        var hello =  React.createElement('h1',{},"Hello World");
        // 第一个参数必填,传入的是类似HTML的标签名称,如 h1,ul,li
        // 第二个参数选填,表示属性
        // 第三个选填,子节点, 如要显示的文本内容
        ReactDOM.render(hello,document.getElementById('app'));
        //渲染hello元素 用document.getElementById的形式来渲染,渲染到id为app的div里面去
    </script>
</body>
</html>

Npm/yarn方式

  • 命令行:

    yarn add react react-dom --save
    

    此时若没有自动创建package,则需要手动创建
    此时确实没有自动创建,于是先去yarn init

    然后再执行yarn add指令

    此时来看package.json

    image-20220122163713009

  • 代码

    <!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>React Demo:Hello World</title>
     
        <script src="node_modules/react/umd/react.development.js"></script>
        <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    </head> 
    <body>
        <div id="app"></div>
        <script>
            var hello =  React.createElement('h1',{},"Hello World");
            // 第一个参数必填,传入的是类似HTML的标签名称,如 h1,ul,li
            // 第二个参数选填,表示属性
            // 第三个选填,子节点, 如要显示的文本内容
            ReactDOM.render(hello,document.getElementById('app'));
            //渲染hello元素 用document.getElementById的形式来渲染,渲染到id为app的div里面去
        </script>
    </body>
    </html>
    
    • 此时效果和前面cdn在线引入的效果一样

      image-20220122164507210

使用ES6语法
  • 上面的代码使用的是ES5的语法

  • 改为ES6需要引入babel

    <!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>React Demo:Hello World</title>
        <script src="node_modules/react/umd/react.development.js"></script>
        <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    </head> 
    <body>
        <div id="app"></div>
        <script type="text/babel">
            ReactDOM.render(
                <h1>Hello,World</h1>,
                document.getElementById('app')
            );
        </script>
    </body>
    </html>
    

    这里使用了JSX的语法糖

    image-20220122165021272

    此时要加上type属性

      <h1>Hello,World</h1>,
            document.getElementById('app')
        );
    </script>
    
    ~~~

    这里使用了JSX的语法糖

    image-20220122165021272

    此时要加上type属性

    image-20220122165228789

标签:npm,react,插件,入门,yarn,React,hello
来源: https://blog.csdn.net/qq_52431436/article/details/122640008

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有