How to set up a React project without Create React App — Step 2: Initializing the Project and Installing React

Initializing the Project

After you’ve installed Node, the first step is to set up a new project. In your shell, navigate to a directory where you want to create a project. Then, run:

mkdir your-project-name && cd your-project-name

This will create a directory for your project (the first command) and then navigate into that new directory (the second command). If you’re new to the shell, the && operator can be used to run both commands, one after the other. You can chain together the && for as many commands as you wish.

Now that you’re inside your new project directory, you can run npm init to initialize the new project. It will ask you for a few pieces of data such as the version number of your app, a description, etc. You can always change these things later, so don’t sweat it too much. If you’d prefer to keep everything as the default value, simply run npm init -y.

Once this is finished, you’ll have a new file inside your directory: package.json. This file is basically a giant JavaScript object that keeps different pieces of information about your application. It’s used for a lot of things, but the most important things to pay attention to for now are the scripts, dependencies, and devDependencies keys. These are the main objects we’ll be adding to throughout the project.

Initializing the Git Repo

The next thing you’ll do is set up a Git repo for the project. First, create a new file .gitignore file with the following:

Next, run git init in your shell.  This will initialize the Git repository. Then you can run git add . to stage the files you’ve created so far, and git commit -m "initial commit" to make your first commit to the project.

In the next post I’ll outline how you can set up Parcel, the build tool I used for this project, and we’ll do a gut check with React to ensure everything is working.

How to set up a React project without Create React App — Step 1: Installing Node

Note: This series is based on React 16 — if you are using a newer version, your mileage may vary.

I was tasked without setting up a new codebase for a frontend rewrite at work this week. I’ve used Create React App for all my previous React projects, but I didn’t want to default to that — after all, stack decisions I make right now could affect the company for the next 3-5 years. I wanted to make sure I knew and understood all the pieces of this codebase since I’m responsible for it, so I decided to research different options and roll my own React environment.

With the speed at which everything changes in JavaScript-Land™️, I found it tedious to research all the tech I was considering and ensure that the sources I was learning from were not out of date, so I decided to write a post about how I set up a new React project without using Create React App. Everything is still somewhat in flux, so I will update this post if anything changes. Also, I would appreciate any feedback you’d like to share about my decisions!

How to Install NodeJS

Before you can set up a React project, you’ll need Node installed. While you aren’t necessarily creating a Node server here, Node is still used to add third party packages (via npm, which is bundled with Node) to your project as well as run scripts such as a local development server.

To install Node, you can take a couple of different routes.

Option 1: Install it from the NodeJS website. This will install a single version of Node on your machine as well as npm.

Option 2: Use a version manager like NVM or Nodenv. A version manager will allow you to install multiple versions of Node and switch between versions depending on the version required by the project you are working on. This is really helpful to utilize if you work on multiple JavaScript projects (or if you think you may in the future).

I chose to use Nodenv because it’s similar to rbenv, which I’ve used in the past. You can install Nodenv a couple of different ways, but I installed it via Homebrew because I’m on OS X and it’s dead simple.

After installing Nodenv, you can run nodenv install -l to get a list of available versions to install. You can then run nodenv install x.y.z (replacing x.y.z with your desired version number) to install the Node version of your choice. I chose 8.11.3, the version recommended on the NodeJS website at the time of this writing.

Therefore, I ran:

nodenv install 8.11.3

You should now have Node installed. In the next post, you’ll initialize your project and install React.

Worklog 062718

Mostly researching CSS libraries today — I got PostCSS up and running and also learned that Styled Components is bundled with Autoprefixer (or at least does auto-prefixing — not sure if it’s actually Autoprefixer).

I also installed cssnext and it seems to be working, but I’m working on confirming that it’s actually working and that it’s not just working because I have the latest version of Chrome. If anyone has suggestions on how to verify that cssnext is working, let me know!

J

Worklog 062018 – New JavaScript Array Methods

Still lots of general setup-y stuff today, but I did learn a few things.

New JavaScript Array Methods

I was listening to this episode of Syntax on the way to work this morning, and learned some tasty new JS array methods.

I made a CodePen for code examples.

See the Pen JavaScript Arrays – .some(), .includes(), .from() by J.C. Hiatt (@jchiatt) on CodePen.dark

.some()

.some() tests whether at least one element in the array passes the test you provide as a callback function. Note that it immediately returns as soon as it finds the first true value, so it has no idea if there are multiple elements within the array that would pass true. It only cares that there’s at least one.

.includes()

.includes() checks whether the array includes a specific value you pass in, returning true or false.

.from()

.from() creates a new array from an array-like or iterable object. Note that it only creates a shallow copy, so nested values aren’t copied. You can also pass in an optional map function to call on every element of the array as it is added.

Worklog 061918

Started my new job at Trinity Apparel today as a Junior Frontend Engineer. I’ve been looking to get back into the habit of writing, so I’ve decided to share “worklogs” so I can keep up with my progress over time and have something to look back on next time Imposter Syndrome™️ inevitably sets in.

Not much went on today other than typical “drink from the fire hydrant” learning as well as a 1 on 1 with my boss and a Sprint Meeting. My big task over the next couple of weeks is to learn more about Webpack (and other build tools) and see how we may be able to use modern tooling (so I can write in ES Next syntax) but still be able to build my React components and inject them into an existing PHP monolith without touching the production build process at all.

It sounds super abstract, and I may not even be describing the problem in nearly the amount of detail I need to, and that’s partly because I haven’t wrapped my head around the full scope of the problem. I’m writing this anyway primarily because I want to re-establish my habit of writing that I’ve lost over the past year.

Will share more as I learn more, but in the meantime, if you have experience integrating React into a specific part of a [mostly] server-rendered PHP monolith, I’d love to hear your thoughts or read any links you’d like to share.

J

Where’d my site go?

If you’ve been to my site in the past 18 months, you’ve probably seen this:

And that’s great and all, but I’m ready to move on. I’ve been working on a lot of things in the past 18 months, such as DevLifts, Gun Noob, HODL Daily, rafl, and more. I want my site to reflect my latest projects and interests.

Plus, I’d really like to nerd out on this next iteration so I can learn new things. And since I’m currently job searching at the time of this post, I figured there wasn’t a better way to demonstrate skills than going full nerd on my own site.

I get a ton of questions about headless WordPress, so those of you who have been following my posts about that will be happy to know that I’ll be blogging about everything as I progress on revamping my site.

I’ve spun up this WordPress site and am just using the default Twenty Seventeen theme since I don’t have a design yet. I wanted to go ahead and begin posting about each decision, so I decided to go ahead and trash my old site and spin this one up.

I have a meeting with my designer tomorrow to start making headway on that front. Today, I’m working on some of the information architecture as well as my tech stack and architecture.

In the meantime, if you are interested in working together, please email me.


Here’s what I’m currently considering:

Server

Currently on WP Engine, but considering spinning up a Digital Ocean droplet just to have fine grained control over everything since I’m going with a decoupled architecture.

Backend

WordPress API with GraphQL. I’d also like to spin up a Node server for server side rendering, which I haven’t learned yet.

Frontend

React with Redux. Or maybe Next.js?

Other

I’d like to have some sort of CI/CD, just to learn. I’m looking at maybe using CodeShip. What would you recommend?

After all that, I may also go ahead and create a React Native app to manage my content and such, just for kicks.


Open to recommendations!

If you at any time have a question or want to reach out, I’m pretty active on Twitter and LinkedIn!

—J

P.S. If you’re looking for some specific content of mine from my old site, here’s a few links: