Skip to content

Latest commit

 

History

History
58 lines (33 loc) · 2.44 KB

eventonica-setup.md

File metadata and controls

58 lines (33 loc) · 2.44 KB

Eventonica Part 1 - Setup your React App

Projected Time: ~ 30 min

Prerequisites

Primary Goals

  • Get experience writing your own React code

Instructions

In this outline, you'll create a React app for frontend Eventonica project.

Requirements

We will be working from the same set of Eventonica Requirements as all parts of this project.

Set up a new React App with API Support

First create a folder for your Eventonica project and move inside that directory.

mkdir Eventonica
cd Eventonica

To create a React app, you can use the tool npx. npx gives you the ability to use the create-react-app package without having to first install it on your computer, which is very convenient.

npx create-react-app client
cd client
npm start

Once you run this command, a folder named "client" will be created and all of the packages it requires will be automatically installed.

Then open http://localhost:3000/ to see your app.

Insert Starter Code

JSX Starter Code

  1. Inside /src/App.js, delete all the code. In its place, add code from starter-code. You should see your UI update automatically on localhost:3000 to an Eventonica form. If there's an error, ctrl + c and npm start again.

  2. Go to client/src/App.css and delete the contents. You can also delete the file itself for client/src/index.css. Replace the App.css contents with all the CSS code from css-starter-code. You should see 2 columns on your form now on localhost:3000.

  3. Drag and drop, or copy and paste, calendar icon in the src folder.

    Please ignore calender icon in this image

  4. Look at all the code that's now in your App component. Take 2 minutes to point out to yourself where repeated elements might be turned into a reusable component later.

Note:
Remove .git folder from your react app before pushing into your github repo.
Navigate to your client folder in the terminal.
Remove the .git folder using rm -rf .git command.
Come out of client folder using cd ...
Inside Eventonica directory, initialize Git repository and push all your code to Github.