Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Get ready to code along! You'll learn how to set up a React project using the project files we provide, and we'll walk through the files included.
Resources
Treehouse Courses and Workshops
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
All right let's get started
working with React.
0:00
There are various ways to get started
with React and I covered some of them in
0:03
another workshop which I've linked
in the teacher's notes below.
0:07
For this course, I use a build tool
called Vite to set up the project files.
0:11
Vite is a simple and lightning-fast
build tool for modern web development.
0:17
To follow along with me,
you'll need to have Node.js and
0:23
NPM installed on your computer.
0:26
If you haven't installed them yet,
don't worry,
0:28
I've included links in the teacher's
notes to our Node.js basics course.
0:32
Once you're all set download
the project files for this course and
0:36
open them in your preferred text editor.
0:40
In my case I'll be using
Visual Studio code,
0:43
I've simplified the starter files
that Vite sets up for us so
0:46
let's take a quick look at what's inside,
in the source folder,
0:51
you'll see two files,
index.css, and main.jsx.
0:56
The index.css file contains the styles for
our project, but we won't be working
1:02
with it during this course, you're welcome
to change it as you please though.
1:07
The main.jsx file is where we'll be using
React to create a grocery list app.
1:12
The index.html file is
the app's HTML template,
1:18
it includes both the stylesheet and
the main.jsx script,
1:23
and also sets the title that
will show on the browser tab.
1:28
The vite.config.js is a file used by Vite
to configure the development server and
1:35
build process.
1:41
We won't be making any changes to
this file for this course, but
1:43
it's important to know that it exists and
what it does.
1:46
Lastly, we have the package.json
file which defines the metadata and
1:51
dependencies of the project.
1:56
The two properties you'll interact with
most are the scripts and dependencies.
1:59
The scripts property contains
commands that we can run for
2:04
the project such as npm run
dev to start the project.
2:09
I'll show you how to do that
at the end of this video.
2:13
As for the dependencies, we need React and
2:17
React DOM to build web
applications in React.
2:20
React started out as a library for
building interfaces in the browser but
2:24
has since been extended to native
application development with React Native.
2:29
To accommodate this, React and
React DOM were split into two libraries.
2:35
The first dependency, React,
is the core React library.
2:40
The second, React DOM,
is what lets React connect to and
2:45
manipulate the DOM, making it perfect for
building web applications.
2:50
To install these dependencies,
we'll run npm i in the terminal,
2:55
you can open the terminal in
Visual Studio code by clicking
3:01
this button then we'll type npm i.
3:06
Once the dependencies are installed,
you'll see a node modules folder
3:14
containing the dependencies
we need to run our app.
3:19
To serve our React app to the browser,
3:23
we need to start a development server,
this is because React is a JavaScript
3:25
library that needs to be compiled
before it can run in the browser.
3:31
To do so, we'll run the dev
script from our package.json
3:36
file using the command,
npm run dev, in the terminal.
3:41
Once the development server is up and
running, we can see our app in the browser
3:48
by either copying over the URL or hovering
over the link in Visual Studio code and
3:52
following the instructions
to open the app.
3:57
For me, it says the hold down command and
click, at this point, we won't
4:01
see anything in the browser because
our main.jsx file is currently empty.
4:06
However, with the development
server running whenever we make any
4:12
changes to our project files,
4:17
such as changing the title in our
index.html file to grocery app,
4:19
our app will automatically update
without having to reload the browser.
4:24
So, now that you're all set up and
ready to go,
4:31
we'll start coding in the next video.
4:33
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up