react学习Day1:安装react

冷不防 2023-02-25 07:03 27阅读 0赞

**一、使用 create-react-app 快速构建 React 开发环境**

*  create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。
 *  create-react-app 自动创建的项目是基于 Webpack + ES6 。
 *  执行以下命令创建项目：

cnpm install -g create-react-app
    create-react-app my-app   "my-app表示创建的应用名称"
    cd my-app/     
    npm start    "启动命令"

*  启动成功后在浏览器地址栏中输入localhost:3000:  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDExMTg2NA_size_16_color_FFFFFF_t_70_pic_center]

二、项目的整体目录如下:  
![在这里插入图片描述][20200710173836306.png]

1.隐藏的文件  
webpack或Babel等文件都是隐藏的,可通过**npm run eject** 显示(注:此命令是不可逆的)  
2.项目目录介绍  
**public**  
静态资源  
index.html: 一切的开始都从这里开始，所以这个是代码执行的源头

**src**  
src目录是最重要的目录、它里面放的使我们项目的所有源代码

App.css 组件样式

App.js 组件

App.test.js 自动化测试文件、（可以删除）

index.css 入口样式

index.js 所有代码的入口文件、整个程序运行的入口文件

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDExMTg2NA_size_16_color_FFFFFF_t_70_pic_center]: /images/20230209/bd08db53c7274b3b8fb636b81610e6d0.png
[20200710173836306.png]: /images/20230209/19290cd5d6ca4a4a8735c2ac9a2ce5b9.png

发表评论取消回复

表情：

评论列表（有 0 条评论，27人围观）

还没有评论，来说两句吧...

相关阅读

相关 React学习(1)-create-react-app

前言如今,对于现今前端热门的三大框架Vue,Angular,React,对于web开发者来说,早已不是什么陌生的词尽管三者实现业务最终的目的都能达成一致,但是各...

蔚落/ 2024年04月17日 13:54/ 0 赞/ 63 阅读

相关 react学习Day1:安装react

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

冷不防/ 2023年02月25日 07:03/ 0 赞/ 28 阅读

相关 react学习经验总结（react安装）

一、React 可以直接下载使用，下载包中也提供了很多学习的实例。本教程使用了 React 的版本为 16.4.0，你可以在官网 [https://reactjs.or

客官°小女子只卖身不卖艺/ 2022年12月25日 14:58/ 0 赞/ 160 阅读

相关 React学习笔记1

什么是 React ? React 是一个用于构建用户界面的 javascript 库。 react的特点： 1、`声明式设计`−React采用声明式，可以轻松描

我不是女神ヾ/ 2022年11月20日 08:10/ 0 赞/ 168 阅读

相关 React学习Day01-React基本介绍

React基本介绍 React 基本介绍 React 的特点 React 高效的原因 React 基本使用相关 js

以你之姓@/ 2022年10月29日 15:27/ 0 赞/ 144 阅读

相关学习React,记录React

1.Ant Design Table 组件自定义 render 的作用域，解决找不到 this 问题。 [https://blog.csdn.net/qq\_37954086

「爱情、让人受尽委屈。」/ 2022年10月11日 13:33/ 0 赞/ 171 阅读

相关 React学习 -- React源码（1）

React源码结构树： ![React源码目录][React] 在这些目录结构中，renderers是React代码的核心部分，它包含了大部分功能的实现。 render

红太狼/ 2022年06月14日 07:51/ 0 赞/ 235 阅读

相关 react学习：React状态

实现一个点赞按钮。点击数字增加一：建立LikeButton.js import React from 'react' class LikeBu

àì夳堔傛蜴生んèń/ 2022年02月19日 02:19/ 0 赞/ 233 阅读

相关 React学习笔记（1）

因为实习公司技术栈主要是React，我只好从Vue 转向学习React了，先深入了解和学习React吧，Vue暂时放一边了~ 简单了解下React 2013 年

柔情只为你懂/ 2021年10月24日 00:18/ 0 赞/ 383 阅读

相关 React官网学习实践 - React安装

1. 创建一个新的APP npm install -g create-react-app create-react-app my-app

谁借莪１个温暖的怀抱￠/ 2021年06月24日 16:11/ 0 赞/ 452 阅读