My First Project
Published in

My First Project

Humble beginning…

My first React App, when I think about it now it wasn’t so bad. Actually it was fun, stumble upon problem and overcome it. I’ve beenlearning front-end for 5 months. The beginning was exciting, first course, then second. When someone guides you it’s simple.

My personal project is wedding photography site for my wife. The overview was simple. Main site with single photo. Header with navigation, gallery containing wedding folders, inner gallery that show those folders, offer and contact form. Sounds simple…

import React from 'react'class Gallery extends React.Component {}
export default Gallery;

Writing apps during courses was easier. Writing code above author called it boilerplate. For me each time it was something new. Each of those components was something different. Header with navigation to each component. Gallery and inner gallery were showing folders and photos. Offer had to have three different packages with buttons on the bottom. Those buttons were links to contact form. After clicking, it has to pick corresponding package in form. Finally contact form, containing name, email, picked package, date of planned wedding and a message. This component needs to save state of user input and send it to email.

I used Bootstrap and Create React App, got rid of default files in src directory and started. After setting index.js and App.js it’s time for Header component and linking it with paths. I was choosing between two options. Simply use React Router or use component I created during one of the courses. I went with first solution, because that way with Link from React Router I could avoid complete refresh whole page. This solution gave me another problem, how to pass props to Component with Route. After research I found this way to pass as many props I wanted.

<Route path="/" render={(props) => <Component {...props} propName={propValue} />} />

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store