Project_ Draft 2 (React)
Project: Draft 2 (React)
Due Wednesday by 11:59pm Points 1 Submitting a text entry box
Start Assignment
For this deliverable, you will provide a second draft of your Project to confirm that you are making progress on
the React version of your project. This draft will have the same “static” content as the previous draft, but
implemented using React Components (instead of just HTML). For this draft you will need to set the scaffolding
for your React application, implement Components for a significant amount of the page, and then publish your
React app to a different hosting service (Firebase Hosting).
The goals of this draft are (1) to make sure you’ve started on the React version of the project (so it isn’t delayed
until the last minute), (2) to make sure that your plans for functionality/interaction continue to be in scope at this
point, (3) provide feedback, support, and direction as you head into the final version of your project.
Implementing this draft will mostly involve “copy-pasting” your HTML from your first draft into React
Components, similar to what you did in the exercises. It’s not as complex as you think but it is more work
than you might expect, so don’t wait until the last minute!
Getting Setup
The below setup instructions are for the second and final drafts of the project. See the first draft for
details about setting up for that deliverable.
Your second and final drafts for the final project you will be developed in the same repo you created for the
project proposal and that you worked on for the first draft
However, in order to develop the final application as a React app, you will need to rebuild your app from the
pieces of your first draft. To get set up, you’ll need to perform the following steps:
1. Create a new folder somewhere on your computer (that is NOT inside the repo!) called project-draft .
Using Finder or File Explorer, move all of the visible source files (except README.md ) into that folder. Make
sure to not move the hidden .gitignore file! This should effectively “empty” your repo.
2. Using the terminal, create the scaffolding for a new React application with the create-react-app
(https://create-react-app.dev/) generator. You will need to make your app in the root folder of the assignment
repo (not inside an additional “app” folder—you do not want that!):
# change directies to your project
cd path/to/project-repo
# delete the extra files that GitHub Classroom creates
rm -rf .github
# create a react app in _this_ folder
# note the period to create in current folder!
npx create-react-app . –use-npm
If you ended up with a separate “app” folder, you’ll need to go back and try again!
iSchool Canvas Support
3. After you’ve created the starter files, you will need to “clean up” the src/ folder, removing the App.css ,
App.test.js , and logo.svg , reportWebVitals.js and setupTests.js files, and deleting all the content of
App.js and index.css . You can then begin implementing your project fresh with a new
You’ll also need to clean up the public/ folder by removing the “logo” files and replacing the favicon.
Note that this process will also replace the included README.md file with a new create-react-app specific
version. You should rename the files so that the assignment README.md (which explains what the project is
about!) is the repo’s README. You are not required to keep the create-react-app generated README (see
the user guide (https://create-react-app.dev/docs/getting-started) if you need help).
4. You can then copy/move the project-draft folder you created back into the assignment repo, so you can
have that code for reference!
5. Commit and push your changes to GitHub. Your partner(s) should then pull down these changes so they
have a copy on their machine as well.
Deliverable Requirements
The requirements for this draft are more concise than for the first draft, though are still a significant amount of
work:
1. You have created a new React application (following the instructions above).
2. You have developed Components for a significant amount (75+%) of your app. These Components do not
need to be interactive.
Components do not need to be interactive (you do not need to support button presses or even hyperlinks)—
you do not need to have any state .
Your Components will need to use props to be able to present content based on the data. The data can just
be a hard-coded constant for now, but you will need some data-driven content in place!
Ideally; after this draft you will only need to focus on implementing the interaction to finish the project.
3. You have addressed most HTML/CSS issues present in your first draft.
4. You have published the running app to Firebase Hosting (see below). The application runs on this site; you
can load up a (non-interactive) version of your app with much of the content from your draft in place.
In short: we’re looking to see that you’ve ported a lot of your draft into React and are able to get something up
and running. Don’t worry if it’s not finish or working yet—this is a chance for you to get some help and direction
as you move to the final version.
Publishing Your App
WARNING! This part can get tricky; it’s easy to accidentally type in a wrong command or otherwise make
a mistake that’s hard to track down. Do not leave this step for the last minute; try to publish early and let
us know if you get stuck.
Because Create React App uses a build system (webpack (https://webpack.js.org/) ) to compile, bundle, and
run your application (to convert the React JSX into JavaScript any browser can run), you need to perform a
iSchool Canvas Support
differnet set of steps to put your website online. In particular, you need to tell the Create React App build system
to create a “production” build (one that works outside of the development server you’ve been running), and then
use the React Scripts to automatically deploy your production version to web hosting system.
While it is possible to deploy React Apps to GitHub Pages (https://create-react-
app.dev/docs/deployment/#github-pages) , the infrastructure offered by GitHub ends up not cleanly supporting
some React features, particularly client-side routing. Instead, for this class you will host your React project using
Firebase Hosting (https://firebase.google.com/docs/hosting/) —the web hosting offered by the Firebase
backend service (which you’ll probably be using anyway).
For complete details on this process, see the Create React App documentation (https://create-react-
app.dev/docs/deployment/#firebase) . A summary of steps is provided below for your convenience:
1. You will need to sign up for an account with Firebase and create a new “project” with their service. See
“Creating a Project” (https://info340.github.io/firebase.html#creating-a-project) in the Firebase chapter of
the course text. Note that you will be able to use this same project to provide user authentication and
database features for your project!
2. Use npm install -g firebase-tools to install the Firebase command line tools, and then firebase login to
log in to the service from the command line.
3. You can then use the command line tools to set up hosting. From the root of your project directory, run
firebase init . Follow the prompts to set up Hosting (use the arrow keys to move down and spacebar/enter
to select. This is a bit non-intuitive, so be careful).
You’ll need to first select your project. If it doesn’t show up in the list, just choose “[don’t set up a default
project]”, and then once you’re finished initializing you can use firebase use –add my-project-id to
connect them.
For the public directory, type build (don’t use the default value!)
You will need to configure it as a single-page app (use y ). Note that this means your entire site will be
run from the single index.html file (you can’t have any separate, non-React files). You’ll be able to add
in multiple web pages as part of the final version of the project.
If you are prompted to overwrite any files in the build folder, say N !
4. Create a production build of your app using the npm run build script provided by Create React App. This
will create a “compiled” bundled version of your app in the build folder.
5. You can publish your production app to Firebase by using the firebase deploy command. This will “push”
your code to Firebase!
When you make updates to your app, you will need to re-run the build script, and then re-deploy the
app—it will not rebuild for production automatically!
You will be able to view your hosted website at whatever URL is shown in the command line after you deploy.
This most likely will be:
https://firebase-project-id.web.app/
Submitting your Draft
iSchool Canvas Support
This is a less formal draft, so you will be submitting it through a brief (~15min) synchronous meeting with your
the TA or the professor. During this meeting you will show what you’ve put together on the React version of the
project so far. We can look it over and discuss it in real-time, giving you immediate feedback on how it could be
improved. You will not need to turn in anything for this assignment if you choose this option; we’ll give you credit
after meeting with you.
There will be some time for these check-ins during regularly scheduled lecture and lab meetings. More
details will be provided in class.
If your group is not able to meet synchronously for some reason, check in with your TA about alternatives.
Remember that this check-in is for your benefit. It’s a great time to ask questions or get help. Please use us as a
resource!
Grading
As long as you’ve checked in with your TA, demonstrated that you’ve reached the 3 requirements listed above
by the deadline, you will receive full credit for this draft.
iSchool Canvas Support