React 学习-1

  1. 安装--使用npm
  2. 元素渲染

React只定义一个根节点,由 React DOM 来管理。通过ReactDOM.render()方法将元素渲染到根DOM节点上。

React 元素都是不可变的。当元素被创建之后,你是无法改变其内容或属性的。目前更新界面的唯一办法是创建一个新的元素,然后将它传入 ReactDOM.render() 方法

javascript 复制代码
React实例一:
<div id="example"></div>
<script type="text/babel">
  ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
  );
</script>

React实例二:
<div id="example"></div>
<script type="text/babel">
const element = <h1>Hello, world!</h1>
  ReactDOM.render(
    element,
    document.getElementById('example')
  );
</script>

实例三:
ReactDOM.render(
    <div>
    <h1>菜鸟教程</h1>
    <h2>欢迎学习 React</h2>
    <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
    </div>
    ,
    document.getElementById('example')
);
  1. JSX(javascript的语法扩展,是在javascript内部实现的)

在 React 中使用 JSX 来描述用户界面。元素是构成React应用的最小单位,jsx就是用来生命Reac当中的元素。

javascript 复制代码
JSX示例:
const element = <h1>Hello, world!</h1>;

规范:
1.使用js表达式、数组、注释,都写在{}中
2.不能使用if判断,可使用三元表达式
3.推荐使用内联样式,使用驼峰命名法,数字后不用写px,react会自动添加
  1. React组件

原生html是小写字母开头,自定义的组件需要大写字母开头,意组件类只能包含一个顶层标签

javascript 复制代码
1.可以使用函数定义组件
function HelloMessage(props) {
    return <h1>Hello World!</h1>;
}
const element = <HelloMessage /> 为用户自定义的组件。

2.向组件传递参数,可以使用 this.props 对象
function HelloMessage(props) {
    return <h1>Hello {props.name}!</h1>;
}
 
const element = <HelloMessage name="Runoob"/>;
 
ReactDOM.render(
    element,
    document.getElementById('example')
);

注意,在添加属性时, class 属性需要写成 className ,for 属性需要写成 htmlFor ,这是因为 class 和 for 是 JavaScript 的保留字。
相关推荐
dy17172 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
Broken Arrows6 小时前
Linux学习——管理网络安全(二十一)
linux·学习·web安全
2501_915918416 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
今天也要学习吖6 小时前
谷歌nano banana官方Prompt模板发布,解锁六大图像生成风格
人工智能·学习·ai·prompt·nano banana·谷歌ai
雁于飞6 小时前
vscode中使用git、githup的基操
笔记·git·vscode·学习·elasticsearch·gitee·github
程序员的世界你不懂6 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技7 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip7 小时前
JavaScript二叉树相关概念
前端
rannn_1117 小时前
【Javaweb学习|实训总结|Week1】html基础,CSS(选择器、常用样式、盒子模型、弹性盒布局、CSS定位、动画),js(基本类型、运算符典例)
css·笔记·学习·html