丁鹿学堂:前端学习进阶指南之react入门(react在html中使用数据绑定和修改)

在html中使用react

今天跟大家分享react的基础语法。

我们采用最简单的方法,就是在html中引入react

因为一上来就使用脚手架的话,很多配置大家不一定清楚。

而在html中使用react的话,可以直接去学习react最基本的语法。

这是零基础学习react的最佳实践。

引入react的依赖

react也是js库,所以我们在使用的时候需要引入react的依赖

react依赖的是三个包

1 react 包含react所必须的代码

2 react-dom react在渲染不同平台所需要的代码

3 babel 讲jsx转换成react代码的工具 ,jsx是react编写代码的采用的一种语法,默认浏览器是不识别的,需要通过babel去编译成浏览器识别的js代码。

注意:

react的包引入必须在react-dom前面,babel则没有顺序要求。

react实现hello world

我们通过一个小案例,来入门react,知识点包含:dom渲染,事件,修改数据

<body>
    <script crossorigin src="react.development.js"></script>
    <script crossorigin src="react-dom.development.js"></script>
    <script src="unpkg.com/babel-standalone@6/babel.min.js"></script>
    <div id="root">

    </div>
</body>
<script type="text/babel">

    let title = 'hello world'
    function handleFn(){
        // 1 修改数据
         title = '你好,丁鹿'
        // 2 重新渲染
        rander()
    }
    function rander(){
        root.render((
        <div>
            <h1>{title}</h1>
            <div onClick={handleFn}>修改标题</div>
        </div>
    ))
    }
    const root = ReactDOM.createRoot(document.querySelector('#root'))
    rander()
</script>

注意:

1react18和react18之前的一些语法是不一样的,我们使用最新的库和写法。

2jsx语法中,所有的变量都是通过{} 的形式写在dom中的

3 jsx中,点击事件使用onClick去绑定。

相关推荐
也无晴也无风雨1 小时前
深入剖析输入URL按下回车,浏览器做了什么
前端·后端·计算机网络
Martin -Tang1 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
懒惰的bit2 小时前
基础网络安全知识
学习·web安全·1024程序员节
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
小牛itbull3 小时前
ReactPress:构建高效、灵活、可扩展的开源发布平台
react.js·开源·reactpress
放逐者-保持本心,方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、4 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
Natural_yz4 小时前
大数据学习09之Hive基础
大数据·hive·学习
龙中舞王4 小时前
Unity学习笔记(2):场景绘制
笔记·学习·unity