Getting Started With Create React App
Some time ago I came across a statement which goes like this:
- What component framework/library to use;
- How to fetch data from external API;
- How to transpile your code;
- How to package your code;
- Whether or not to use a typing system;
- How to test your code;
- And many many more
It gets even worse when you start searching the Internet to get some guidance in choices to make. Unfortunately, because of such rapid developments there is no time for the community to settle down with a status quo stack which is limited to a smaller amount of choices to make.
Enter Create React App
Assuming you’ve spent some time comparing frontend frameworks and libraries and you decided to go with React for your next project. There is a handy tool which does all the choice making for you: Create React App.
Brought to you by the people of the same tech giant as behind React, Create React App (or short CRA) promises that you won’t get bothered by the choices mentioned above:
“Whether you’re using React or another library, Create React App lets you focus on code, not build tools.”
Create React App is not a framework or a library, instead it’s a tool that bundles and configures the build tools for your project. Among other industry-proven projects, CRA uses Webpack, Babel, Jest and ESLint under the hood. Let’s dive into it!
Starting a new project
We start with initiating a new project:
npx create-react-app my-app
This handy command initialises a structure for your new project in the
my-app directory and looks similar to this structure:
my-app/ README.md node_modules/ package.json public/ index.html favicon.ico src/ App.css App.js App.test.js index.css index.js logo.svg
At this point we have a starting point for our project. Most important things here are the following:
src- contains the source code of your app to be
node_modulescontain actual dependencies
Let’s start this app!
This will start a development server and open a browser tab at
http://localhost:3000, which will load your application. You will see a spinning atom-shaped logo of React.
Follow the only instruction on this page:
src/App.js and save to reload.
You’ll notice an instant reload of this page. CRA utilises Webpack’s Hot Reload feature: it reloads the page when any of the rendered components have been updated. This way you don’t have to reload the page, which is a slight improvement for your developer productivity.
The latest CRA release offers an even faster, though /experimental/, reloading feature: it reloads only the updated component keeping the state intact.
If you look at the
src/App.js file, you’ll find something similar to this:
<p> Edit <code>src/App.js</code> and save to reload. </p>
Go ahead and follow this instruction: change the text to something like:
- Edit <code>src/App.js</code> and save to reload. + Woohoo! It works! 🥳
Go back to the browser tab which opened the
http://localhost:3000 and see the change you’ve made:
Create React Apps takes a bunch of decision-making out of your hands leaving almost no space for customisation. One way to configure a CRA app is by so-called “ejecting”: a command which removes CRA bits from your application and leaves you with a bunch of configuration files. While giving you a ton of flexibility, after “ejecting” the CRA, you again will be faced with a ton of choices to make plus the obligatory maintenance of choices that CRA has made for you.
This is where CRACO (Create React App COnfiguration) layer comes into play: it hooks into the CRA API to allow override some of the default configuration of the CRA. Due to its extensible plug-in API, CRACO allows you to write your own configuration plugins (or use existing ones).
Are There Any Alternatives?
There are a bunch of other frameworks, tools, libraries which remove the need for configuration and irrelevant choice-making, and allow you to focus on the code of your application.
Examples of such frameworks are NextJS and Gatsby. Both are full grown open source frameworks with a large community behind them. NextJS, part of the Vercel family, even provides developers with a whole infrastructure to easily deploy and maintain their frontend applications.
Already Built Stuff With React?
At Payt we are always looking for talented software engineers: backend, frontend or full-stack. At the time of writing our engineering team consists of nine software engineers: mostly split by frontend and backend but also some who enjoy doing both. Beyond React, our stack consists of technologies like Ruby on Rails, PostgresQL, Redis, Elastic Search, GraphQL.
Got interested? Take a look at our job listings!
Got any comment, remark or question? Please let me know: email@example.com