In the root directory, type this into your terminal: touch.

These files allow us to customize Webpack & Babel to handle things like JSX and CSS inside of our project. Now it’s time to rig up our Webpack and Babel configuration files. ReactDOM.render(, document.getElementById(‘app’)) Īwesome. Inside of src/index.js add this code: import ReactDOM from ‘react-dom’ Your file tree should currently look like this: my-app-from-scratch/ While still inside the src directory, type this command into the terminal: touch index.html _react-dom: _“Serves as the entry point to the DOM and server renderers for React” -Īdd src directory and index.js file mkdir src & cd src & touch index.js *style-loader: *inserts the JavaScript string into HTML _“This plugin transforms static class properties as well as properties declared with the property initializer syntax” *JavaScript library *css-loader: *allows Webpack to convert the CSS file into a JavaScript string. create-react-app uses this name to make a new directory, then creates the necessary files inside it. Webpack-cli: “webpack CLI provides a flexible set of commands for developers to increase speed when setting up a custom Webpack project.” - create-react-app takes one argument: the name you'd like to give your app.

Webpack-dev-server:- allows you to use Webpack with a development server that provides live reloading. Html-webpack-plugin: “simplifies the creation of HTML files to serve your Webpack bundles”. Webpack: bundles all our files into one fileīabel-loader: works with Webpack to transpile ES6+ into ES5 which is supported by older extends Babel support to JSX The create-react-app is an excellent tool for beginners, which allows you to create and run React project very quickly. npm i webpack babel-loader babel-preset-react html-webpack-plugin webpack-dev-server css-loader style-loader webpack-cli -D & npm i react react-dom -S

Run this command and continue below for a breakdown of everything we just installed. Next up, let’s install all the dependencies we’ll need for this application. Great! Now you have your package.json file set up. Next, let’s initialize the app with npm to manage all our dependencies. mkdir my-app-from-scratch & cd my-app-from-scratch Create project directoryįirst, create a new directory and cd into it. The “React” equivalent of building your car engine from scratch.įear not. You’re *owning *React….and now it’s time to soldier on by creating your project from the ground up. Mastering Mobile App Development: From Key Considerations to Future Trendsīut you’re stronger now.

Create react app