React笔记:快速构建脚手架(1)
1. Create React APP
React官方提供的脚手架工程Create React App:https://github.com/facebook/create-react-app
Create React App基于最佳实践,将Webpack、Babel、ESLint等工具的配置进行封装。
1.1 安装
全局安装:
npm install -g create-react-app
1.2 创建应用
npx create-react-app libing.react
1.3 运行应用
cd libing.react
npm start
应用启动成功后,在浏览器中打开http://localhost:3000/,即可访问应用。
1.4 HelloWorld组件
新增组件:src/components/HelloWorld.js
import React, { Component } from "react" class HelloWorld extends Component {
render() {
return (
<div> Hello World! </div>
);
}
} export default HelloWorld;
修改App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import HelloWorld from './components/HelloWorld'
import './App.css'; class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<HelloWorld />
</header>
</div>
);
}
} export default App;
React笔记:快速构建脚手架(1)的更多相关文章
- 官方 React 快速上手脚手架 create-react-app
此文简单讲解了官方 React 快速上手脚手架的安装与介绍. 1. React 快速上手脚手架 create-react-app 为了快速地进行构建使用 React 的项目,FaceBook 官方发布 ...
- vue2.x利用脚手架快速构建项目并引入bootstrap、jquery
要使用vue-cli脚手架搭建项目,首先需要安装node.js Node.js官网:https://nodejs.org/en/download/ 选择你对应的系统即可下载,下载完成后傻瓜式安装即可. ...
- 使用create-react-app 快速构建 React 开发环境以及react-router 4.x路由配置
create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. create-react-app 自动创建的项目是基于 Webpack + E ...
- 【React】使用 create-react-app 快速构建 React 开发环境
create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. create-react-app 自动创建的项目是基于 Webpack + E ...
- [原创]react-vio-form 快速构建React表单应用
react-vio-form 是一个react的快速轻量表单库,能快速实现表单构建.提供自定义表单格式.表单校验.表单信息反馈.表单信息隔离等功能.可采用组件声明或者API的形式来实现表单的功能 de ...
- 快速构建 React 开发环境
使用 create-react-app 快速构建 React 开发环境 create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. cre ...
- 使用Vite快速构建Vue3+ts+pinia脚手架
一.前言 vue3的快速更新,很多IT发展快的地区在22开始都已经提上日程,小编所在的青岛好像最近才有点风波.vue3的人才在青岛还是比较稀缺的哈,纯属小编自己的看法,可能小编是个井底之蛙!! vue ...
- 基于vue-cli快速构建
基于vue-cli快速构建 https://www.jianshu.com/p/2769efeaa10a Vue是近两年来比较火的一个前端框架(渐进式框架吧),与reactjs和angularjs ...
- 五分钟学习React(五):React两种构建应用方式选择
经过这四期的讲解,我们从Hello World应用入手,解释了React最重要的概念JSX,以及两种不同模式的应用构建方法.这一讲我们着重对比传统模式和新模式下的React项目构建,从而为初学者提供学 ...
随机推荐
- spring里的三大拦截器
Filter 新建 TimeFilter @Component public class TimeFilter implements Filter { @Override public void in ...
- Kubernetes知识小普及
大部分概念Kubernetes官网都有详细介绍,Kubernetes中文官网 https://kubernetes.io/zh/docs/tutorials/kubernetes-basics/ 官网 ...
- SpringBoot + Spring Security 学习笔记(二)安全认证流程源码详解
用户认证流程 UsernamePasswordAuthenticationFilter 我们直接来看UsernamePasswordAuthenticationFilter类, public clas ...
- Asp.NetCore轻松学-实现一个轻量级高可复用的RabbitMQ客户端
前言 本示例通过对服务订阅的封装.隐藏细节实现.统一配置.自动重连.异常处理等各个方面来打造一个简单易用的 RabbitMQ 工厂:本文适合适合有一定 RabbitMQ 使用经验的读者阅读,如果你还没 ...
- Git 安装配置手册
Git 安装配置手册 首先我们要了解 Git 是类似于 SVN 用来管理项目的 首先要先下载 Git ,这个东西相当于一个核,是该功能的核心 下载地址(<https://gitforwindow ...
- 【Redis】LRU算法和Redis的LRU实现
LRU原理 在一般标准的操作系统教材里,会用下面的方式来演示 LRU 原理,假设内存只能容纳3个页大小,按照 7 0 1 2 0 3 0 4 的次序访问页.假设内存按照栈的方式来描述访问时间,在上面的 ...
- 【Redis】redis各类型数据存储分析
一.简介和应用 Redis是一个由ANSI C语言编写,性能优秀.支持网络.可持久化的K-K内存数据库,并提供多种语言的API.它常用的类型主要是 String.List.Hash.Set.ZSet ...
- css选择器概述
css选择器种类 id选择器 类选择器.属性选择器.伪类选择器 元素选择器.伪元素选择器 通配符选择器.子类选择器.后代选择器.相邻兄弟选择器.选择器分组 一.id选择器 <p id=" ...
- Vue2.0 --- vue-cli脚手架中全局引入JQ
第一步:安装jQuery npm/cmpn方式安装(默认安装1.7.X版本的JQ) npm/cnpm install jQuery 如果想安装更高版本的JQ那么可以选择在package.json文件下 ...
- 教你一招 | 用Python实现简易可拓展的规则引擎
做这个规则引擎的初衷是用来实现一个可序列号为json,容易拓展的条件执行引擎,用在类似工作流的场景中,最终实现的效果希望是这样的: 简单整理下需求 执行结果最终返回=true= or false 支持 ...