点击刷新
如何新建react项目
前文中，我们介绍过了2种react项目的搭建方式，分别是 webpack的方式搭建 和 create-react-app脚手架的方式搭建
感兴趣的同学可以点击下方链接，进行学习。
webpack的方式搭建项目：怎样搭建react项目
create-react-app的方式搭建项目：怎么新建一个react项目
今天，我们介绍下，如何使用浏览器，直接引入react，react-dom搭建一个项目。
浏览器中通过标签直接引入
React框架有两个核心的包，分别是react以及react-dom,如何想直接在浏览器中使用React，那么把这两个包直接引入就可以了。
<!-- 引入react --> <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <!-- 引入react-dom --> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
如果想要使用JSX语法，那么必须引入Babel。
<!-- 引入Babel,使浏览器可以识别JSX语法，如果不使用JSX语法，可以不引入 --> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
1、首先创建一个index.html文件
<!DOCTYPE html> <html> <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>React</title> </head> <body> </body> </html>
接下来引入相关的包
<!DOCTYPE html> <html> <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>React</title> <!-- 引入react --> <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <!-- 引入react-dom --> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> <!-- 引入Babel,使浏览器可以识别JSX语法，如果不使用JSX语法，可以不引入 --> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> </head> <body> </body> </html>
在body标签中创建Dom结构以及script标签，这里因为引入了babel,所以script标签的type必须是"text/babel"。
<!DOCTYPE html>
<html>
<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>React</title>
<!-- 引入react -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<!-- 引入react-dom -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 引入Babel,使浏览器可以识别JSX语法，如果不使用JSX语法，可以不引入 -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
// 必须添加type="text/babel",否则不识别JSX语法
</script>
</body>
</html>然后在scirpt中写React代码
<!DOCTYPE html>
<html>
<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>React</title>
<!-- 引入react -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<!-- 引入react-dom -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 引入Babel,使浏览器可以识别JSX语法，如果不使用JSX语法，可以不引入 -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
// 必须添加type="text/babel",否则不识别JSX语法
class App extends React.Component {
render() {
return(
<div>
<h1>Hello World</h1>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'))
</script>
</body>
</html>最后在浏览器中打开index.html,页面上会渲染出Hello World。
这样，一个简单的react项目就搭建完成了。
© 著作权归作者所有
举报
发表评论
0/200
