Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 1083 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Bootstrap a Zero Configuration React App with Neutrino

1:05 React lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

Avatar
Adi

Great lesson!
somehow im getting "Uncaught TypeError: Cannot read property 'createElement' of undefined"
cant catch react module...any idea?

In reply to egghead.io
Avatar
Mark

Hi Adi,

Thanks for the feedback :) Is it possible you are doing import {React} from 'react'; instead of import React from 'react'; ?

The code is up on the sample repo at https://github.com/markoshust/Bootstrap-a-Zero-Configuration-React-App-with-Neutrino/tree/master if you want to check that out and double-check your code.

Cheers,
Mark

In reply to Adi
Avatar
Adi

Indeed, problem with the {React}..
feeling now kid of @$@#;-)
10X for your help and great work!

In reply to Mark

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.

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.

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.

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



HEY, QUICK QUESTION!
Joel's Head
Why are we asking?