首页 > 其他分享 >react项目入口文件即调用顺序

react项目入口文件即调用顺序

时间:2023-06-10 15:23:34浏览次数:36  
标签:index 调用 App 入口 js react import root

react项目入口文件,指的是启用react项目的主文件,它通常是一个JavaScript文件,包含了项目组件,并将这些组件渲染到界面上。该文件通常命名为 index.js 或 app.js,并被放在应用程序的根目录中。

使用cra创建的react项目入口文件是src目录下的index.js。这是一个简单的 React 入口文件示例,它导入了 React 和 ReactDom 库,并使用 ReactDom.render() 方法将 App 组件渲染到 id 为 root 的 DOM 元素中。

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

 下面这种写法也可以:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

 

react项目调用顺序:index.html --> index.js --> components.

注意 public/index.html 是启动http服务器的首页,src/index.js是编译的入口文件,只能叫index这个名字, 

标签:index,调用,App,入口,js,react,import,root
From: https://www.cnblogs.com/chaseSF/p/17471316.html

相关文章

  • Spring MVC中的调用链路
    在SpringMVC中,请求处理的过程通常分为以下几个步骤:通过HandlerMapping根据请求的URL匹配到相应的Handler(处理器)。通过HandlerAdapter调用对应的Handler处理请求。调用Handler返回一个ModelAndView对象。通过ViewResolver将ModelAndView中的视图逻辑名解析成对应的Vie......
  • React - 04 函数组件的底层渲染机制
    1.函数组件创建:在SRC目录中,创建一个xxx.jsx的文件,就是要创建一个组件;我们在此文件中,创建一个函数,让函数返回JSX视图「或者JSX元素、virtualDOM虚拟DOM对象」;这就是创建了一个“函数组件”!!调用:基于ES6Module规范,导入创建的组件「可以忽略.jsx后缀名」,然后像写标签一样调用这个组......
  • React - 03 JSX语法示例及JSX渲染机制
    1.根据变量控制元素显示/隐藏2种方式,方式1会渲染但不显示,方式2不会渲染元素2.循环列表渲染用数组的map方法,直接将要循环的元素返回如果数组的每个元素都是empty,则为稀疏数组,否则为密集数组,即使每个元素都是null也是密集数组3.JSX渲染机制第一步:把我们编写的JSX语法,编译为虚拟DOM对......
  • Python调用安卓手机相机接口进行拍照
    感兴趣的朋友可以查阅sl4a模块的详细资料,实现更多功能。下面的代码需要在安卓手机上安装QPython3,然后打开QEdit,把代码复制粘贴过去,保存文件,然后运行就可以自动打开相机了。importsl4aimportosdroid=sl4a.Android()#默认保存到手机存储卡的根目录下,也可以自己修改成其他目录......
  • js和native交互 互相调用
    必须这样写,如果用vue可以在app.vue里面写,先把WebViewJavascriptBridge弄到window下面functionsetupWebViewJavascriptBridge(callback){    if((windowasany).WebViewJavascriptBridge){returncallback((windowasany).WebViewJavascriptBridge);}   ......
  • React技术栈
    React技术栈分享React、Redux和ReactRouter是当前前端开发中非常常用的技术栈组件,而他们之间的结合则可以带来更加强大和灵活的开发能力。本文将为大家分享使用React、Redux和ReactRouter的经验。首先,我们需要知道这三个技术组件的作用以及如何结合使用。React是一个......
  • C# 调用C++库引发不得不说的事
    第三方引用库使用方式有两种1.动态库(DLL),2.静态库(Lib)区别:        静态库:我们的程序在链接时会把用到的静态库全部都链接进去,形成一个exe,这也导致我们的exe很大(程序是先编译,再链接库,最后形成exe)        动态库:是在不再把整个库都链接进去,而是程序用到哪个库,......
  • taro使用taro3-echarts-react报错,图表不出来
    问题taro版本3.6.2taro3-echarts-react版本1.0.4在taro小程序开发中,使用taro3-echarts-react时,echarts版本需要选择4.9.0,但是我们往往需要使用高版本的echarts,但是引入echarts.js文件后,控制台报错:el.addEventListenerisnotafunction或者t.addEventListenerisnotaf......
  • 深入解析React DnD拖拽原理,轻松掌握拖放技巧!
    我们是袋鼠云数栈UED团队,致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值。。本文作者:霁明一、背景1、业务背景业务中会有一些需要实现拖拽的场景,尤其是偏视觉方向以及移动端较多。拖拽在一定程度上能让交互更加便捷,能......
  • 【React工作记录九十五】前端小知识点扫盲笔记记录4
    前言我是歌谣最好的种树是十年前其次是现在微信公众号关注前端小歌谣带你进入氛围极好的前端巅峰人才交流群url参数解析成一个对象<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge">......