Skip to content

change class component to function component#6451

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
iansu merged 3 commits into from
Mar 11, 2019
Merged

change class component to function component #6451

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2240b81
change class component to function component
xiaoxiangmoe Feb 18, 2019
4bf8ff3
Update packages/react-scripts/template/src/App.js
iansu Mar 1, 2019
2fb077f
Update packages/react-scripts/template-typescript/src/App.tsx
iansu Mar 1, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 20 additions & 22 deletions packages/react-scripts/template-typescript/src/App.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,26 @@
import React, { Component } from 'react';
import * as React from 'react';

@deniswdeniswMar 1, 2019

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wouldn't import React, { FC } from 'react'; be more consistent in spirit to the current class-based version?

@xiaoxiangmoexiaoxiangmoeMar 6, 2019

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@denisw In TypeScript Doc it write:

import*asReactfrom"react";

Should we use named export rather than default export?

@deniswdeniswMar 6, 2019•
edited
Loading

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, import * as React is what you would need to do by default, but create-react-app's TypeScript configuration has allowSyntheticDefaultImports option enabled. From the documentation:

Allow default imports from modules with no default export. This does not affect code emit, just typechecking.

As the code emit part is taken care of by Babel here, import React "just works" the same way it does for the JavaScript setup.

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;
42 changes: 20 additions & 22 deletions packages/react-scripts/template/src/App.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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;