How to Set Up React.JS Without create-react-app

in this video i'm going to show you how to configure a modern react development environment if you just want to start building you can use the command npx create dash react app followed by your project name i wanted to make this video for people who really wanted to understand how everything is connected i'll try to make this quick because configuring your environment might be the most boring part of modern web development i've included a steps.md file in the github repository if you need to reference specific commands everything should work together with the most modern package versions but if you run into errors or issues you can use the version numbers for packages specified in the steps.md file the only prerequisite for this video is to install node at npm you can test to see if you have these installed by typing node-v and npm-v in the terminal and you should see some version numbers pop up our first step will be to initialize our directory as an npm directory you can do this by typing npm init y the dash y just tells npm to skip the initialization questions we now have a package.json file in our root directory you can think of package.json as a manifest for your project if you want to share your project configuration with anyone all they need is your package.json file and to run npm install and npm will install everything specified in the package.json next we are going to create an src directory in our project root this will be where we keep the source code for our project it's a good idea to form the habit of using version control even if you're not planning to upload to github initialize your root directory as a git repository by typing git init while in the root of your project create a file called dot git ignore and add the following strings of text to it everything in your git ignore will not be tracked by git you almost always want to have node modules in your getignore it's where npm installs packages but as stated earlier if anyone has your package.json they can install the packages from that so emitting node modules will reduce the project size considerably when trying to share it ds store is a file hidden in mac os directories it's not necessary to share and would just clutter up our project root cache dist and dot parcel cache are all files that will be created by our taskrunner parcel and don't need to be included finally.env will ensure any environment variables we create won't accidentally get shared and vs code will remove any editor-specific settings we have enabled locally on our machine now that we have git set up we can install some npm packages that will help with code formatting and linting first we will install prettier with the command npm install dash capital d prettier if using vs code we can install the prettier extension and add some extra settings to make prettier format unsave and run only in directories that we want it to search prettier in the vs code extension store and it should be the first option go to your vs code settings and search prettier config check the box that will require a config file for prettier to run [Music] while still in settings search format on save and check the box that tells vs code to use a file formatter when saving a file since we just told vs code not to run prettier unless there's a config file let's create one really quick create a file named dot prettier rc in your project root place an empty javascript object inside of it that's it since we are just going to be using the default prettier settings there is nothing to put in this file but we will still need it because we just told vs code that it needs a config file to run in the directory next let's install eslint and some eslint plugins eslant plugin import enables eslint to check your import statements for errors es lint plugin jsx a11y will help you write accessible jsx for screen readers and finally eslint plugin react gives eslint the ability to understand react syntax now let's create a dot eslint rc.json file in our root directory to connect everything we just installed inside the eslint rc file add the following sten's array is a list of rules that we would like to apply to our project the order of this array matters so be sure to write it exactly as i have it here after the extends array add a key called plugins this array works hand in hand with the extends array and specifies what plugins we are going to use think of the plugins array as three restaurant menus and whatever we put in the extends array as us ordering certain dishes off of those menus for use in our project next we are going to turn off some of the default roles for react projects we won't be using react prop types and the new version of battle doesn't require we import react in every file so we will turn that off too next we will need to give eslint some information about our code and the environment it will be running in i've included some comments in the code if anyone is more curious about what these settings are doing lastly we will add a settings key that will tell eslint to refer to our package.json for our version of react after all of this let's finally install react and react dom run npm install react react dom then let's install parcel npm install dash d parcel we're getting close to the end i promise add a script to your package.json that points parcel to your project index file because we're using parcel there's no need to configure babel but if you aren't using parcel you can install babel with npm install dash capital d at babel core and at babel preset dash react then add a dot babel rc file to the root of your project with the following inside everything should be configured at this point let's create a hello world react project to test everything inside the src directory create three files index.html index.js and app.js inside index.html just create a div with the id of root and a script tag pointing to index.js with the type module attribute inside index.js import react dom import app attach app to the root element by calling reactdom.render app document.lms root inside our app.js we will create a function called app that returns a jsxh1 that says hello react you'll notice here i get an error when i try to run our parcel server with mp and run dev because parcel configures vowel for us it's just telling me that what's in the babel rc is redundant if you're not using parcel having a babel rc can be useful if there aren't any typos and you go to localhost1234 you should see your react app working congratulations you've just configured a modern react development environment from scratch because we're using a live development server the browser will automatically refresh whenever we save our project if you enjoyed this video please give it a thumbs up and for more content like this hit the subscribe button thanks for watching [Music] you

Channel: Ryan Cahela

Views: 359

Keywords: npm, node, Javascript, React, React.js, Prettier, VSCode, Frontend, Web Development, How To, ESLint

Id: ddUqNwTpFyM

Length: 7min 34sec (454 seconds)

Published: Fri Oct 22 2021