Bootstrap a Zero Configuration React App with Neutrino
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.