"Node.js Basics 2017" was retired on September 1, 2022. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed React Basics!
You have completed React Basics!
Preview
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