Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript React Basics (2018) Thinking in Components Create the Player Component

Conrad Casper
Conrad Casper
4,082 Points

how are we supposed to get this code to render in the browser? this is so frustrating.

When I download the files and render them all I get is a root directory. And there doesn't appear to be a tool to render code when using the workspace option.

4 Answers

Jonathan Healy
Jonathan Healy
21,601 Points

React is a little tricky to set up, and there are essentially multiple ways to go about following along in this lesson. Using workspace is the most straightforward and you should be able to simply preview in the browser as normal.
Check out this link for help with Workspace!! Could be you forgot to link React and Babel with this line in index.html <script type="text/babel" src="./app.js"></script>

Secondly, as I understand it, by simply downloading the files you must have a local server running and also have the scripts linking to the React and Babel CDN in your index.html as shown in the first few videos of this Introducing React series.

Lastly, and the best way to do it if you want to continue learning and understanding React, is to probably follow the guide that Guil provides here in order to set up the create React app. This will allow you to run the downloaded files locally without needing to set up a local server, etc.

NOTE: Building and rendering components in the fully set up, Create React App, is different than how it is shown here in this lesson series, but can be seen in the downloadable files. Primarily, in the Create React App and the downloaded files, the index.js contains the ReactDOM.render() method and App.js is simply exporting (or sending along to be rendered in index.html) whichever const or class you create and decide to export. In this example however, which I believe is for simplicity and introduction purposes, the ReactDOM.render() is being implemented along with the created component in the same file, namely, App.js

Bader Alsabah
Bader Alsabah
4,738 Points

A simple solution to run React code in your browser - including following all the instructions from the first videos of this course (React Basics) - is to download a Chrome App called Web Server. It has a yellow 200 OK! icon. This app sets up any folder you assign it to as a webserver and lets you render a local webserver in your chrome browser.

So, just make the webserver app point to the folder with your React project and if you have all the script cdn stuff from the first few videos - everything should run smoothly. Remember you need to run this app (web server) everytime you want to have your local web server running. Hope this helps!

There is an eyeball button on the top right corner. Maybe that is a new feature? Mine didn't work until I realized that I forgot to save the extra babel script that lets your browser understand the "babel/text" script type.