react 创建新页面_如何新建react项目

在开发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答疑栏目，欢迎学习！