5 Things You Should Know About Navigating create-react-app

Introduction

Learning a new technology can often times seem like a daunting and overwhelming task. This is why I decided to create a blog post on how to get started building a ReactJs web application using create-react-app. Below I have listed 5 important things you should know when building your React application.

Current Versions

React: version16.8.6

React-scripts: version 2.1.8

Create-react-app: version 2.1.8

Intended Audience

This tutorial is intended for anyone who is curious about learning React, wants to begin exploring a streamlined approach to developing a single page React application, and anyone who has experience with Javascript plus familiarity with installing Node Package Manager (NPM or npm) and NodeJs on their computers. If you need help installing NodeJs/NPM or would like to learn Javascript I have included some helpful resources below.

NPM is now distributed with NodeJs, so you get both! When you download NodeJs you will automatically have NPM installed on your computer as well!

You will need to have NodeJs ≥6 and NPM ≥5.2 on your machine.

Installing NodeJs and NPM

Javascript Tutorials:

  1. https://www.udemy.com/understand-javascript/
  2. https://javascript30.com/
  3. https://www.codecademy.com/learn/introduction-to-javascript

Now, lets dive in!

1. So…What is create-react-app?

You may have asked yourself, “What is create-react-app?”

Before diving into create-react-app, let’s define what React is. React is a Javascript library used to build user interfaces for web applications. It was built by a team of developers at Facebook and is currently maintained by Facebook alongside a team of individuals and companies. Typically getting started in a common React environment requires the configuration of several complex tools such as Babel, Webpack, and React. As someone who has first-hand experience configuring their own React application using these tools, I can reassure you that this is by no means an easy task.

Luckily, we have create react app which is an officially supported command line interface (CLI) tool for creating a single-page React application. It offers a modern build set up with no configuration. It sets up a comfortable developer environment for learning React so that you can use the latest Javascript features and optimize your app for production. You simply run one command in your terminal and Create React App sets up the tools you need for your React application saving you valuable time.

2. Now that we know how awesome this is - it’s kinda time to install it and use it!

To install create-react-app and create a React project, run the following in your terminal or console:

npx -g install create-react-app name-of-your-app

For Example, the React application I am currently working on is a frontend tic tac toe app, so I would run npx -g install create-react-app my-tic-tac-toe-app in my terminal or console. If your app name contains any capital letters you will see the following error:

Error for npm Naming Restrictions

When you have successfully installed create-react-app and created your project you should see the following:

A couple things to note:

npx -g install create-react-app name-of-your-app will generate a React app boilerplate and ensure you are using the latest version of the build tool. It simply creates a frontend build pipeline so that you can use it with any backend you want. Now, there is no need to configure Babel and Webpack as these are both included under the hood for you — thank goodness!

npx is not typo. You have seen npm quite a bit, however, the difference between the two is that npx can execute npm packages that are not previously installed.

3. Explore the the application

Let’s take a look at the file structure for our React application

Default Project Structure — create-react-app

At first glance, you may be very confused as to what all these individual files are and what they do. Not to worry, I will point out some very useful info! And you can also visit this link which was a huge help for me and will probably be a helpful resource for you, as it provides a very thorough breakdown of the default project structure plus info on how to add CSS and build components using JSX.

So as we look at the default project structure generated by create-react-app, we see that it nicely generated a README.md in Markdown format as well as a favicon that will show up in your browsers address for bookmarking. It also generated a main HTML file located in public/index.html. This file is where your React code and application will be located and it will also provide a context for React to render to. Let’s take a look at the main public/index.html file:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" /><metaname="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="theme-color" content="#000000" /><!--manifest.json provides metadata used when your web app is installed on auser's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/--><link rel="manifest" href="%PUBLIC_URL%/manifest.json" /><!--Notice the use of %PUBLIC_URL% in the tags above.It will be replaced with the URL of the `public` folder during the build.Only files inside the `public` folder can be referenced from the HTML.Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" willwork correctly both with client-side routing and a non-root public URL.Learn how to configure a non-root public URL by running `npm run build`.--><title>React App</title></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><!--This HTML file is a template.If you open it directly in the browser, you will see an empty page.You can add webfonts, meta tags, or analytics to this file.The build step will place the bundled scripts into the <body> tag.To begin the development, run `npm start` or `yarn start`.To create a production bundle, use `npm run build` or `yarn build`.--></body></html>

<div id="root"> is the most important piece in this file because this is where your react application gets rendered in the browser.

src/ is the most important directory. This is where all of the modifiable code will be stored.

node_modules directory is where all the dependencies are built and stored. It is typically a good rule of thumb to not edit this directory too much.

package.json stores the list of dependencies for your application and includes their version numbers. It also describes your application.

Check out learning React with create-react-app (part 1) for more detailed and helpful information on the default project file structure.

4. Understand what is automatically included

Out of the box you get the following:

  • React, JSX, ES6
  • JEST as your test watcher — this is a relatively new feature that wasn’t included in some previous versions of React
  • Babel and Webpack configured
  • A development server
  • A production build script
  • The ability to import CSS and images directly from Javascript
  • SASS (Check out how to add a SASS to your app)

As we can see there are some really neat built in features that are already included for us. Some features that are not included are the following:

5. Common commands

npm start

Runs the React app in development mode. To view the app in the browser open http://localhost:3000.

Another great feature with this command is that the page will automatically reload if you make changes to the code and you will see the changes in real time.

npm test

Runs your test watcher for your unit test cases based on files changed since the last commit.

npm run build

Bundles your React application in production mode for optimal performance. It will build your app for production to the build folder.

npm run eject

“Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back!” This basically pulls your app out of create-react-app into a standard Webpack build thereby allowing you to tweak the base configuration and make modifications to the base configuration as you wish!

Conclusion

Awesome! Now you have a very nice, clean, and developer friendly way to get started with developing a web application using React. You have your app set up without the hassle of installing and configuring Webpack and Babel and you have everything else installed for you. I believe it will not hurt to learn Webpack and Babel, but at least now you have a streamlined approach to getting set up with React development. In my next blog post I will discuss how to set up automated continuous integration using the continuous integration tool Travis.

Resources:

  1. Create a New React App: https://reactjs.org/docs/create-a-new-react-app.html
  2. Learning React With Create-React-App (Part 1): https://medium.com/in-the-weeds/learning-react-with-create-react-app-part-1-a12e1833fdc
  3. Create React App — Getting Started: https://facebook.github.io/create-react-app/docs/getting-started
  4. Create-React-App and the Future of Creating React Applications: https://medium.freecodecamp.org/create-react-app-and-the-future-of-creating-react-applications-3c336f29bf1c

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to setup StoryBook for React, Vue and Angular

How to create Component Variants in Figma?

How to load svgs as components in Next.js

How to Unit Test HTML and Vanilla JavaScript Without a UI Framework

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
Quintessa Anderson

Quintessa Anderson

More from Medium

Developers High

Michelin Chef turned Software Engineer

Why, Oh Why Was This Added?

Image of a question mark

Ever wondered how search engines give result of things you search for?