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

所谓万事开头难,本文旨在为初探React的同学,建立第一个最基本的react应用。

Create React App是Facebook官方的一个快速构建新的 React 单页面应用的脚手架工具,它可以帮你配置开发环境,以便你可以使用最新的 JavaScript 特性,还能提供很棒的开发体验,并为生产环境优化你的应用。(如果你使用过vue-cli构建vue应用,那么此处可类比)

话不多说,直接开始。

安装

全局安装create-react-app

npm install -g create-react-app

tips:如果安装失败,更新node与npm至最新版本重试

创建新应用

create-react-app my-app

当前目录下会创建一个my-app的文件夹,目录结构如下:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   └── favicon.ico
│   └── index.html
│   └── manifest.json
└── src
    └── App.css
    └── App.js
    └── App.test.js
    └── index.css
    └── index.js
    └── logo.svg
    └── registerServiceWorker.js

运行

cd my-app
npm start // or yarn start

进入my-app目录,运行npm start或yarn start

此时会打开默认浏览器访问http://localhost:3000(如果浏览器没有自动打开,可手动访问http://localhost:3000)

接下来你就可以通过修改index.js文件创建你自己的应用了!

时间: 2024-10-15 07:22:47

React漫漫学习路之 利用Create React App命令创建一个React应用的相关文章

React漫漫学习路之 React Router

React Router 是一个基于 React 之上的强大路由库,它可以让你向应用中快速地添加视图和数据流,同时保持页面与 URL 间的同步. 目前react-router最新版本已经到4.0+,因为新的版本是一次非常大的改动,所以这里直接讨论4.0以上版本. 引用 react-router // React Router 核心 react-router-dom // 用于 DOM 绑定的 React Router react-router-native // 用于 React Native

react用脚手架创建一个react项目

官网地址:https://react.docschina.org/ 确保本地安装了Node.js node的版本大于8.10    npm的版本大于5.6 1.在本地的某个位置创建一个文件夹,执行以下代码: npx create-react-app my-app(项目名称 可以自定义) 等待...... 创建好项目后,跳转到项目跟目录: cd my-app 然后运行项目: npm start 弹出这个页面代表项目已经创建好了! 原文地址:https://www.cnblogs.com/fqh12

如何利用Facebook的create-react-app脚手架创建一个基于ant design mobile的项目

引言: create-react-app是Facebook发布的一款全局的命令行工具用来创建一个新的项目. 通常我们开始做一个react web或者 app 项目的时候,都会自己利用 npm 或者 yarn 安装项目所需要的一些依赖,再写 webpack.config.js ,一系列复杂的配置,搭建好开发环境后写src源代码. 现在,如果你想要搭建一个完整的 react 项目环境,已经不需要自己动手布置许许多多的东西,利用 create-react-app 工具,就能轻松帮你配置好一个 reac

Sencha学习笔记4: Creating your First App - 官方创建您的第一个Sencha Touch应用指导

英文原文地址:http://docs.sencha.com/touch/2.3.1/#!/guide/first_app (天地会珠海分舵声明:本翻译文章建议读者参照英文原文进行阅读,因为原文包含了实时代码编辑和预览的功能,这在csdn是不能做到的,所以下面只是提供了相应的截图,而非真实的演示) Required Software 软件需求 请参考<Sencha学习笔记1: Getting Started with Sencha Touch - 官方Sencha Touch入门指南> Crea

利用node的http模块创建一个简单的http服务器

成功搭建node环境后,利用node.js的http请求创建一个简单的HTTP服务器. 1.在你的项目的文件夹创建一个app文件,同时在文件夹app中创建app.js的node.JS文件.用任意编辑器都可以 2.在终端打开node app.js 指令,输入正确后悔看到屏幕上面输出信息:Server running at http://127.0.0.1:1337,表明已经成功启用本地的1337的接口http服务器 3.打开任意的浏览器,输入server服务器地址:http://127.0.0.1

脚手架创建一个React项目

一.安装 1.安装node.js 官网地址 https://nodejs.org/en/ 进入后点击下载,官方网站会根据你的系统类型推荐最适合你安装的版本.(如果已经安装了node.js跳过此步)如下图 : 点击即可下载. 检测node.js是否安装成功,最直接有效的办法就是在命令提示符中输入 node -v 如下图 如果出现node的版本号则表示安装成功,可以看到我的node版本是10.15.3. 2.全局安装: 安装淘宝镜像 这样做的目的是使用国内的服务器下载速度快一点. npm insta

如何从0创建一个react项目

1. 确保本机电脑安装了yarn和node: 2. 在需要安装的文件夹目录下输入:create-react-app  +(项目名称): PS:上图使用的软件为webStorm 3. 此时一个简单的react项目就已经创建好了, react 项目目录下的文件的意思: ①. public: 文件夹中是 index.html存放目录,也就是React根页面的所在地 ②. src: 用于存放js文件,也就是项目开发中的主要区域 ③. package.json: 用于记录项目信息,以及外部依赖包的导入信息

Appium学习路—脚本篇(启动app)

启动之前的准备 1.脚本执行前,需要先启动appium的server端, 启动server方法: 打开appium客户端,点击右上角的Launch 2.iOS的测试只能在mac本上做 一.Android启动app python启动脚本如下:   from appium import webdriver desired_caps = {} desired_caps['platformName'] = 'Android' desired_caps['platformVersion'] = '4.4'

#[Composer学习笔记]Part1:安装composer并通过composer创建一个项目

安装composer 这里分享的是linux下的composer安装: 首先,创建一个目录放置composer,并进入目录: mkdir /opt/composer cd /opt/composer 下载composer,下载成功后注册composer.phar为全局命令 curl -sS https://getcomposer.org/installer | /opt/php/bin/php ln -s /opt/composer/composer.phar /bin/composer.pha