React-2----react基础

最新推荐文章于 2022-10-03 20:01:39 发布

水蜜桃那么甜

最新推荐文章于 2022-10-03 20:01:39 发布

阅读量175

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/Lemontree_fu/article/details/103423171

版权

这篇博客介绍了React的基础知识，包括React的组件化思想、单向数据流原理、虚拟DOM的优势，以及如何通过create-react-app创建项目。文章详细阐述了第一个React组件的创建，包括引入Bootstrap和编写组件代码。此外，还探讨了React组件的生命周期，列举了不同阶段的关键方法，并解释了如何在组件中处理数据更新和传递。

摘要由CSDN通过智能技术生成

1 认识

由facebook开发，只提供了MVC中的V。

优势：

①是组件化的，将js与html标签结合到一起

②单向数据流

③虚拟DOM树

下面为一段代码，初步认识react

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	<div id="app">
		
	</div>
	<script type="text/babel">
		class HelloMessage extends React.Component {
		  render() {
		    return (
		      <div>
		        Hello {this.props.name}
		      </div>
		    );
		  }
		}
		
		ReactDOM.render(
		  <HelloMessage name="Taylor" />,
		  document.getElementById('app')
		);
	</script>
	<script src="https://cdn.bootcss.com/react/16.10.2/umd/react.development.js"></script>
	<script src="https://cdn.bootcss.com/react-dom/16.10.2/umd/react-dom.development.js"></script>
	<script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js"></script>
</body>
</html>

2 create-react-app

有以下几个步骤

npm install -g create-react-app

create-react-app my-app

cd my-app

npm start

也可以打包

yarn build

3 第一个组件

首先引入bootstrap,在index.html里面

<link href="https://cdn.bootcss.com/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet">

然后在App.js里面写代码

import React,{Component} from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
	render(){
		return (
			<div className="container">
			   <div className="row">
			       <div className="col-xs-1 col-xs-offset-11">
				      <h1>hello world</h1>
				   </div>
			   </div>
			</div>
		)
	}
}


export default App;

4 剩下的内容

在src下新建一个components的目录，然后把组件都放到里边。我们新建一个header.js和home.js,内容分别为

import React,{Component} from 'react';


class header extends Component {
	render(){
		return (
			<div className="container">
			   <div className="row">
			       <div className="col-xs-1 col-xs-offset-11">
				      <h1>header</h1>
				   </div>
			   </div>
			</div>
		)
	}
}


export default header;

import React,{Component} from 'react';

class home extends Component {
	render(){
		return (
			<div className="container">
			   <div className="row">
			       <div className="col-xs-1 col-xs-offset-11">
				      <h1>home</h1>
				   </div>
			   </div>
			</div>
		)
	}
}


export default home;

然后在app.js里引用

最低0.47元/天解锁文章

水蜜桃那么甜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React-2----react基础

1 认识由facebook开发，只提供了MVC中的V。优势：①是组件化的，将js与html标签结合到一起②单向数据流③虚拟DOM树下面为一段代码，初步认识react<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name=...
复制链接

扫一扫

专栏目录