From 14cd24eaa5645bde2d415bfb8478cfa40cb8c002 Mon Sep 17 00:00:00 2001 From: Lewis Llobera Date: Sat, 1 Feb 2020 18:26:34 +0100 Subject: [PATCH] Change arrow functions to function declarations - The JavaScript template uses a function declaration to define the component, the TypeScript template and a page of the documentation used arrow functions. Changed it to use function declarations for consistency and readability. --- docusaurus/docs/adding-images-fonts-and-files.md | 15 +++++++++------ .../cra-template-typescript/template/src/App.tsx | 2 +- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/docusaurus/docs/adding-images-fonts-and-files.md b/docusaurus/docs/adding-images-fonts-and-files.md index 3489670e705..0744f597527 100644 --- a/docusaurus/docs/adding-images-fonts-and-files.md +++ b/docusaurus/docs/adding-images-fonts-and-files.md @@ -51,12 +51,15 @@ One way to add SVG files was described in the section above. You can also import ```js import { ReactComponent as Logo } from './logo.svg'; -const App = () => ( -
- {/* Logo is an actual React component */} - -
-); + +function App() { + return ( +
+ {/* Logo is an actual React component */} + +
+ ); +} ``` This is handy if you don't want to load SVG as a separate file. Don't forget the curly braces in the import! The `ReactComponent` import name is significant and tells Create React App that you want a React component that renders an SVG, rather than its filename. diff --git a/packages/cra-template-typescript/template/src/App.tsx b/packages/cra-template-typescript/template/src/App.tsx index eb557394f87..a53698aab3c 100644 --- a/packages/cra-template-typescript/template/src/App.tsx +++ b/packages/cra-template-typescript/template/src/App.tsx @@ -2,7 +2,7 @@ import React from 'react'; import logo from './logo.svg'; import './App.css'; -const App = () => { +function App() { return (