1
00:00:02,000 --> 00:00:06,000
Now I did now open this React course folder,

2
00:00:06,000 --> 00:00:08,000
which we created in the last step

3
00:00:08,000 --> 00:00:11,000
with my editor, Visual Studio Code.

4
00:00:11,000 --> 00:00:15,000
Now you can use any code editor you want.

5
00:00:15,000 --> 00:00:17,000
If you have a favorite editor all ready,

6
00:00:17,000 --> 00:00:18,000
you can stick to this.

7
00:00:18,000 --> 00:00:22,000
But you should you as some code editor to have a better time

8
00:00:22,000 --> 00:00:23,000
working with React.

9
00:00:23,000 --> 00:00:25,000
And here I'm using Visual Studio Code,

10
00:00:25,000 --> 00:00:29,000
which is a great free IDE for web development.

11
00:00:29,000 --> 00:00:32,000
It's available for all major platforms.

12
00:00:32,000 --> 00:00:34,000
MacOS, Windows, Linux.

13
00:00:34,000 --> 00:00:38,000
You can simply download it from code.visualstudio.com

14
00:00:38,000 --> 00:00:40,000
and then once you download it and installed it,

15
00:00:40,000 --> 00:00:43,000
simply open your folder that we created

16
00:00:43,000 --> 00:00:44,000
in the last step.

17
00:00:44,000 --> 00:00:46,000
This react course folder.

18
00:00:46,000 --> 00:00:49,000
In my case with Visual Studio Code,

19
00:00:49,000 --> 00:00:50,000
simply with the file open,

20
00:00:50,000 --> 00:00:54,000
or open folder on windows.

21
00:00:54,000 --> 00:00:56,000
Now, once you did that, you should see something like this.

22
00:00:56,000 --> 00:00:59,000
Now you can tweak the settings of Visual Studio Code.

23
00:00:59,000 --> 00:01:02,000
If you want to, if you have a different theme

24
00:01:02,000 --> 00:01:03,000
and you want my theme,

25
00:01:03,000 --> 00:01:06,000
you can go to preferences, color theme.

26
00:01:06,000 --> 00:01:09,000
I'm using the dark plus theme, and it is worth noting that

27
00:01:09,000 --> 00:01:12,000
with Visual Studio Code under, view,

28
00:01:12,000 --> 00:01:15,000
you can tweak the appearance of the editor.

29
00:01:15,000 --> 00:01:18,000
For example, if you have a status bar at the bottom

30
00:01:18,000 --> 00:01:22,000
and things like that, which I disabled here,

31
00:01:22,000 --> 00:01:25,000
and you can go to view extensions,

32
00:01:25,000 --> 00:01:28,000
to install extra third party extensions into

33
00:01:28,000 --> 00:01:31,000
Visual Studio Code, which can add new functionality.

34
00:01:32,000 --> 00:01:34,000
Now I got a bunch of extensions installed,

35
00:01:34,000 --> 00:01:36,000
which you don't need,

36
00:01:36,000 --> 00:01:38,000
but there's one extension which I do recommend.

37
00:01:38,000 --> 00:01:41,000
And that's the Prettier extension.

38
00:01:41,000 --> 00:01:43,000
You can simply search for Prettier here,

39
00:01:43,000 --> 00:01:46,000
and then install that extra extension.

40
00:01:46,000 --> 00:01:49,000
This is an extension that helps with code formatting

41
00:01:49,000 --> 00:01:51,000
and which therefore helps with making

42
00:01:51,000 --> 00:01:55,000
your code more readable with a simple keystroke

43
00:01:56,000 --> 00:01:58,000
For this you then also want to make sure

44
00:01:58,000 --> 00:02:00,000
that under preferences,

45
00:02:00,000 --> 00:02:04,000
keyboard shortcuts, if you search for format document,

46
00:02:04,000 --> 00:02:07,000
you have discharge cut bound

47
00:02:07,000 --> 00:02:10,000
because that format document shortcuts can then

48
00:02:10,000 --> 00:02:15,000
use Prettier to format your code and make it more readable.

49
00:02:15,000 --> 00:02:17,000
For this to ensure that you use Prettier.

50
00:02:17,000 --> 00:02:19,000
You might want to go to your settings

51
00:02:22,000 --> 00:02:25,000
to your user or project specific settings,

52
00:02:25,000 --> 00:02:28,000
and then there's simply searched for format

53
00:02:28,000 --> 00:02:30,000
and under default formatter,

54
00:02:30,000 --> 00:02:33,000
you want to select Prettier vscode,

55
00:02:33,000 --> 00:02:36,000
which should be available since we installed Prettier.

56
00:02:37,000 --> 00:02:39,000
Now that's the set up I'm using here in the end.

57
00:02:39,000 --> 00:02:42,000
And with that, I got an editor configured

58
00:02:42,000 --> 00:02:45,000
for my requirements, which we can now use to dive into

59
00:02:45,000 --> 00:02:49,000
that react project that was created for us

60
00:02:49,000 --> 00:02:52,000
and which we can now use to write some react code.

61
00:02:52,000 --> 00:02:54,000
So let's now as a first step,

62
00:02:54,000 --> 00:02:56,000
clean up this project to get rid of some

63
00:02:56,000 --> 00:02:58,000
of the starting files and then start

64
00:02:58,000 --> 00:03:02,000
from scratch again, to learn, react in depth.