How to get started quickly with React
Jan 02, 2019 · 4 minute read
This post explores 3 separate ways to get a React application up and running quickly.
To get start quickly with React, you have three choices;
CodeSandbox is one of the most useful tools on the web today. CodeSandbox enables you to forget all about the complexities of setting up a development environment and enables you to just start coding. CodeSandbox is truly a breath of fresh air and a pleasure to work with.
You can create a new CodeSandbox by following this link; New React CodeSandbox
No configuration is needed here, you can make changes to the code and see those changes immediately in the preview on the right.
- Very quick and easy to get started, no configuration needed
- Full syntax highlighting, intellisense (autocomplete), and console for detailed feedback messages
- Has a built-in test runner so we can write unit tests and run them right in the browser
- Good integration with GitHub so we can move away from GitHub
- Best for small projects
Create-React-App is the de facto standard for new developers getting started with React. Create-React-App is best initialised using the CLI, so Node.js and some basic knowledge of how to use the terminal is required.
Create-React-App comes with MANY features out of the box, including;
- React, JSX, ES6, TypeScript and Flow support (as well as many additional plugins that enable you to use newer syntax)
- Autoprefixing for CSS
- Unit test runner
- Development server with hot module reloading (HMR)
- Production build scripts
- Service worker for offline support
To create a new Create-React-App, run the following commands in your terminal;
npx create-react-app my-app cd my-app npm start
Now you can browse to
http://localhost:3000 and see the site. Open the code in your favourite editor and you will see that any changes you make are immediately displayed in the browser (it updates every time you save!).
- Very fast and easy to get started
- Has a broad range of functionality out-of-the-box
- Is production ready
- Has a broad range of functionality out-of-the-box, can be complex
- Almost always refers to
npm. Most people do not have
yarnand would have to know to install in separately, or that
npmcan usually be used in its place
- All the configuration is “brushed under the rug” and you have to irreversibly “eject” the code to be able to make configuration changes
Parcel.js is the new kid on the block, and is a Webpack competitor. Parcel.js takes your code, analyses it and builds it automatically, no configuration needed. I have a more comprehensive Parcel.js tutorial, but this is what you need to know;
- You create your
index.jsfile and link the two using a
- Then add your React code to
index.jsin the same way that CodeSandbox does
- From your terminal, you call
npm run parcel ./index.htmland your code will be built and hosted in the browser automatically. That is it!
- Fast, lightweight
- No configuration
- Is production ready
- Whilst Parcel itself is configuration free, other tools such as Babel require some configuration
- Less widely used than other tools like Webpack
Thankfully there are several ways, with varying degrees of difficultly, to get started with React quickly. CodeSandbox is the quickest and easiest choice, as it “just works” right in the browser. Create React App is a fantastic starting point with a rich feature set out of the box. Rolling your own project from scratch using a build tool like Parcel.js is also very powerful, whilst requiring more setup.
About the author
I am Jon Preece, an experienced full stack website and software developer from Warrington (UK) currently working in and around Manchester (UK).
Throughout my 10+ year professional career I have worked in many sectors, including; e-commerce, financial services, marketing, healthcare, travel and accountancy.
I love to teach, I love to learn and share my knowledge with others, I love to speak at public events.