标签: create-react-app

我决定配置由 create-react-app 创建的 React 应用程序以开始使用 vite。在遵循一些文档之后，我配置了所需的文件。当我vite在应用程序的根目录中运行时，它会运行，但不幸的是，由于 404 错误，我无法访问这些文件。奇怪的是，对于我的同事来说，它运行。当我更改为react-scripts它时，它运行成功。以下是我的应用程序的一些配置：

vite.config.ts

import { defineConfig } from \'vite\'\nimport react from \'@vitejs/plugin-react\'\nimport path from \'path\'\n\nexport default defineConfig({\n  plugins: [react()],\n  build: {\n    outDir: \'build\',\n  },\n  resolve: {\n    alias: {\n      \'@\': path.resolve(__dirname, \'src\'),\n    },\n  },\n})\n

tsconfig.json

{\n  "compilerOptions": {\n    "target": "ESNext",\n    "types": ["vite/client"],\n    "lib": ["dom", "dom.iterable", "esnext"],\n    "allowJs": true,\n    "skipLibCheck": true,\n    "esModuleInterop": true,\n    "allowSyntheticDefaultImports": true,\n    "strict": true,\n    "forceConsistentCasingInFileNames": true,\n    "noFallthroughCasesInSwitch": true,\n    "module": "esnext",\n    "moduleResolution": "node",\n    "resolveJsonModule": true,\n    "isolatedModules": …

我最近开始使用 Create-react-app 和 TailwindCSS，我想更改整个页面的背景。找不到设置标签样式的方法

我尝试在index.css文件中添加我自己的样式，如下所示

@tailwind base;
@tailwind components;
@tailwind utilities;

body{
    background-color: aqua;
}

但仍然不起作用，似乎它被顺风样式覆盖了，有什么方法可以设置 body 标签的样式吗？

有没有办法create-react-app用我自己的库,webpack配置,dotfiles等扩展精彩,但保持它是最新的？

我的意思是,我想要eject它,然后根据我的需要进行改进,但是获得最新的更新,没有大的痛苦,即手动跟踪回购,寻找差异,复制和粘贴等等.

导入particle.js库时遇到问题.

我正在使用create-react-app,并且遵循粒子js github页面上的说明.

启动'create-react-app'后,我安装particle.js

npm install particles.js --save

然后在App.js文件中我的相关部分是:

import particlesJS from 'particles.js'

componentDidMount(){
    //particles.js github page says to load package like so:
    particlesJS.load('particles-js', 'assets/particles.json', function() {
      console.log('callback - particles.js config loaded');
    });
},

render() {
    return (
       <div>
            //div to include particles canvas, as specified in particles.js github page         
            <div id="particles-js"></div>
       </div>
);

}

但是控制台给出错误Uncaught TypeError:_particles2.default.load不是函数

如果我放入console.log(particlesJS)它会给出一个空对象,所以我很确定问题是我如何加载包.基本上,甚至没有加载包,这就是为什么particleJS对象上没有.load()函数可用.

任何想法如何解决这一问题？

顺便说一句,让包通过' react-particles-js '包工作,但仍然很好奇,看看如何直接使用package.js包让它工作.

在官方网站上的这篇文章中react,我可以清楚地看到await允许使用动态导入模块,但是当我尝试在我的代码中执行它时(就像在示例中一样),我得到的错误是:

Syntax error: await is a reserved word (11:31)

我错过了什么？

编辑

代码只是为了方便:

class App extends Component {
    state = {
        lazyComponent: null
    }
    componentDidMount() {
        const { default: Message } = await import('./Message.js');
        this.setState({
            lazyComponent: <Message />
        })
    }
    render() {
        return (
            <div className="App">
                <p>Let's start!</p>
                {this.state.lazyComponent || <p>Loading...</p> }
            </div>
        );
    }
}

export default App;

每次我组成反应组件我都会为它制作文件夹.我制作文件index.js和component.jsx

例如

??? App.js
??? component
?   ??? index.js
?   ??? Component.jsx
...

指数 component/index.js

export default from './Component'

写入实际反应组件Component.jsx.

但问题是当我尝试使用create-react-app和Component.jsx下面的导入构建应用程序时

import Component from './component'

像这样发生错误

./src/component/index.js
Syntax error: Unexpected token, expected ; (1:20)

> 1 | export default from './Component'
    |                     ^
  2 | 

但如果我写这样的代码component/index.js效果很好.

import Component from './Component'
export default Component

我第一次有什么问题index.js吗？

谁能帮我了解如何在React Native中检测Webview按钮单击事件吗？如下面的代码所示，我在WebView（index.html）中有一个Button，我想为其检测React Native的click事件并执行onClick方法。我尝试了多种方法，但未能成功。非常感谢您。

我的MyApp.js

import React from 'react';
import { AppRegistry, View, WebView, StyleSheet} from 'react-native'

export default class MyApp extends React.Component {
onClick = () => {
  console.log('Button Clicked');
}
render() {
    return (
        <View style={styles.container}>
            <WebView
                style={styles.webView}
                source={require('./index.html')}/>
        </View>
    );
}
};

let styles = StyleSheet.create({
container: {
    flex: 1,
    backgroundColor: '#fff',
},
webView: {
    backgroundColor: '#fff',
    height: 350,
}
});

我的index.html

<html>
<body>
    <Button>Click Here</Button>
</body>
</html>

我正在使用create-react-app和我开发的包(my-package).My-package与webpack捆绑在一起.

在重载测试循环期间,我经常更改my-package并在react-app中本地重新安装它npm i —save ../my-package,遗憾的是,此操作很慢,并且当我处于npm start模式时不会触发react-app的重新编译操作.

如果我可以webpack —watch在我的包中设置并且以某种方式将捆绑服务提供给react-app +重新编译触发器,那将是很好的.

有没有办法实现这个目标？谢谢.

我试图使用unsplash api制作图像搜索应用。我可以通过像这样的浏览器编写的URL访问API 这个，但我无法将代码中得到它的工作。有人可以帮忙吗？另外也没有错误发生，我正在尝试将json文件打印到控制台。我在这里关注此文档。

import React, { Component } from 'react';
import './App.css';


class App extends Component {
  constructor(props) {
    super(props);

      this.state = {
        applicationId: '1424074b20f17701ec8c0601fd15ca686c70e2cb0e645f8137533d8063e664bc',
        url: 'https://api.unsplash.com/search/photos?client_id=',
        pagecount: 1
      }

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    let query = document.getElementById('input').value;
    fetch(this.state.url + this.state.applicationId + '&query=' + query + '&page=' + this.state.pagecount)
      .then(json => {
        console.log(json)
      })
      .catch(err => console.log('error occured' + err));
  }

  render() {
    return (
      <div className="App">
        <form id='form'>
          <input type='text' id='input' ></input>
          <input type='submit' …

我似乎无法在使用create-react-app创建的react应用中显示图像。这是我的目录结构：

build
node_modules
public
src
  assets
  components
    header
      ImportingComponent.js
  data
    data.js
  css

图像的路径位于data.js文件数据目录中的对象中

import asdfgProfile from "../assets/IMG_20181128_182110.jpg";
import zxcvbProfile from "../assets/38492604_10157553680894256_362213635956670464_n.jpg";

const f =[
    {
        "name": "asdfg",
        "thumbnail": {asdfgProfile}
    },
    {
        "name": "zxcvb",
        "thumbnail": {zxcvbProfile}
    }

];
export default founders;

这是调用它的组件中的代码，

{props.founders.map( item =>
        <div className="firstFounder">
             <img src={(item.thumbnail)}></img>
             <h2>{item.name}</h2>
             <h3> {item.designation}</h3>
             <p>{item.blurb}</p>
        </div>
 )}

图像似乎无法渲染。我在这里做错了。