使用create-react-app搭建react应用

想要像Bootstrap直接引用就可以使用去使用React.js基本上是不可能的。使用React需要一堆的工具和库,需要Babel用于编译,Redux等第三方状态管理工具来组织代码。所以这里根据官方推荐的工具create-react-app工具来搭建react应用。使用这个工具能够实现“一条龙服务”,帮我们做好了各种配置和依赖,做到了“开箱即用”。

工具地址:https://github.com/facebookincubator/create-react-app

基本环境安装:



在使用之前要确保机器上安装了node,下载地址:https://nodejs.org/en/

含泪建议:Windows用户推荐安装LTS版本的node,使用最新版在安装工具时可能会不成功,这可能是npm的版本问题导致的)

安装好环境后,按照官网的步骤安装create-react-app即可:

   npm install -g create-react-app

这条命令可以在机器上安装一条create-react-app的命令,可以直接使用该命令构建一个react工程:

   create-react-app react-demo

贴士:

          在安装过程中可能会比较慢,很可能是因为npm下载时候从国外源下载的缘故。执行上面命令之前先把npm改成国内的taobao镜像就好了    

    npm config set registry https://registry.npm.taobao.org

下载完成后可以启动工程,进入工程目录然后输入:

    cd react-demo
    npm start

运行成功后命令行显示如下:

并且会自动打开浏览器 http://localhost:3000(我的标题在src/App.js中做过相应修改):

至此就大功告成了,可以开始定制自己的react应用了!

				
时间: 2024-10-19 19:40:33

使用create-react-app搭建react应用的相关文章

React漫漫学习路之 利用Create React App命令创建一个React应用

所谓万事开头难,本文旨在为初探React的同学,建立第一个最基本的react应用. Create React App是Facebook官方的一个快速构建新的 React 单页面应用的脚手架工具,它可以帮你配置开发环境,以便你可以使用最新的 JavaScript 特性,还能提供很棒的开发体验,并为生产环境优化你的应用.(如果你使用过vue-cli构建vue应用,那么此处可类比) 话不多说,直接开始. 安装 全局安装create-react-app npm install -g create-rea

[React] {svg, css module, sass} support in Create React App 2.0

create-react-app version 2.0 added a lot of new features. One of the new features is added the svgr webpack loader to wrap SVGs in React components as a named export. This let’s you either grab the filename from the default export or grab a wrapped S

webpack+babel+ES6+react环境搭建

webpack+babel+ES6+react环境搭建 步骤: 1 创建项目结构 注意: 先创建一个项目目录  react  这个名字自定义,然后进入到这个目录下面 mkdir app //创建app目录 用来存放项目源文件 mkdir dist // 创建dist目录 用来存放打包好的文件 touch .gitignore //创建.gitignore 用来添加git 忽略的文件 touch webpack.config.js //创建webpack的配置文件 cd app //进入到app目

[转载]Sublime Text 3 搭建 React.js 开发环境

[转载]Sublime Text 3 搭建 React.js 开发环境 Sublime有很强的自定义功能,插件库很庞大,针对新语言插件更新很快,配合使用可以快速搭建适配语言的开发环境. 1. babel-sublime 支持ES6, React.js, jsx代码高亮,对 JavaScript, jQuery 也有很好的扩展.关于 babel 的更多介绍可以看这里:为什么说Babel将推动JavaScript的发展 安装 PC:Ctrl+shift+p Mac:Cmd+shift+p 打开面板输

搭建React Native开发环境遇到的几个问题

根据http://blog.csdn.net/itpinpai/article/details/50809068这篇文章初步搭建React Native 开发环境, 遇到几个问题 首先端口可能被占用了, 访问8081时提示无法访问 解决方法: 在运行react-native start时添加参数--port 8899, 或者在package.json中修改"scripts"中参数, 添加端口号, 或者修改项目下的node_modules\react-native\local-cli\s

Webpack笔记(二)——搭建React开发环境

前几天一直在学习webpack,总算比之前学习的时候有了点收获,所以在昨天发布了一篇webpack入门笔记,今天继续使用webpack练了练手,搭建了一个React开发环境,如果还不熟悉的童鞋可以看一下昨天发布的笔记:入门webpack笔记 一.初始化项目文件夹 在任意目录下,新建一个文件夹作为你的项目文件夹,命名随意.随后使用命令行工具,切换到该文件夹,键入npm init进行初始化(遇到的问题一直回车就好了),初始化完成之后可以看到生成了一个package.json文件. 随后在该项目文件夹

[Web 前端] webstorm 快速搭建react项目

cp from : https://blog.csdn.net/qq_39207948/article/details/79467144 前端新手如何安装webstorm ,初步搭建react项目 下载安装webstorm:配置成功: 配置成功后就可以开启webstorm项目了.(存微信收藏..) 1:在webstorm下配置node环境: 2:完成之后: React官方脚手架地址: https://github.com/facebook/create-react-app 在终端下安装执行npm

【react自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目

前言 一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功成为当前最火热的三大前端框架之一.相比于Angular,React更加轻量.而相对于另一个轻量级前端框架Vue来说,React虽然学习和使用起来难度稍微大一些,但是React的社区相对来说人气更旺,而且在移动端的开发上面,大名鼎鼎的React Native更是尽显优势,在代码性能上要好过Vue框架.

02 基于umi搭建React快速开发框架(国际化)

前言 之前写过一篇关于React的国际化文章,主要是用react-intl库,雅虎开源的.react-intl是用高阶组件包装一层来做国际化. 基于组件化会有一些问题,比如在一些工具方法中需要国际化,就需要自己去实现了.在umi-react快速开发框架我们采用 react-intl-universal库来实现,不仅支持组件化调用,也支持动态调用,实现国际化. react-intl-universal 用法 安装 npm install react-intl-universal --save 初始