Creating a React App out of a Static Site for a bunch of Beautiful Queers! Part 1: Hello Queers

Hope this article finds you well lovely human! I wanted to really get my head on straight and commit to getting some blog posts out. I thought of know other way to do this but to start documenting what it is I’m actually working on. I wanted to get some traction with Queers in Tech and consequently needed a refresher in React/Redux.

For the purposes of Queers In Tech I highly doubt that I’ll find any super pressing need to use Redux in this application, but I’m working on a Blockchain/Ethereum project that most definitely will. What better way to prepare than riding with the training wheels on for a few days!?

So I did a few things just to get my Hello Queers working! I’ll go over them now, but I’ll first explain a little bit about what I have to do.

Queers In Tech is (maybe not so much at the time of this reading?) a static site that I built in HTML/CSS. My business partner Spencer Dezart-Smith and I had a great idea to start bringing queer techies together, which you can read more about in our README. Long story short he was offered a job across the planet in Sydney, Australia and had to leave in 10 days 😳! Needless to say we scrambled and pushed something up to commit to our intent to start this project.

So, now I want to transform our site into an app so we can authenticate users, and provide a centralized place for content and conversation around queer tech issues. In order to do that, I had to create a client side react app, and a server side express app(which already exists and is just serving the static page).

To get started I ran npm install concurrently just so I could run my server and client at the same time on separate ports. I’ve personally done a bit of development with react, but if you’re not sure if you have create-react-app or that it may need updating you may want to run npm install create-react-app if you get an error run sudo npm install create-react-app .

After that I created my app with the name client create-react-app client . This installs a react app into a client folder. In the src folder I added to following directory structure…

- src
  -components
    - queers.css
    - queers.js

In my package.json(the one in the main directory) I added the following scripts…

"scripts": {
"client:install": "cd client && npm install",
"start": "node index.js",
"server": "nodemon index.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"test": "echo \"Error: no test specified\" && exit 1"
}

Additionally in the client package.json I had to add the following script, so that my fetch request wouldn’t require me typing out the absolute path when I called my route.

"proxy": "http://localhost:5000"

Note I used port 5000 as not to interfere with port 3000 that create-react-app uses by default.

Here is the route in the index.js file, we’ll attempt to receive the json data on the client side and render it.

app.get('/api/queers', (request, response) => {
const queers = [
{id: 1, firstName: 'Patrick', lastName: 'Porche'},
{id: 2, firstName: 'Spencer', lastName: 'Dezart-Smith'},
{ id: 3, firstName: 'Michael', lastName: 'Masterson'}
]
response.json(queers)
})

Finally to render the app, I created the queer component, and queer css.

Finally in App.js I put the queer component under the header.

And with that Hello Queers! was born.