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! While you're at it, check out some resources Treehouse students have shared here.

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 (retired) Stateful Components Updating State

Tiago Loriato
Tiago Loriato
1,108 Points
Posted by Tiago Loriato
Tiago Loriato
1,108 Points

After I completed these steps I wanted to download my work but...

Hello!

Thanks for the course, it's been great.

I do, however, have encounter a barrier.

After completing these exercise I wanted to download my work to display on my github address. I realized that I have to build it locally using the terminal, but I'm not aware on how to do this. I searched through the web but got stuck in certain steps.

How can I make my workspace ready to upload to the web?

Thank you!

(Win7 x64)

2 Answers

Jacob Mishkin
Jacob Mishkin
23,118 Points
Jacob Mishkin
Jacob Mishkin
23,118 Points

I'm guessing you're using workspaces, and you want your code to be on github. My only suggestion is to copy and paste your code to a local text editor. I don't think you can upload from work spaces.

Tiago Loriato
Tiago Loriato
1,108 Points
Tiago Loriato
Tiago Loriato
1,108 Points

Jacob Mishkin I tried that, but didn't work. I'm guessing that I need to build with some command line code using npm first and then upload the bundle

Jacob Mishkin
Jacob Mishkin
23,118 Points

can you run your code only in workspaces and not locally? are you using a build system? like super cell? do you have Babel running locally?

Jacob Mishkin
Jacob Mishkin
23,118 Points

I downloaded the project files. It looks like you are using babel so that is not an issue. If you look at the console and if you are using chrome, there is a notification:

Download the React DevTools and use an HTTP server (instead of a file: URL) for a better development experience: https://fb.me/react-devtools

My advice would be to download the requested dev tools and maybe this will solve the problem. and also use a local server.

Github: I assume you have a repo set up. I use Bitbucket, but they are pretty much the same, In the repo look for an upload link and choose the files you want to push to your repo. that should do it.

Jacob Mishkin
Jacob Mishkin
23,118 Points

did it work?

Tiago Loriato
Tiago Loriato
1,108 Points
Tiago Loriato
Tiago Loriato
1,108 Points

@Jacob Mishkin , to be honest, not quite.

I, however, managed to solve the issue.

My react code was on a .jsx file initially. I copied it down to a .js file and included in the first lines: 

var React = require("react");
var ReactDOM = require("react-dom");

Then I removed these lines in my index.html and added the last one:

    <script src="./vendor/react.js"></script>                            //
    <script src="./vendor/react-dom.js"></script>                   // removed
    <script src="./vendor/babel-browser.min.js"></script>     //


    <script src="index.min.js"></script>  // added

Created a package.json in the root:

{
  "name": "reacthelloworld",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "preinstall": "npm install -g reactify",
    "bundle": "browserify -t reactify -d src/index.js > app/index.min.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Tiago Loriato",
  "license": "MIT",
  "dependencies": {
    "react": "^15.3.1",
    "react-dom": "^15.3.2",
    "reactify": "^1.1.1"
  }
}

and build it and tested with:

npm install 
npm i -g http-server 
npm run bundle 
cd app 
http-server

This is an the result and the repo

Jacob Mishkin
Jacob Mishkin
23,118 Points

Awesome!! It worked for me, so that's great. I'm glad you figured it out.

Seth Kroger
Seth Kroger
56,414 Points
Seth Kroger
Seth Kroger
56,414 Points

If you click on the File menu above the editor tabs in Workspace you'll see "Download Workspace" at the bottom. It will download the files packed up into a zip file and from their you can extract them. The React Basics project doesn't use any additional build tools, so it should be good to go once you unpack it. I suspect you're not copying the files in the vendor folder, which are necessary for the React app to run, but they be in the zip file.

Jacob Mishkin
Jacob Mishkin
23,118 Points

That sounds good to me. I don't really use Workspaces that much, so thanks! good to know.

Tiago Loriato
Tiago Loriato
1,108 Points
Tiago Loriato
Tiago Loriato
1,108 Points

Thanks for the input Seth Kroger !

However, I did select the Download Workspace option, unzipped to a separate folder and tried to open the HTML. The React code doesn't run, just the static html. I have the folder vendor with the JS files in there. I can upload this somewhere else if you feel like taking a look.

Jacob Mishkin : I can only run through Workspace. What do you mean build system? I do not have babel running locally. Should I? I thought I had to build the project somehow and them uploaded it to GitHub, but now I'm not so sure.