คำถามติดแท็ก create-react-app

ฉันได้สร้างโครงการ React เปล่าโดยใช้คำสั่ง: npx create-react-appบน npm v7.0.7 และ Node v15.0.1 ติดตั้ง: ตอบสนอง v17.0.1 โหนด -sass v5.0.0 จากนั้นฉันพยายามนำเข้าไฟล์. scss เปล่าไปยังส่วนประกอบของแอพ: App.js import './App.scss' function App() { return ( <div className="App"> App </div> ); } export default App; โยนข้อผิดพลาด: Failed to compile. ./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/s ass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/App.scss) Error: Node Sass version 5.0.0 is incompatible …

338 reactjs  webpack  create-react-app  node-sass  sass-loader 

เมื่อฉันพิมพ์create-react-app my-appคำสั่งใน terminal ของฉันก็จะปรากฏขึ้นในการทำงาน - การดาวน์โหลดห้องสมุดประสบความสำเร็จ ฯลฯ ตอนท้ายของกระบวนการว่า template was not providedแต่ฉันได้รับข้อความว่าเป็น อินพุต user@users-MacBook-Pro-2 Desktop% create-react-app my-app เอาท์พุต Creating a new React app in /Users/user/Desktop/my-app. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts... ..... nothing out of the ordinary here ..... ✨ Done in …

297 reactjs  create-react-app 

ด้วย React 16.8.6 (ดีในเวอร์ชันก่อนหน้า 16.8.3) ฉันได้รับข้อผิดพลาดนี้เมื่อฉันพยายามป้องกันลูปไม่สิ้นสุดในคำขอดึงข้อมูล ./src/components/BusinessesList.js Line 51: React Hook useEffect has a missing dependency: 'fetchBusinesses'. Either include it or remove the dependency array react-hooks/exhaustive-deps ฉันไม่พบวิธีแก้ปัญหาที่หยุดลูปไม่สิ้นสุด useReducer()ผมต้องการที่จะอยู่ห่างจากการใช้ ฉันพบการสนทนานี้https://github.com/facebook/react/issues/14920ซึ่งการแก้ปัญหาที่เป็นไปได้คือYou can always // eslint-disable-next-line react-hooks/exhaustive-deps if you think you know what you're doing.ฉันไม่มั่นใจในสิ่งที่ฉันทำดังนั้นฉันยังไม่ได้ลองใช้งานเลย ฉันมีการตั้งค่าปัจจุบันนี้React hook useEffect จะทำงานอย่างต่อเนื่องตลอดไป / วนซ้ำไม่สิ้นสุดและความคิดเห็นเพียงอย่างเดียวคือuseCallback()สิ่งที่ฉันไม่คุ้นเคย วิธีที่ฉันใช้อยู่ในปัจจุบันuseEffect()(ซึ่งฉันต้องการเรียกใช้ครั้งเดียวในจุดเริ่มต้นที่คล้ายกับcomponentDidMount()) useEffect(() …

180 reactjs  eslint  create-react-app  react-hooks 

ฉันใช้สร้างปฏิกิริยาแอปejectและไม่ต้องการที่จะ ไม่ชัดเจนว่าที่ใดที่ฟอนต์ที่นำเข้าผ่าน @ font-face และโหลดแบบโลคัลควรดำเนินการ คือฉันกำลังโหลด @font-face { font-family: 'Myriad Pro Regular'; font-style: normal; font-weight: normal; src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff'); } ข้อเสนอแนะใด ๆ - แก้ไข รวมถึงส่วนสำคัญที่ Dan อ้างถึงในคำตอบของเขา ➜ Client git:(feature/trivia-game-ui-2) ✗ ls -l public/static/fonts total 1168 -rwxr-xr-x@ 1 maximveksler staff 62676 Mar 17 2014 MYRIADPRO-BOLD.woff -rwxr-xr-x@ 1 …

177 css  reactjs  fonts  webpack  create-react-app 

ฉันสร้างโครงการ ReactJS ด้วยcreate-react-appแพ็คเกจและใช้งานได้ดี แต่ฉันไม่สามารถค้นหาไฟล์และการกำหนดค่าของwebpack ได้ react-create-app ทำงานกับ webpack อย่างไร ไฟล์การกำหนดค่า webpack อยู่ที่ไหนในการติดตั้งเริ่มต้นด้วยcreate-react-app? ฉันไม่พบไฟล์การกำหนดค่าในโฟลเดอร์ของโครงการ ฉันยังไม่ได้สร้างไฟล์ปรับแต่งแทนที่ ฉันสามารถจัดการการตั้งค่าคอนฟิเกอเรชันกับบทความอื่น ๆ แต่ฉันต้องการค้นหาไฟล์ปรับแต่งแบบธรรมดา

174 javascript  reactjs  webpack  ecmascript-6  create-react-app 

ฉันสามารถเข้าถึงจุดสิ้นสุดนี้http://catfacts-api.appspot.com/api/facts?number=99ผ่านบุรุษไปรษณีย์และได้รับผลตอบแทนJSON นอกจากนี้ฉันกำลังใช้ create-react-app และต้องการหลีกเลี่ยงการตั้งค่าเซิร์ฟเวอร์ใด ๆ ในรหัสลูกค้าของฉันฉันพยายามที่จะใช้fetchเพื่อทำสิ่งเดียวกัน แต่ฉันได้รับข้อผิดพลาด: ไม่มีส่วนหัว 'Access-Control-Allow-Origin' บนทรัพยากรที่ร้องขอ แหล่งกำเนิด ' http: // localhost: 3000 ' จึงไม่ได้รับอนุญาตให้เข้าถึง หากการตอบกลับทึบแสงตอบสนองความต้องการของคุณให้ตั้งค่าโหมดคำขอเป็น 'no-cors' เพื่อดึงข้อมูลทรัพยากรโดยปิดการใช้งาน CORS ดังนั้นฉันพยายามส่งผ่านวัตถุไปยัง Fetch ของฉันซึ่งจะปิดใช้งาน CORS ดังนี้: fetch('http://catfacts-api.appspot.com/api/facts?number=99', { mode: 'no-cors'}) .then(blob => blob.json()) .then(data => { console.table(data); return data; }) .catch(e => { console.log(e); return e; }); น่าสนใจพอที่ข้อผิดพลาดที่ฉันได้รับเป็นข้อผิดพลาดทางไวยากรณ์ของฟังก์ชันนี้ ฉันไม่แน่ใจว่าจริงของฉันfetchเสียเพราะเมื่อฉันลบวัตถุ …

167 javascript  reactjs  cors  create-react-app  fetch-api 

ฉันใช้ create-react-app ฉันพยายามโทรภาพจากโฟลเดอร์สาธารณะของฉันจากไฟล์ในsrc/componentsตัว ฉันได้รับข้อความแสดงข้อผิดพลาดนี้ ./src/components/website_index.js ไม่พบโมดูล: คุณพยายามที่จะนำเข้า ../../public/images/logo/WC-BlackonWhite.jpg ซึ่งอยู่นอกไดเรกทอรีโครงการ src / ไม่รองรับการนำเข้าญาตินอก src / คุณสามารถย้ายภายใน src / หรือเพิ่ม symlink ลงใน node_modules / ของโครงการ import logo from '../../public/images/logo_2016.png'; <img className="Header-logo" src={logo} alt="Logo" /> ฉันได้อ่านหลายสิ่งหลายอย่างที่บอกว่าคุณสามารถนำเข้าเส้นทาง แต่นั่นก็ยังไม่ทำงานสำหรับฉัน ความช่วยเหลือใด ๆ ที่จะได้รับการชื่นชมอย่างมาก. ฉันรู้ว่ามีคำถามมากมายเช่นนี้ แต่พวกเขากำลังบอกให้ฉันนำเข้าโลโก้หรือรูปภาพดังนั้นฉันจึงพลาดอะไรบางอย่างในภาพรวม

150 javascript  reactjs  webpack  create-react-app 

ผมทำงานด้วยและมาข้ามปัญหานี้ที่ผมได้รับcreate-react-appHome does not contain an export named Home วิธีตั้งค่าApp.jsไฟล์มีดังนี้ import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; import { Home } from './layouts/Home' class App extends Component { render() { return ( <div className="App"> Hello <Home /> </div> ) } } export default App; ตอนนี้ในlayoutsโฟลเดอร์ของฉันฉันมีHome.jsไฟล์ …

123 javascript  reactjs  ecmascript-6  create-react-app 

ฉันกำลังลองทุกวิธีในการสร้างแอปพลิเคชันการตอบสนอง ฉันได้ลองใช้ maven แล้วและตอนนี้ฉันกำลังลองใช้ระบบสร้างแอป crate-react-app จาก Facebook Incubators เมื่อฉันพยายามรันคำสั่งcreate-react-app my-appในสภาพแวดล้อม npm มันทำงานบนระบบส่วนบุคคลของฉันโดยไม่มีปัญหา แต่เมื่อฉันลองใช้คำสั่งเดียวกันในสภาพแวดล้อมการทำงานของฉันฉันพบกับข้อผิดพลาดนี้ในพรอมต์คำสั่ง npm ERR! node v6.10.2 npm ERR! npm v3.10.10 npm ERR! code UNABLE_TO_GET_ISSUER_CERT_LOCALLY npm ERR! unable to get local issuer certificate npm ERR! npm ERR! If you need help, you may report this error at: npm ERR! <https://github.com/npm/npm/issues>

118 node.js  reactjs  npm  create-react-app 

ฉันใช้แอปสร้างปฏิกิริยาเพื่อบูตแอปของฉัน ฉันได้เพิ่มสอง.envไฟล์.env.developmentและ.env.productionในรูท ของฉัน.env.developmentรวมถึง: API_URL=http://localhost:3000/api CALLBACK_URL=http://localhost:3005/callback เมื่อฉันเรียกใช้แอปของฉันโดยใช้react-scripts startและคอนโซลprocess.envมันจะพ่นออก { NODE_ENV: "development", PUBLIC_URL: "" } ฉันได้ลองสิ่งต่างๆแล้ว แต่มันไม่ได้รับข้อมูลที่สามารถตรวจสอบได้ในไฟล์การพัฒนาของฉันฉันทำอะไรผิด?! โครงสร้าง Directry คือ: /.env.development /src/index.js สคริปต์ Package.json คือ: "start": "export PORT=3005; npm-run-all --parallel server:start client:start", "client:start": "export PORT=3005; react-scripts start", "server:start": "node server.js", "build": "react-scripts build", แก้ไข: @jamcreencia ชี้ให้เห็นอย่างถูกต้องว่าตัวแปรของฉันควรขึ้นต้นด้วยREACT_APP. แก้ไข 2 ใช้งานได้ดีถ้าฉันตั้งชื่อไฟล์.envแต่ไม่ใช่ถ้าฉันใช้.env.developmentหรือ.end.production

117 reactjs  create-react-app 

อะไรnpm run ejectคำสั่งทำอย่างไร ฉันเข้าใจคำสั่งอื่น ๆ เช่น start, build, test แต่ไม่มีความคิดเกี่ยวกับการดีดออก

115 reactjs  webpack  create-react-app  react-scripts 

ฉันเพิ่งเริ่มใช้ create-react-app กับ typescript create-react-app my-app --scripts-version=react-scripts-ts และคอนฟิกูเรชัน tslint.json ดีฟอลต์ไม่อนุญาต console.log () ฉันจะเปิดใช้งาน console.log ได้อย่างไร เอกสารสำหรับการนี้อยู่ที่ https://palantir.github.io/tslint/rules/no-console/ แต่พวกเขาไม่ได้บอกว่าจะวางบรรทัดนี้ไว้ที่ไหน: "no-console": [true, "log", "error"] ฉันค้นหาและพบไวยากรณ์ไฟล์การกำหนดค่า tslint.jsonนี้ดังนั้นฉันจึงลองสิ่งนี้: "rules": { "no-console": [true, "warning"] } ในความพยายามที่จะรับข้อความบันทึกที่เป็นเพียงคำเตือน แต่นั่นไม่ได้ผล ฉันได้แสดงความคิดเห็นเกี่ยวกับ console.log () บางบรรทัดที่ฉันมี แต่จะต้องการให้ทำได้ในอนาคต

107 reactjs  typescript  create-react-app  tslint 

ฉันรู้ว่าส่วนขยายของ Chrome ใช้ "manifest.json" แต่ที่นี่ก็ใช้เป็นอย่างอื่นเช่นกัน เนื้อหา - { "short_name": "React App", "name": "Create React App Sample", "icons": [ { "src": "favicon.ico", "sizes": "192x192", "type": "image/png" } ], "start_url": "./index.html", "display": "standalone", "theme_color": "#000000", "background_color": "#ffffff" } เมื่อฉันเปลี่ยนค่าบางอย่างอัปเดตเพจ แต่ไม่มีอะไรเปลี่ยนแปลง

97 reactjs  manifest  create-react-app 

ฉันได้ทดสอบแอปพลิเคชัน React.js ของฉันบน internet explorer และพบว่ารหัส ES6 / 7 บางรหัสชอบArray.prototype.includes()ทำลาย ฉันใช้create-react-appและเห็นได้ชัดว่าพวกเขาเลือกที่จะไม่รวม polyfills จำนวนมากเนื่องจากไม่ใช่ทุกคนที่ต้องการและทำให้เวลาในการสร้างช้าลง (ดูตัวอย่างที่นี่และที่นี่ ) เอกสาร (ขณะเขียน) แนะนำ: หากคุณใช้คุณสมบัติ ES6 + อื่น ๆ ที่ต้องการการสนับสนุนรันไทม์ (เช่น Array.from () หรือ Symbol) ตรวจสอบให้แน่ใจว่าคุณได้ใส่ polyfills ที่เหมาะสมด้วยตนเองหรือว่าเบราว์เซอร์ที่คุณกำหนดเป้าหมายรองรับอยู่แล้ว ดังนั้น ... วิธีที่ดีที่สุดในการ "รวม" ด้วยตนเองคืออะไร?

88 javascript  reactjs  ecmascript-6  create-react-app  ecmascript-7 

ฉันมีแอป react ที่สร้างโดย create-react-app หลังจากรัน npm start (สคริปต์เริ่มต้นมีอยู่ใน package.json เป็น "start": "react-สคริปต์ start") คอนโซลบอกว่าการเริ่มต้นเซิร์ฟเวอร์การพัฒนาตามปกติและเริ่มเบราว์เซอร์ แต่หลังจากนี้ทั้งคอนโซลและเบราว์เซอร์ไม่ทำอะไรเลยอย่างไม่มีกำหนด ไม่มีข้อผิดพลาดหรือเอาท์พุท มันไม่ทำอะไรเลย

15 reactjs  npm  create-react-app  react-scripts