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)的更多相关文章

  1. 官方 React 快速上手脚手架 create-react-app

    此文简单讲解了官方 React 快速上手脚手架的安装与介绍. 1. React 快速上手脚手架 create-react-app 为了快速地进行构建使用 React 的项目,FaceBook 官方发布 ...

  2. vue2.x利用脚手架快速构建项目并引入bootstrap、jquery

    要使用vue-cli脚手架搭建项目,首先需要安装node.js Node.js官网:https://nodejs.org/en/download/ 选择你对应的系统即可下载,下载完成后傻瓜式安装即可. ...

  3. 使用create-react-app 快速构建 React 开发环境以及react-router 4.x路由配置

    create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. create-react-app 自动创建的项目是基于 Webpack + E ...

  4. 【React】使用 create-react-app 快速构建 React 开发环境

    create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. create-react-app 自动创建的项目是基于 Webpack + E ...

  5. [原创]react-vio-form 快速构建React表单应用

    react-vio-form 是一个react的快速轻量表单库,能快速实现表单构建.提供自定义表单格式.表单校验.表单信息反馈.表单信息隔离等功能.可采用组件声明或者API的形式来实现表单的功能 de ...

  6. 快速构建 React 开发环境

    使用 create-react-app 快速构建 React 开发环境 create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. cre ...

  7. 使用Vite快速构建Vue3+ts+pinia脚手架

    一.前言 vue3的快速更新,很多IT发展快的地区在22开始都已经提上日程,小编所在的青岛好像最近才有点风波.vue3的人才在青岛还是比较稀缺的哈,纯属小编自己的看法,可能小编是个井底之蛙!! vue ...

  8. 基于vue-cli快速构建

    基于vue-cli快速构建 https://www.jianshu.com/p/2769efeaa10a   Vue是近两年来比较火的一个前端框架(渐进式框架吧),与reactjs和angularjs ...

  9. 五分钟学习React(五):React两种构建应用方式选择

    经过这四期的讲解,我们从Hello World应用入手,解释了React最重要的概念JSX,以及两种不同模式的应用构建方法.这一讲我们着重对比传统模式和新模式下的React项目构建,从而为初学者提供学 ...

随机推荐

  1. spring里的三大拦截器

    Filter 新建 TimeFilter @Component public class TimeFilter implements Filter { @Override public void in ...

  2. Kubernetes知识小普及

    大部分概念Kubernetes官网都有详细介绍,Kubernetes中文官网 https://kubernetes.io/zh/docs/tutorials/kubernetes-basics/ 官网 ...

  3. SpringBoot + Spring Security 学习笔记(二)安全认证流程源码详解

    用户认证流程 UsernamePasswordAuthenticationFilter 我们直接来看UsernamePasswordAuthenticationFilter类, public clas ...

  4. Asp.NetCore轻松学-实现一个轻量级高可复用的RabbitMQ客户端

    前言 本示例通过对服务订阅的封装.隐藏细节实现.统一配置.自动重连.异常处理等各个方面来打造一个简单易用的 RabbitMQ 工厂:本文适合适合有一定 RabbitMQ 使用经验的读者阅读,如果你还没 ...

  5. Git 安装配置手册

    Git 安装配置手册 首先我们要了解 Git 是类似于 SVN 用来管理项目的 首先要先下载 Git ,这个东西相当于一个核,是该功能的核心 下载地址(<https://gitforwindow ...

  6. 【Redis】LRU算法和Redis的LRU实现

    LRU原理 在一般标准的操作系统教材里,会用下面的方式来演示 LRU 原理,假设内存只能容纳3个页大小,按照 7 0 1 2 0 3 0 4 的次序访问页.假设内存按照栈的方式来描述访问时间,在上面的 ...

  7. 【Redis】redis各类型数据存储分析

    一.简介和应用 Redis是一个由ANSI C语言编写,性能优秀.支持网络.可持久化的K-K内存数据库,并提供多种语言的API.它常用的类型主要是 String.List.Hash.Set.ZSet ...

  8. css选择器概述

    css选择器种类 id选择器 类选择器.属性选择器.伪类选择器 元素选择器.伪元素选择器 通配符选择器.子类选择器.后代选择器.相邻兄弟选择器.选择器分组 一.id选择器 <p id=" ...

  9. Vue2.0 --- vue-cli脚手架中全局引入JQ

    第一步:安装jQuery npm/cmpn方式安装(默认安装1.7.X版本的JQ) npm/cnpm install jQuery 如果想安装更高版本的JQ那么可以选择在package.json文件下 ...

  10. 教你一招 | 用Python实现简易可拓展的规则引擎

    做这个规则引擎的初衷是用来实现一个可序列号为json,容易拓展的条件执行引擎,用在类似工作流的场景中,最终实现的效果希望是这样的: 简单整理下需求 执行结果最终返回=true= or false 支持 ...