react_1

最新推荐文章于 2023-01-05 15:29:29 发布

wisherg

最新推荐文章于 2023-01-05 15:29:29 发布

阅读量561

点赞数

分类专栏： web开发课程

本文链接：https://blog.csdn.net/wisherg/article/details/89321798

版权

web开发课程专栏收录该内容

7 篇文章 0 订阅

订阅专栏

react

以下内容修改自下面两个链接：

http://www.runoob.com/react

http://www.ruanyifeng.com/blog/2015/03/react.html

React 是一个用于构建用户界面的 JAVASCRIPT 库。
尽量减少dom操作，提供了更方便基于js的页面渲染逻辑

react 的功能

写网站，开发h5-app http://www.runoob.com/react/react-install.html
开发原生app：react-native :https://reactnative.cn/

第一个react实例

注意导入了外部的库（也可以选择下载到本地后再导入）
下面代码一共用了三个库： react.js 、react-dom.js 和 babel.min.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成
script 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type=“text/babel”
React 使用 JSX 来替代常规的 JavaScript,这样让元素插入更方便
所有需要显示的内容必须是一整块，最上层不能有多个兄弟
ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
	<h1>Hello, world!</h1>,
	document.getElementById('example')
);
</script>

</body>
</html>

其他同上

jsx可以通过变量定义

const element = <h1>Hello, world!</h1>;
ReactDOM.render(
    element,
    document.getElementById('example')
);

课间题

1 请用react输出如下列表：

春眠不觉晓
处处闻啼鸟

jsx语法

<>按照html输出
{}内些代码作为js输出

names是变量

var names = ['Alice', 'Emily', 'Kate'];

ReactDOM.render(
  <p>{names}</p>,
  document.getElementById('example')
);

如果把names作为元素会直接逐个输出

var arr = [
  <h1>Alice</h1>,
  <h2>Kate</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

可以通过map做映射

var names = ['Alice', 'Emily', 'Kate'];

ReactDOM.render(
  <div>
  {
    names.map(function (name) {
      return <div>Hello, {name}!</div>
    })
  }
  </div>,
  document.getElementById('example')
);

基于react的循环实现

var names = ["ccc","bbb","aaa"];

var dd=[]
for (var i = 0; i < 4; i++){
		dd.push(<div>{names[i]}</div>)
}

ReactDOM.render(
  <div>{dd}
  </div>,
  document.getElementById('example')
);

课间题

1 请通过react的map和循环方法分别输出如下格式《春晓》

春眠不觉晓

处处闻啼鸟

夜来风雨声

花落知多少

2，给定一个数组arr = [4,3,2,5,1,3,2]，通过react在页面输出其中大于3的数

3，给定一个数组arr = [4,3,2,5,1,3,2]，通过react在页面输出其中大于3的数，并且做如下格式输出：

Find, 4

Find, 5

jsx的样式
为什么不能直接把样式写入jsx元素中？
注意在jsx中class必须写成className

	<style>
	.foo{
		color:red;
	}
	</style>
	<div id="root"></div>
	<script type="text/babel">
	const element = <h1 className="foo">Hello, world</h1>;
	ReactDOM.render(element, document.getElementById('root'));
	</script>

    <div id="example"></div>
    <script type="text/babel">
      var myStyle = {
         fontSize: 100,
         color: '#FF0000'
      };
      ReactDOM.render(
      	<h1 style = {myStyle}>菜鸟教程</h1>,
      	document.getElementById('example')
      );
    </script>

在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代

    <div id="example"></div>
    <script type="text/babel">
	  var i = 1;
      ReactDOM.render(
      	<div>
      	  <h1>{i == 1 ? 'True!' : 'False'}</h1>
        </div>
      	,
      	document.getElementById('example')
      );

课间题

1，请用react的className和变量引入的方法分别做出如下带样式的显示
在这里插入图片描述

2，请通过react实现如下彩色的《春晓》（注意这里循环要传递两个不同的数组进去，其中颜色样式可以写成c2=[{color:“blue”},{color:“pink”},{color:“yellow”},{color:“red”}]）

在这里插入图片描述

函数式组件

React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件
下面代码中，变量 HelloMessage 就是一个组件类。模板插入时，会自动生成 HelloMessage 的一个实例（下文的"组件"都指组件类的实例）。所有组件类都必须有自己的 render 方法，用于输出组件。
注意，组件类的第一个字母必须大写，否则会报错，比如HelloMessage不能写成helloMessage。另外，组件类只能包含一个顶层标签，否则也会报错。

<div id="example"></div>
<script type="text/babel">
function HelloMessage(props) {
	return <h1>Hello World!</h1>;
}

const element = <HelloMessage />;

ReactDOM.render(
	element,
	document.getElementById('example')
);
</script>

如果我们需要向组件传递参数，可以使用 this.props 对象
注意传递参数的方法是写在组件的属性里
下面实例中 name 属性通过 props.name 来获取

<div id="example"></div>
<script type="text/babel">
function HelloMessage(props) {
	return <h1>Hello {props.name}!</h1>;
}

const element = <HelloMessage name="Runoob"/>;

ReactDOM.render(
	element,
	document.getElementById('example')
);
</script>

课间题

1，通过react定义一个函数组件，输入任意字符串及其颜色，然后让其按照输入的颜色作为斜体格式输出

wisherg

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react_1

react以下内容修改自下面两个链接：http://www.runoob.com/reacthttp://www.ruanyifeng.com/blog/2015/03/react.htmlReact 是一个用于构建用户界面的 JAVASCRIPT 库。尽量减少dom操作，提供了更方便基于js的页面渲染逻辑react 的功能写网站，开发h5-app http://www.run...
复制链接

扫一扫

专栏目录