You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/1/en/part1a.md
+15-3Lines changed: 15 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -66,12 +66,19 @@ The files <i>App.css</i> and <i>index.css</i>, and the directory <i>assets</i> m
66
66
67
67
Instead of Vite you can also use the older generation tool [create-react-app](https://github.com/facebookincubator/create-react-app) in the course to set up the applications. The most visible difference to Vite is the name of the application startup file, which is <i>index.js</i>.
68
68
69
-
The way to start the application is also different, it is started with a command
69
+
The way to start the application is also different in CRA, it is started with a command
70
70
71
71
```
72
72
npm start
73
73
```
74
74
75
+
in contrast to Vite's
76
+
77
+
```
78
+
npm run dev
79
+
```
80
+
81
+
75
82
The course is currently (11 August 2023) being updated to use Vite. Some brands may still use the application base created with create-react-app.
76
83
77
84
### Component
@@ -252,7 +259,9 @@ but when writing JSX, the tag needs to be closed:
252
259
253
260
### Multiple components
254
261
255
-
Let's modify the file <i>App.jsx</i> as follows (NB: export at the bottom is left out in these <i>examples</i>, now and in the future. It is still needed for the code to work):
262
+
Let's modify the file <i>App.jsx</i> as follows:
263
+
264
+
256
265
257
266
```js
258
267
// highlight-start
@@ -292,6 +301,9 @@ const App = () => {
292
301
}
293
302
```
294
303
304
+
**NB**: <em>export</em> at the bottom is left out in these <i>examples</i>, now and in the future. It is still needed for the code to work
305
+
306
+
295
307
Writing components with React is easy, and by combining components, even a more complex application can be kept fairly maintainable. Indeed, a core philosophy of React is composing applications from many specialized reusable components.
296
308
297
309
Another strong convention is the idea of a <i>root component</i> called <i>App</i> at the top of the component tree of the application. Nevertheless, as we will learn in [part 6](/en/part6), there are situations where the component <i>App</i> is not exactly the root, but is wrapped within an appropriate utility component.
@@ -412,7 +424,7 @@ React has been configured to generate quite clear error messages. Despite this,
412
424
413
425
As we already mentioned, when programming with React, it is possible and worthwhile to write <em>console.log()</em> commands (which print to the console) within your code.
414
426
415
-
Also, keep in mind that **React component names must be capitalized**. If you try defining a component as follows:
427
+
Also, keep in mind that **First letter of React component names must be capitalized**. If you try defining a component as follows:
0 commit comments