Bootstrap a Zero Configuration React App with Neutrino

Mark Shust
InstructorMark Shust
Share this video with your friends

Social Share Links

Send Tweet
Published 7 years ago
Updated 5 years ago

Setting up tooling for a basic React app is typically very hard to do and requires a lot of configuration. In this lesson, we will setup a new React project with Neutrino with zero configuration. Neutrino uses Webpack and Babel behind the scenes, so you still get great build technology, but without all the heavy lifting of needing to configure it.

[00:00] Let's create a new project called Foo by making and folder and then going into it. Then we'll add two devDependencies, Neutrino and Neutrino Preset React. Neutrino uses webpack behind the scenes and allows you to build your React app with zero configuration.

[00:18] Next, we'll add the React and ReactDOM dependencies. This will download everything we need for our React app. Let's make a source folder for our project code. Then we'll make a very simple React script with the name index.js within our source directory.

[00:34] This will render a hello world h1 tag and attach it to a base div element with the ID of root. Note that we are using imports and don't have to figure or set up anything, really, into Babel or webpack. Next, we'll add a scripts definition for a package.json file to start Neutrino. Then we'll kick off our app with Yarn start.

[00:58] After you see the build completed text, check a web browser to see our hello world app that runs on port 5000.

egghead
egghead
~ 29 seconds ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today