Project template for CS1300 React Development Assignment
Open up terminal, go to a folder where you want put this project and run
git clone https://github.com/yarai/cs1300-development.git
In order to use React, we first need to install different external packages (aka javascript/css frameworks that other people wrote). I have already created a list of dependencies needed (in package.json
) but you will need to install them into your local computer by doing the following:
cd
intosrc
folder- Run
npm install
- If you do not have npm installed, you can download it from here
Gulp is "an automated task runner that runs in the background watching for changes to files in specified directories, then executing predefined tasks as a part of your build process." This probably doesn't make much sense, but basically in our code it takes the Reactjs code you write and compiles it into Javascript that the browser can read. It's constantly running in the background so whenever you make a change in the React file it'll update the javascript. To install this:
- Run
npm install gulp -g
(this -g means global so it will install it to your root)
Now just try runninggulp
insidesrc
, you should seeusing gulpfile
and a bunch of task being started and finished. You may notice that it is never stopping; this process will continuously run to watch for any changes you make.
Now that you havve necessary dependecies setup, let's start making changes!
One important thing to note: all changes you'll be making should be in src/js
and src/css
Whenever you are developing you MUST ALWAYS RUN GULP. If you don't, the changes you make won't show up in your browser. So when you are working on this project always do the following before you start:
- Open up a new tab on terminal
cd
intosrc
- Run
gulp
Keep gulp running on this tab while you are developing.
To make changes to the React code you should first cd
into src/js
. There, you should see the file index.jsx
. This will be your main React file that will take all the components and put the page together. Under the directory components/
, you can create components that are relevant to your app (Dropdown, Filter, CardList, etc.)
To add style changes you can find src/css
and find main.css
.
After making changes in the src
directory, always check back to the terminal tab that is running gulp
as it will show you if there were any compiling error. If there are errors, go back to the source files, try to fix and check back on the terminal to see if it works. Keep repeating until everything compiles!
Once you have made changes in your code and gulp successfully compiles, you can run a simple server to see your app in the browser. This can be done by using python's SimpleHTTPServer:
cd
back tocs1300-development
- Run
python -m SimpleHTTPServer
- This will create a server from the cs1300-development directory
- If you do not have python you can download it here (download python 2.7)
- Now on your browser, go to localhost:8000 to see your app!
If you have tried working with this template but are having issues that you cannot resolve (such as the box never showing up, javscript file being broken, etc.), you can use the following alternative:
https://github.com/facebookincubator/create-react-app
https://facebook.github.io/react/docs/thinking-in-react.html
https://scotch.io/tutorials/learning-react-getting-started-and-concepts
http://ricostacruz.com/cheatsheets/react.html
Here are some more technical things about this repository in case you are curious.