<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Achykez</title>
    <description>The latest articles on Forem by Achykez (@achykez).</description>
    <link>https://forem.com/achykez</link>
    <image>
      <url>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%2F864032%2F192fd413-faac-4190-8dd7-36f1b1725ad0.png</url>
      <title>Forem: Achykez</title>
      <link>https://forem.com/achykez</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/achykez"/>
    <language>en</language>
    <item>
      <title>Create React App &amp; Folder Structures</title>
      <dc:creator>Achykez</dc:creator>
      <pubDate>Thu, 19 May 2022 20:17:58 +0000</pubDate>
      <link>https://forem.com/achykez/create-react-app-folder-structures-120m</link>
      <guid>https://forem.com/achykez/create-react-app-folder-structures-120m</guid>
      <description>&lt;p&gt;&lt;strong&gt;What is React?&lt;/strong&gt;&lt;br&gt;
 React is an open-source JavaScript framework, that isn't actually a framework. But it is currently the most commonly used front-end development technology in the world. React, originally developed by and still maintained by Facebook and supported by an active open source community, is a JS 'library'.&lt;br&gt;
There are other JavaScript Libraries out there of course but react is said to be the most in-demand because of its flexibility while staying close to the language and its principles.&lt;/p&gt;
&lt;h3&gt;
  
  
  Create React App
&lt;/h3&gt;

&lt;p&gt;Create React App is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration. You can Create the react app by typing the following commands on your terminal&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npx create-react-app my-app
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;or&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;yarn create react-app my-app
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Either one you choose to make use of is fine, once you've typed in the respective command, the next commands to type are as written below &lt;/p&gt;

&lt;p&gt;&lt;code&gt;&lt;br&gt;
cd my-app&lt;br&gt;
npm start&lt;br&gt;
&lt;/code&gt;&lt;br&gt;
after that your screen would be like ;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--a-q6HyE7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vcglznmy3njnylekpode.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--a-q6HyE7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vcglznmy3njnylekpode.PNG" alt="React App on VScode" width="880" height="472"&gt;&lt;/a&gt;&lt;br&gt;
This would then prompt your local server to open at localhost:3000 as seen below&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--JAI4aQKo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1662gzips2m0rae4bi9q.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--JAI4aQKo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1662gzips2m0rae4bi9q.PNG" alt="Local Host:3000" width="880" height="472"&gt;&lt;/a&gt;&lt;br&gt;
If you've gotten to this stage, you have succeeded in creating your React App. &lt;/p&gt;

&lt;h2&gt;
  
  
  Folder Structures
&lt;/h2&gt;

&lt;p&gt;Folder structuring is a very important step taken to have a very good base in your react app, with this you can be able to take your code to the next level. This can also come in handy during future debugging. There are certain basic/standard folder structuring for your React App&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--C9oCpOUX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5xyc9w9opzrk7zhat085.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--C9oCpOUX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5xyc9w9opzrk7zhat085.png" alt="folder structuring" width="710" height="1052"&gt;&lt;/a&gt;&lt;br&gt;
the picture above is just a basic example of how folder structuring should be done, there are other ways to structure your folder and when you have a good structure the task of naming your files becomes much easier.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>react</category>
      <category>node</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
