Posted on Jul 28 • Originally published at nad.hashnode.dev React is one of the most widely used JavaScript libraries in creating software interfaces. React offers several tools that make it stand out and popular in today’s software development industry. Thus, it's a great feat to be a React developer. The purpose of this article is to provide a quick guide in creating your first React app and setting it ready for development.Before we set up our first React app, let’s know what React entails and its benefits. This will give us a thorough insight into React as we journey through this career in becoming a React developer. Let’s get started.React is a JavaScript library used in developing interactive and robust User Interfaces (UI). In other words, React is used to create front-end web applications. React can be used to develop Single Page Applications (SPAs) using independent and reusable components, thereby increasing her readability and maintainability.Jordan Walke — a software engineer at Facebook now known as Meta — developed React. Jordan Walke first came up with a prototype known as FaxJS. FaxJS was initially deployed to the Facebook News feed in 2011. On May 2013, React was officially launched and made an open-source at the JavaScript Conference in the US.Over the years, React has evolved to include several features which serve as frameworks for developing complete applications. Some of these frameworks include Next.js, Gatsby, and React Native, amongst others. Next.js and Gatsby.js frameworks develop backend servers of web applications. React Native is used to develop mobile applications such as iOS and Android mobile apps.React is the most widely used JavaScript library. This is because of the benefits React offers. In this section, we shall examine the notable benefits of React. Let’s get started.This section will guide you through the steps in creating your first React app ready for development. Note that we shall be using the officially recommended process of creating a React app. Let’s get started with the various steps.Step 1 — Install Node.jsYou need to install Node.js for the local development of your React app. To install Node.js, visit https://nodejs.org and follow the instructions.STEP 2 — Create a Project folderCreate a project folder and navigate to the directory of your project folder using your terminal as seen in the codes below.STEP 3 — Create React AppCreate your new React app by typing any of the commands below.ORFor yarn users, run:The installation process takes a while to complete. When completed, a folder named ‘my-app’ will be created, containing several files and folders just like the below structure. Note that ‘my-app’ is the name of your React app and can be any name of your choice.STEP 4 — Start the serverIn your terminal, navigate to the app directory where package.json is located. The package.json file contains scripts that give you access to run React script commands such as start, build, test, etc. Start the development server as seen in the codes below.The above command starts the development server and opens your default browser. The development server is run on localhost:3000, with the image below displayed on your screen.An impressive feature of React development server is the Hot Module Replacement (HMR). The HMR updates the web page without reloading when a component is modified.In conclusion, we’ve understood what React entails and how important it is in the software development industry. we’ve also achieved a great step in setting up a React app ready for development. Congratulations on our progress. Explore other tools and functionalities in React to grow and perfect your skills as a React developer.I hope you find this article useful. Follow me on Twitter and LinkedIn as we share insightful and innovative ideas.Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Donna Johnson - Jul 28 Winsay vasva - Jul 28 johnilhan287 - Jul 28 Christee - Jul 28 Once suspended, meganad60 will not be able to comment or publish posts until their suspension is removed. Once unsuspended, meganad60 will be able to comment and publish posts again. Once unpublished, all posts by meganad60 will become hidden and only accessible to themselves. If meganad60 is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Nehemiah Dauda. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag meganad60: meganad60 consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging meganad60 will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.