在开发React项目前最关键的当然是项目的创建，现在的前端工程化使得前端项目的创建也变得越来越复杂，在这里介绍两种从零开始创建React项目的方式，分别是在浏览器中直接引入、使用官方脚手架create-react-app。
怎么从0搭建react项目
一、浏览器中通过标签直接引入
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>
接下来我会以一个完整的html示例来给大家展示，在刚开始学习React的时候可以使用这种方式。
1、首先创建一个index.html文件
2、接下来引入相关的包，在body标签中创建Dom结构以及script标签
3、script标签的type必须是"text/babel"。
然后在scirpt中写Reac
来源gao!%daima.com搞$代*!码网
t代码
<!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。
二、使用官方脚手架creact-react-app
这种方式其实比较简单，官方以及替我们封装好了需要的库，我们只要直接使用就可以来。
使用脚手架也有两种方式。
1、第一种是官方网站教程给出的方式，使用npx命令
npx create-react-app <项目名>
我们用这条命令来创建一个my-app的项目
npx create-react-app my-app
创建完成后会在当前目录下出现一个my-app的文件夹，进入my-app目录，运行npm run start
cd my-app npm run start
然后就可以在浏览器中看到默认的页面
2、第二种使用脚手架的方式，其实相差不大，这是方式是使用npm命令，和vue-cli非常类似。
首先通过npm全局安装create-react-app
npm install -g create-react-app
mac用户如果安装不成功可以加上sudo命令
sudo npm install -g create-react-app
然后使用create-react-app命令来创建项目
create-react-app <项目名>
创建my-app项目
create-react-app my-app
创建出的项目和第一种方式创建的项目一致。
本文来自React答疑栏目，欢迎学习！
以上就是怎么从0搭建react项目的详细内容，更多请关注gaodaima搞代码网其它相关文章！
转载请注明原文链接：怎么从0搭建react项目
