Change class components to functional components in templates (#6451)

* change class component to function component * Update packages/react-scripts/template/src/App.js Co-Authored-By: xiaoxiangmoe <xiaoxiangmoe@gmail.com> * Update packages/react-scripts/template-typescript/src/App.tsx Co-Authored-By: xiaoxiangmoe <xiaoxiangmoe@gmail.com>
facebook · Mar 11, 2019 · e4fdac2 · e4fdac2
1 parent ed86da9
commit e4fdac2
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 44 deletions.
diff --git a/packages/react-scripts/template-typescript/src/App.tsx b/packages/react-scripts/template-typescript/src/App.tsx
@@ -1,28 +1,26 @@
-import React, { Component } from 'react';
+import * as React from 'react';
 import logo from './logo.svg';
 import './App.css';
 
-class App extends Component {
- render() {
- return (
- <div className="App">
- <header className="App-header">
- <img src={logo} className="App-logo" alt="logo" />
- <p>
- Edit <code>src/App.tsx</code> and save to reload.
- </p>
- <a
- className="App-link"
- href="https://reactjs.org"
- target="_blank"
- rel="noopener noreferrer"
- >
- Learn React
- </a>
- </header>
- </div>
- );
- }
+const App: React.FC = () => {
+ return (
+ <div className="App">
+ <header className="App-header">
+ <img src={logo} className="App-logo" alt="logo" />
+ <p>
+ Edit <code>src/App.tsx</code> and save to reload.
+ </p>
+ <a
+ className="App-link"
+ href="https://reactjs.org"
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ Learn React
+ </a>
+ </header>
+ </div>
+ );
 }
 
 export default App;
diff --git a/packages/react-scripts/template/src/App.js b/packages/react-scripts/template/src/App.js
@@ -1,28 +1,26 @@
-import React, { Component } from 'react';
+import React from 'react';
 import logo from './logo.svg';
 import './App.css';
 
-class App extends Component {
- render() {
- return (
- <div className="App">
- <header className="App-header">
- <img src={logo} className="App-logo" alt="logo" />
- <p>
- Edit <code>src/App.js</code> and save to reload.
- </p>
- <a
- className="App-link"
- href="https://reactjs.org"
- target="_blank"
- rel="noopener noreferrer"
- >
- Learn React
- </a>
- </header>
- </div>
- );
- }
+const App = () => {
+ return (
+ <div className="App">
+ <header className="App-header">
+ <img src={logo} className="App-logo" alt="logo" />
+ <p>
+ Edit <code>src/App.js</code> and save to reload.
+ </p>
+ <a
+ className="App-link"
+ href="https://reactjs.org"
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ Learn React
+ </a>
+ </header>
+ </div>
+ );
 }
 
 export default App;