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 的保留字。
相关推荐
丰锋ff8 分钟前
考研英一学习笔记
笔记·学习·考研
小墨宝9 分钟前
js 生成pdf 并上传文件
前端·javascript·pdf
hnlucky23 分钟前
redis 数据类型新手练习系列——Hash类型
数据库·redis·学习·哈希算法
HED24 分钟前
用扣子快速手撸人生中第一个AI智能应用!
前端·人工智能
DN金猿28 分钟前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子29 分钟前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
Invinciblenuonuo32 分钟前
FreeRTOS学习笔记【10】-----任务上下文切换
笔记·学习
好奇龙猫33 分钟前
日语学习-日语知识点小记-构建基础-JLPT-N4阶段(11): てあります。
学习
志存高远6641 分钟前
Kotlin 的 suspend 关键字
前端
www_pp_1 小时前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui