大家好，又见面了，我是你们的朋友全栈君。
在开发React项目前最关键的当然是项目的创建，现在的前端工程化使得前端项目的创建也变得越来越复杂，今天我们介绍的是浏览器中直接引入的方式搭建react项目。
如何新建react项目
前文中，我们介绍过了2种react项目的搭建方式，分别是 webpack的方式搭建 和 create-react-app脚手架的方式搭建
感兴趣的同学可以点击下方链接，进行学习。webpack的方式搭建项目：怎样搭建react项目
create-react-app的方式搭建项目：怎么新建一个react项目
今天，我们介绍下，如何使用浏览器，直接引入react，react-dom搭建一个项目。
浏览器中通过标签直接引入
React框架有两个核心的包，分别是react以及react-dom,如何想直接在浏览器中使用React，那么把这两个包直接引入就可以了。
如果想要使用JSX语法，那么必须引入Babel。
1、首先创建一个index.html文件
React
接下来引入相关的包
React
在body标签中创建Dom结构以及script标签，这里因为引入了babel,所以script标签的type必须是”text/babel”。
React
// 必须添加type=”text/babel”,否则不识别JSX语法
然后在scirpt中写React代码
React
// 必须添加type=”text/babel”,否则不识别JSX语法
class App extends React.Component {
render() {
return(
Hello World
)
}
}
ReactDOM.render(, document.getElementById(‘app’))
最后在浏览器中打开index.html,页面上会渲染出Hello World。
这样，一个简单的react项目就搭建完成了。
本文来自React答疑栏目，欢迎学习！
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/129726.html原文链接：https://javaforall.net
