1
00:00:00,000 --> 00:00:09,557
[MUSIC]

2
00:00:09,557 --> 00:00:13,570
Hi, I'm Laura,
a JavaScript instructor here at Treehouse.

3
00:00:13,570 --> 00:00:17,763
If you ever tried setting up a React
app before the advent of Build Tools,

4
00:00:17,763 --> 00:00:21,110
you'll know how frustrating it can be.

5
00:00:21,110 --> 00:00:24,349
You had to manually set up
your project structure,

6
00:00:24,349 --> 00:00:27,440
configure all the necessary dependencies,
and

7
00:00:27,440 --> 00:00:32,430
deal with issues like compatibility and
performance optimization.

8
00:00:32,430 --> 00:00:34,086
It was a time consuming and

9
00:00:34,086 --> 00:00:38,650
error-prone process that required
a high level of expertise.

10
00:00:38,650 --> 00:00:42,341
Fortunately, the development
community recognized this problem and

11
00:00:42,341 --> 00:00:45,740
created build tools to
streamline the process.

12
00:00:45,740 --> 00:00:50,970
With build tools, setting up a React
app has become incredibly easy.

13
00:00:50,970 --> 00:00:54,799
They automate the setup process,
handle the dependencies, and

14
00:00:54,799 --> 00:00:57,730
optimize your app's
performance out of the box.

15
00:00:58,820 --> 00:01:03,542
Currently, React's documentation
recommends using a framework,

16
00:01:03,542 --> 00:01:06,670
like Next.js,
to start a new React project.

17
00:01:06,670 --> 00:01:10,660
But for beginners,
frameworks can be overwhelming.

18
00:01:10,660 --> 00:01:15,402
Starting with a framework, can make it
difficult to distinguish what is specific

19
00:01:15,402 --> 00:01:18,900
to React and
what is specific to that framework.

20
00:01:18,900 --> 00:01:23,530
It's important to get a hang of React
first before diving into a framework.

21
00:01:24,620 --> 00:01:28,650
Once you're comfortable with React,
you can start exploring frameworks.

22
00:01:28,650 --> 00:01:32,732
They offer additional features
like routing, data fetching, and

23
00:01:32,732 --> 00:01:38,520
generating HTML, which can make your
development process much more efficient.

24
00:01:38,520 --> 00:01:43,398
In this workshop, we'll explore build
tools that will get you all set

25
00:01:43,398 --> 00:01:46,780
up with a client side only React app.

26
00:01:46,780 --> 00:01:49,640
We'll create a new React project.

27
00:01:49,640 --> 00:01:55,213
Go over the starter file structure
that the build tool provides and

28
00:01:55,213 --> 00:02:00,700
review all the default scripts like
npm run dev that run your app.

29
00:02:02,200 --> 00:02:06,427
Before you get started,
you'll need to have Node.js and

30
00:02:06,427 --> 00:02:09,790
npm installed on your computer.

31
00:02:09,790 --> 00:02:11,343
If you haven't done that yet,

32
00:02:11,343 --> 00:02:15,600
you'll find links in the teacher's notes
to instructions on how to install these.

33
00:02:16,730 --> 00:02:21,511
If you're ready to start building React
apps without the headache of manual setup,

34
00:02:21,511 --> 00:02:24,390
stay tuned for the rest of this workshop.

35
00:02:24,390 --> 00:02:26,990
We're excited to show you
just how easy it can be.