Skip to content
GitLab
    • Explore Projects Groups Snippets
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • C create-react-app
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 1,547
    • Issues 1,547
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 417
    • Merge requests 417
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Meta
  • create-react-app
  • Merge requests
  • !45

Separate <App> and <Header>

  • Review changes

  • Download
  • Email patches
  • Plain diff
Closed Administrator requested to merge split-header into master 9 years ago
  • Overview 9
  • Commits 1
  • Pipelines 0
  • Changes 4

Created by: gaearon

I know this is more files but hear me out :smile: .

This shows:

  • How to import component from another component
  • That components can contain custom components aside from <div>s
  • That there is a convention of naming components with capital letters and associated .css files
  • That we recommend that CSS file is non-cascading and uses something like BEM — in both cases
  • It also makes App simpler

Thoughts?

Compare
  • master (base)

and
  • latest version
    d00adf21
    1 commit, 2 years ago

4 files
+ 41
- 25

    Preferences

    File browser
    Compare changes
s‎rc‎
App‎.css‎ +0 -12
App‎.js‎ +14 -13
Heade‎r.css‎ +11 -0
Head‎er.js‎ +16 -0
src/App.css
+ 0
- 12
  • View file @ d00adf21


@@ -2,18 +2,6 @@
text-align: center;
}
.App-logo {
animation: spin infinite 20s linear;
height: 80px;
}
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}
.App-intro {
font-size: large;
}
src/App.js
+ 14
- 13
  • View file @ d00adf21

import './App.css';
import React from 'react';
import logo from './logo.svg';
import React, { Component } from 'react';
import Header from './Header';
export default function App() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
class App extends Component {
render() {
return (
<div className="App">
<Header />
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
);
}
}
export default App;
src/Header.css 0 → 100644
+ 11
- 0
  • View file @ d00adf21

.Header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}
.Header-logo {
animation: spin infinite 20s linear;
height: 80px;
}
src/Header.js 0 → 100644
+ 16
- 0
  • View file @ d00adf21

import './Header.css';
import React, { Component } from 'react';
import logo from './logo.svg';
class Header extends Component {
render() {
return (
<div className="Header">
<img src={logo} className="Header-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
);
}
}
export default Header;
0 Assignees
None
Assign to
0 Reviewers
None
Request review from
Labels
1
CLA Signed
1
CLA Signed
    Assign labels
  • Manage project labels

Milestone
No milestone
None
None
Time tracking
No estimate or time spent
Lock merge request
Unlocked
1
1 participant
Administrator
Reference: facebook/create-react-app!45
Source branch: split-header

Menu

Explore Projects Groups Snippets