- Create React App 2 Quick Start Guide
- Brandon Richey
- 521字
- 2021-07-02 12:53:28
Building separate components in separate files
One of the nicest things about Create React App is how simple it makes even the process of importing other files as their own separate React components without you really having to think about how Webpack is organizing everything. We're going to build a new simple component to get started with. Let's create a Todo component to keep track of each of the Todo items we'll need to add as we go along.
Back over in src/Todo.js, we'll want to duplicate everything from App.js (except the string in the className property and the function name):
import React from 'react';
import './Todo.css';
const Todo = () => <div className="Todo">I am an item</div>;
export default Todo;
There's nothing exciting to talk about here, so we'll keep forging ahead! We should also create a Todo.css file to make sure our component does not remain unstyled:
.Todo {
border: 2px solid black;
text-align: center;
background: #f5f5f5;
color: #333;
margin: 20px;
padding: 20px;
}
Without doing anything, we won't see the results of our fancy new Todo component that we just created, so we'll need to head back to src/App.js and change the code. We'll start by adding an import statement at the top for the Todo component! Remember, we're loading this file from the local filesystem and not some installed dependency:
import Todo from './Todo';
We'll also need to include the Todo component somewhere in the source so that it shows up when we re-render the page:
const App = () => (
<div className="App">
<h2>Todoifier</h2>
<br />
<Todo />
</div>
);
All we've added here is the Todo component, which is getting rendered in the main root div of the App component. When the browser refreshes (assuming you've saved), you should see the Todo component show up and be ready to go!
The exciting part of this whole process is that we've already introduced better code standards and reusability by doing this. The Todo component has been fully extracted out, so if we wanted to include multiple Todo components in our App, we could do so without having to do anything more complicated than copying and pasting a few lines of code.
This sounds pretty great, so let's try it out ourselves and verify that it all works as we expect. Back in the App component, add a few more Todo components as JSX tags:
const App = () => (
<div className="App">
<h2>Todoifier</h2>
<br />
<Todo />
<Todo />
</div>
);
When we have our Todo declared twice in the root of our App component, we should see those two show up:

With that, we've gotten a nice clean amount of reusability and have had to put in almost no effort! The problem that still exists, though, is that there is no variation here. The components are just blindly repeated over and over, and we'd much rather this do something such as display some different content per each Todo. We can make that work in React by introducing two new concepts: state and props! We'll get to state in a little bit, so let's start off with props to get this all implemented in the simplest way possible.
- 演進式架構(原書第2版)
- 軟件架構設計:大型網站技術架構與業務架構融合之道
- AngularJS Web Application Development Blueprints
- Android Application Development Cookbook(Second Edition)
- Python Deep Learning
- Java 9 Programming Blueprints
- Python機器學習經典實例
- Scala編程實戰(原書第2版)
- Visual Basic程序設計教程
- Python Programming for Arduino
- Qt 4開發實踐
- Python機器學習與量化投資
- C/C++代碼調試的藝術
- C#程序設計基礎與實踐
- HTML 5與CSS 3權威指南(第4版·上冊)