react入口文件_React脚手架create-react-app使用

最新推荐文章于 2023-08-07 01:09:56 发布

白嘉郁

最新推荐文章于 2023-08-07 01:09:56 发布

阅读量420

点赞数

文章标签： react入口文件

本文链接：https://blog.csdn.net/weixin_29613859/article/details/112401201

版权

本文介绍了如何使用React脚手架create-react-app创建应用，包括安装、创建APP、进入APP目录、理解入口文件index.js，以及在App.js中添加和使用组件，如ButtonCounter和antd的Tabs组件。

摘要由CSDN通过智能技术生成

1、在所要生成应用的目录安装

$ npm install -g create-react-app

2、创建react app

$ create-react-app my-firest-react-app

3、cd进入app文件夹

$ npm start

便会开始自动自动编译并打开app

4、用编辑器打开src文件夹，可以看到如图结构

index.js是入口文件

5、接下来就可以开始创建组件

以ButtonCounter为例，在src文件夹创建ButtonCounter.js

同时也可以在另外的文件夹里存放我们自己写的自定义hook

在index.js文件中可以require根组件并生成到root元素上（root元素在public文件夹的index.html中）

6、在App.js中添加写好的组件

我在使用buttonCounter的同时，还试着使用了antd的Tabs标签页组件，需要先安装好antd

$ npm i antd

编辑好App.js如图所示

App就渲染完成

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

白嘉郁

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

react入口文件_React项目文件结构解析

weixin_39668571的博客

12-22

2545

环境搭建好之后的项目结构(搭建环境方法可参照https://my.oschina.net/korabear/blog/1813164)，利用VScode编辑器打开：这个是自动创建的初始结构，下面是各个文件的内容和作用。1.package.json 这个文件是管理下载的依赖包,在项目中经常用到的是"react"库，“react-dom”(将jsx语法渲染到dom中)在项目中最重要的命令是“star...

react入口文件_React文件解释、组件定义及渲染过程

weixin_30476025的博客

02-21

1940

安装node，使用react官方的脚手架工具生成结构，在桌面依次执行下面三行命令node_modules文件夹是存放依赖包yarn.lock：放置的是整个项目所依赖的第三方模块的各种信息(或者是package.json，功能一样，有yarn.lock,执行命令是用yarn，否则用npm)README.md：放置对项目的描述。可删除文件内容后自行编辑描述。package.json：对项目进行说明，比...

参与评论您还未登录，请先登录后发表或查看评论

了解 react 的入口文件

zmlxxl0316的博客

07-11

1201

index.js。

vue中$refs、$emit、$on、props、$parent的使用场景及方法

weixin_42101753的博客

09-09

954

1、$emit的使用场景子组件调用父组件的方法并传递数据子组件： <template> <button @click="emitEvent">点击我</button> </template> <script> export default { data() { return { msg: "我是子组件中的数据" } }, methods: { emitEvent

create-react-app 脚手架工具完善自己所需要的入口文件

qq_45802159的博客

03-02

434

index.js import React from 'react' import ReactDOM from 'react-dom' import App from './views/App' ReactDOM.render( <App/>, document.getElementById('app') ) App.js import React from 'react' ...

React零基础入门到项目实战之脚手架create-react-app搭建React项目

最新发布

panpan_Yang的博客

08-07

317

脚手架 create-react-app react应用程序 react项目

详解使用create-react-app快速构建React开发环境

12-10

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

create-react-app修改为多页面支持的方法

12-03

`create-react-app`是React官方提供的一个脚手架，它默认配置了一个单页应用（SPA）的开发环境。但有时我们需要创建有SEO优化的多页网站，此时就需要对create-react-app进行定制。首先，要修改`create-react-app`...

002-react项目入口文件

杨勇博客之家

08-30

1583

历史文章目录连接：https://blog.csdn.net/yy763496668/article/details/113117040此链接为CSDN连接，目的为方便大家一览博客目录！内...

Webpack打包React支持多入口

08-10

Webpack打包React的脚手架，可自动识别 ./src 目录下的 .js 文件作为入口。区分多个环境，已正确配置热加载

create-react-app 修改为多入口编译的方法

01-19

需求和出发点我们会有较多的小的单页应用，主要是一些简单的页面和活动之类。这些页面相互之间没有交集，但是会有一些可以共用的代码，资源、接口、组件啥的。对此，我们想到了两种解决方案： react-router 路由方案；同一个项目的多入口编译；针对我们的业务需求，其实 react-router 方案会有两个小问题：单个活动的修改，其实需要编译整个项目；若是不做编译优化，整个项目的包会比较大，但其实没必要，当然这个可以通过 react-router 的按需加载来解决；权衡之下，我们还是选择了第二个方案——改造项目成为多入口编译。文件结构设计改进后，整个项目的结构

全局配置 git 中要忽略的文件

猎人在吃肉

05-14

1096

git 中要忽略的文件有两种：本地不想提交的一些代码、配置文件等； IDE（eclipse、idea等）生成的配置文件。 git 中要忽略的文件有两种方法：方法1：在项目的.gitignore文件中添加要忽略文件的文件名或目录名，git 自动忽略。缺点是每个项目都要重复这样的操作。方法2：全局配置。 GitHub 官网上提供忽略文件的样例，我们以java为例来说明： https://github.com/github/gitignore https://github.com/github/gi

React模拟后台项目（一）入口文件配置

weixin_46030044的博客

08-02

1490

一、入口index文件 src/index.js // 导入库 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; import {Provider} from 'react-redux'; import { ConfigProvider } f

React脚手架创建与内置文件介绍

weixin_68160847的博客

11-08

363

ReactDom.render( content123456789 ,document.getElementById("root"))

React入口详解

weixin_30480651的博客

10-26

829

在使用React进行构建应用时，我们总会有一个步骤将组建或者虚拟DOM元素渲染到真实的DOM上，将任务交给浏览器，进而进行layout和paint等步骤，这个函数就是React.render()。首先看下该函数的接口定义： ReactComponent render( ReactElement element, DOMElement container, [function callback...

前端开发之React框架入门学习

m0_58371965的博客

11-23

347

安装React npm i -S react react-dom react：react 是React库的入口点 react-dom：提供了针对DOM的方法，比如：把创建的虚拟DOM，渲染到页面上什么是React React框架的开发中心思想就是封装组件，以组件为核心而不是MVC，原因是 Facebook任务，当时（2013年以前）的前端框架都前端培训不是前端工程师真正想要的。因此React框架： 1.用来构建UI的 JavaScript库 2.React 不是一个 MVC 框.

react项目利用webpack从0开始配置多入口

qq_32445707的博客

11-03

1102

最近在项目开发中遇到许多关于webpack打包配置问题，特意写一篇博文进行总结。 1、webpack打包react项目 2、打包.scss类型文件 3、打包图片类型文件【小于10kb转为base64格式】，并将打包后的图片放置指定目录下 4、copy-webpack-plugin插件的使用 5、html-webpack-plugin插件的使用 6、配置多入口 7、clean-webpack-plugin插件的使用

React创建项目（保姆级讲解，配置文件详细介绍）