The latest articles on DEV Community by pitbull90 (@pitbull90). https://dev.to/pitbull90 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F185474%2F397a294f-af8f-4256-887a-afa97414ab8e.jpeg https://dev.to/pitbull90 en pitbull90 Mon, 01 Jul 2019 03:07:37 +0000 https://dev.to/pitbull90/installing-and-using-the-cli-2n40 https://dev.to/pitbull90/installing-and-using-the-cli-2n40 <p>If you're anything like me, working in the Terminal (Command Prompt) can be a little intimidating sometimes, but boy is it super helpful when configuring all the tools you'll need before even writing the first line of your actual application code.</p> <p>And now, thanks to some great React Engineers down at Facebook, we have the ever so helpful <a href="https://github.com/facebook/create-react-app" rel="noopener noreferrer">create-react-app cli</a>. So, let us jump into the basic installing and using of the create-react-app cli. A few things before we begin; I will be referring to the Terminal since I primarily work on Mac. We will also be working out of VS Code (<a href="https://code.visualstudio.com/download" rel="noopener noreferrer">Visual Studio Code</a>) but you could use your preferred text editor.</p> <ul> <li> <p>Open up the terminal. First, you will need to install <a href="https://nodejs.org/en/download/" rel="noopener noreferrer">Node.js</a> onto your machine if you have not done so yet.</p> <ul> <li>To check npm version - Type: <strong>npm —version</strong> </li> </ul> </li> <li><p>Type: <strong>sudo npm install -g install create-react-app</strong>. The “-g” stands for global, this is to access this from anywhere on our system. Then press enter.</p></li> <li><p>To create your application Type: <strong>create-react-app contactmanager</strong>. “contactmanager” is the name of the application, this can be anything you would like (the name of your app). You should get a success screen like this:</p></li> </ul> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fo5lcv3p3ldwe1d5m6qy3.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fo5lcv3p3ldwe1d5m6qy3.png"></a></p> <ul> <li>Then navigate into the application folder “contactmanager” to navigate to your application folder - Type: <strong>cd contactmanager</strong>. Then to open up the files in Visual Studios - Type: <strong>code .</strong> (Make sure to include that period, it's code + space + period.) <ul> <li>If “code .” did not work, head into VS code and go to your command pallet and - Type: <strong>Command+Shift+P</strong> then - Type: <strong>shell</strong> and then select the one that says: <strong>Shell Command: install ‘code’ command in PATH</strong> </li> </ul> </li> </ul> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F15qcahv6nfnv8mj4j82u.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F15qcahv6nfnv8mj4j82u.png"></a></p> <ul> <li><p>Now to start the development server. - Type: <strong>npm start</strong>. This will open up the app in your browser. To stop the dev server - Type: <strong>Press(control)c</strong>.</p></li> <li><p>Type: <strong>npm run build</strong> to generate a build folder in your Visual Studios.</p></li> </ul> <p>That's it! Now you're ready to start building out your React.js application. ✌️</p> react javascript node webdev pitbull90 Mon, 24 Jun 2019 14:11:17 +0000 https://dev.to/pitbull90/first-post-1g30 https://dev.to/pitbull90/first-post-1g30 <p>Hello World!</p>