Skip to content

Commit 687c4eb

Browse files
author
Lewis Llobera
authoredFeb 3, 2020
Change arrow functions to function declarations (#8412)
- 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.
1 parent 1cbc6f7 commit 687c4eb

File tree

2 files changed

+10
-7
lines changed

2 files changed

+10
-7
lines changed
 

‎docusaurus/docs/adding-images-fonts-and-files.md

+9-6
Original file line numberDiff line numberDiff line change
@@ -51,12 +51,15 @@ One way to add SVG files was described in the section above. You can also import
5151

5252
```js
5353
import { ReactComponent as Logo } from './logo.svg';
54-
const App = () => (
55-
<div>
56-
{/* Logo is an actual React component */}
57-
<Logo />
58-
</div>
59-
);
54+
55+
function App() {
56+
return (
57+
<div>
58+
{/* Logo is an actual React component */}
59+
<Logo />
60+
</div>
61+
);
62+
}
6063
```
6164

6265
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.

‎packages/cra-template-typescript/template/src/App.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import logo from './logo.svg';
33
import './App.css';
44

5-
const App = () => {
5+
function App() {
66
return (
77
<div className="App">
88
<header className="App-header">

1 commit comments

Comments
 (1)

entozoon commented on Feb 20, 2020

@entozoon

Mightn't it be better to keep the arrow function here and replace the function declaration in the JS template?
I mean, it's personal preference to some extent but the consensus appears to be using arrows (when outside of a class), plus easier to change to export.
I'm happy to make the changes if sensible

Please sign in to comment.