advfe-unified-workspace

Advanced Front End: Starting a React Project inside the DRF project

These steps will show you how to set up a new React application inside the workspace and repository for your DRF project.

  1. Open the workspace for your DRF project

  2. Open the terminal window and create a new folder called frontend in the root directory

    mkdir frontend

    a new directory is shown in the file structure

  3. Change directory to be inside the frontend folder with the following command

    cd frontend

    a terminal with the result of the cd frontend command

  4. From inside the frontend directory, run the following command to create a new React app and install all the working dependencies used in the Moments application

    npx create-react-app . --template git+https://github.com/Code-Institute-Org/cra-template-moments.git --use-npm

    a terminal with a command to create a React app

  5. Enter y to confirm and then click enter

    a terminal with an input expecting a y to proceed

  6. Wait for all dependencies to be installed. This installation will take some time, the terminal may appear to freeze for a few minutes. Once it does start to show activity you can ignore any deprecated warnings, these are extremely common and expected with npm installs. When the installs have been completed, your terminal will look like this

    a terminal showing a couple of suggested commands

  7. Enter the following command to remove the .git folder, .gitignore file and README.md from the frontend folder as these already exist within the root directory of your DRF project

    rm -rf .git .gitignore README.md

    a terminal showing a file removal command

    Running this command from your workspace in the wrong working directory is dangerous. Check you are in the frontend directory by using the pwd command.

  8. When you have completed these steps, your file structure should look like this

    a file structure with edits to the frontend directory

  9. From inside the frontend directory, run the following command to check that the basic React app is running

    npm start

    a terminal showing the npm start command

  10. Open the browser when the preview has finished building

    a pop-up with a button saying open browser

    a react app with no content

  11. Stop the running application with CTRL-C in the terminal for a Windows machine, or CMD-C on a Mac

    a terminal showing that an app has been stopped with a keyboard interrupt

  12. Move back to the root directory of your project with the following command

    cd ..

    a terminal showing the cd upward command

This would be a good point to commit your changes so far.

Up Next

We show you how to prepare the Django API for development.