在开发 React 项目前最关键的当然是项目的创建, 现在的前端工程化使得前端项目的创建也变得越来越复杂, 在这里介绍两种从零开始创建 React 项目的方式, 分别是在浏览器中直接引入, 使用官方脚手架 create-react-App.
一, 浏览器中通过标签直接引入
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 中写 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.
二, 使用官方脚手架 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 答疑 https://www.html.cn/qa/react/ 栏目, 欢迎学习!
来源: http://www.css88.com/qa/react/15066.html