Getting started with React with no configuration

Posted onCategoriesTechnology

Like many modern JavaScript frameworks, React has developed a reputation for having a steep learning curve, particularly with regard to the build setup required to create a development environment for a React project. Despite the (potentially unnecessary) complexity surrounding the framework, React’s popularity continues to grow, with it making many aspects of writing web applications far simpler in other regards. Learning about how to configure yarn, Webpack, Babel and all the other build tools React involves can often be a stumbling block to quickly getting started on a project. This blog post will give a short guide offering a few different ways to get started with React today, without having to worry about complicated build setups.

create-react-app

In an attempt to address the issue of React requiring complicated and time-consuming configuration setups, Facebook released create-react-app — a one-step way to generating a React development environment with no configuration required. create-react-app already handles any necessary configuration to setup Webpack, Babel, a package.json file with all required dependencies and other initial setup. To create a new React project, simply run

npx create-react-app [my-new-app]

in the terminal, where [my-new-app] is the directory name for your new project.

Once all files and dependencies have finished installing, cd into your new project directory, via cd [my-new-app].

Running ls, you should see the following project structure:

To start up the React development server, you can run npm start.

You’ll now be able to access the site in your browser, at http://localhost:3000/

Note that if you start up additional projects before canceling the current server running in your terminal (cancel via Ctrl + C), the new applications will be running on a different port number, such as http://localhost:3001/, http://localhost:3002/, etc.

The primary file for the app can be located at src/App.js:

CodeSandbox

If even create-react-app seems a bit too complicated and you’d like to avoid any use of the Terminal altogether, there are some options that can be done directly in the web browser. One of the most popular and well-supported option is CodeSandbox.io which offers free coding sandboxes tailored for a variety of popular build setups, such as React, Vue, Angular and more.

The React sandbox is based on create-react-app, so creating a new sandbox on codesandbox.io is identical to running the npm package. This is arguably the quickest and easiest solution to starting a new React project, regardless of whether you have npm or other Terminal applications installed.

In addition to the near-instant setup, CodeSandbox is built on the same technology that powers the popular text editor/IDE Visual Studio Code, including numerous useful debugging features, editor customization and more. Any project that’s started as a sandbox can then be downloaded as a .zip folder, able to be continued with in your local development environment, just by running npm install in the project directory to install all dependencies, then npm start to start up the dev server.

Conclusion

The desire to learn React is rapidly increasing, but the complicated build setup can unnecessarily deter people from learning the basics of actually writing React code. The two methods mentioned above are a great way to get started with the framework without having to master its configuration requirements.

If you’re looking for a web design company or an app developer in Los Angeles, reach out to Sunlight Media LLC. They offer full stack web design and custom app development for both iOS and Android devices.