怎么从0搭建react项目

怎么从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中写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

创建出的项目和第一种方式创建的项目一致。

Image placeholder
前端答疑
未设置
  25人点赞

没有讨论,发表一下自己的看法吧

推荐文章
如何快速新建react项目?

创建一个react项目有三种方式:1.create-react-app快速脚手架(简单,类似于vue-cli工具)2.webpack一步一步构建3.第三方脚手架(generator-react-web

如何新建react项目

如何新建react项目前文中,我们介绍过了2种react项目的搭建方式,分别是webpack的方式搭建和create-react-app脚手架的方式搭建感兴趣的同学可以点击下方链接,进行学习。webp

怎么创建react组件

怎么创建react组件创建react组件有3种方式,分别是无状态函数式组建、es5原生方式、继承React.Component(ES6形式)。一、无状态函数式组建无状态函数式组件,也就是你无法使用St

怎么新建一个react项目

怎么新建一个react项目现在比较流行和常用的方式就是利用create-react-app脚手架来帮我们搭建一个初始的react项目,准备工作安装node环境,这个去百度搜索下node安装,在命令行中

怎么编译react项目

怎么编译react项目使用create-react-app脚手架搭建的react项目,只需要使用npmrunbuild命令就可以编译项目了,代码会被编译到build目录中。一、create-react

如何运行一个react项目?

React起源于Facebook的内部项目,因为该公司对市场上所有JavaScriptMVC框架,都不满意,就决定自己写一套,用来架设Instagram的网站。做出来以后,发现这套东西很好用,就在20

如何用vscode启动react项目

如何用vscode启动react项目要求:●具有nodejs环境、已安装npm●已安装vscode首先使用create-react-app脚手架创建一个项目。create-react-appdemo1

如何运行别人的react项目

如何运行别人的react项目1、从网上下载项目到本地,放在自己的工作空间中2、下载好的项目缺少项目依赖环境,我们需要自己安装。npminstall这个步骤将会新建该项目的node_modules文件夹

如何启动react项目

如何启动react项目1、首先打开命令提示符工具开始——菜单——运行——cmd2、然后使用cd命令进入项目目录cdmy-app3、接着运行npmstart即可注:如果项目目录中没有node_modul

如何将react项目部署到服务器

如何将react项目部署到服务器前提要求:●nodejs环境●一个react项目●一个服务器(本地也行)1、首先打开项目目录,按下shift+右键,打开命令提示符,输入打包命令npmrunbuild2

如何访问已启动的react项目

如何访问已启动的react项目1、运行react项目都会开启一个终端窗口,只需要打开窗口,查看项目的运行地址即可。上面这个项目的地址是http://localhost:3000/,打开浏览器输入这个地

如何查看react项目端口?

如何查看react项目端口?react项目端口默认是3000,定义在node_modules\react-scripts\bin\react-scripts.js文件中,可以通过文本编辑器打开它,搜索

前端实现excel导出和导入(react项目)

课程推荐:web全栈就业班--融职教育精品课程 最近公司有个新需求,需要前端导出规定模板的excel,导入的时候前端解析excel文件,数据处理一下传给后台,下面分享下纯前端实现excel的导出和导入

用户从0到5亿,中国移动 OneLink 架构演进之路

导语本文根据范良泽老师在2019年10月31日【第十一届中国系统架构师大会(SACC)】现场演讲内容整理而成。范良泽(中移物联网有限公司系统架构专家)2008年毕业于上海交通大学,曾供职于华为、Ope

从0到1,马蜂窝大交通团队如何构建高效研发流程体系?

“旅游之前,先上马蜂窝”已经成为许多人习惯性的选择。2019年5月,马蜂窝完成了新一轮融资,金额达2.5亿美元。这也标志着通过集内容、社区、交易为一体的消费决策场景构建,从攻略社区起家的马蜂窝开始迈入

你真的了解 React 吗?这里有 50 个 React 面试问题

如果你是一位有理想的前端开发人员,并且正在准备面试,那么这篇文章就是为你准备的。本文收集了React面试中最常见的50大问题,这是一份理想的指南,让你为React相关的面试做好充分的准备工作。首先我

React Hooks 完全指南,读React作者博文感悟(2W字精华)

阅读facebook大佬:DanAbramov的文章颇有感悟大佬github地址https://github.com/gaearon 重点总结 useEffect是同步的 状态是捕获的当前props

react学习路线图,学习react就是有捷径

课程推荐:web全栈开发就业班--拿到offer再缴学费--融职教育 文章摘自:https://sunmenglei.blog.csdn.net/article/details/108554788

项目需求分析和基础环境搭建笔记

ENGINE=InnoDB表示将数据库的引擎设置为InnoDB,从MySQL5.6开始默认使用该引擎。DEFAULTCHARSET=utf8表示设置数据库的默认字符集为utf8AUTO_INCREME

项目需求分析和基础环境搭建笔记

源代码:H5前端精品项目源码前端:简单的商城模版,响应式商城模板后端:实用的后台模版,简单通用文章系统后台模板 以简单的商城模版为例,打开先找index.html文件 简单通用文章系统后台模板 所有的

项目需求分析和基础环境搭建笔记

商务系统需求分析说明书1.编写目的2.项目背景,设计背景3.功能结构4.功能描述5.交易管理6.用户管理7.项目流程图8.E-R图