The latest articles on Forem by Yogeshwari Jhala (@yogeshwarijhala). https://forem.com/yogeshwarijhala 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%2F632616%2Fa3453890-0359-4bde-a84e-871b1577fcb9.png https://forem.com/yogeshwarijhala en Yogeshwari Jhala Fri, 04 Jun 2021 14:26:05 +0000 https://forem.com/yogeshwarijhala/react-and-getting-started-with-it-4hm2 https://forem.com/yogeshwarijhala/react-and-getting-started-with-it-4hm2 <p>As a beginner some questions roll in our mind and they are :</p> <h2> What is React ? </h2> <p>React is an open-source, front end, JavaScript library for building User Interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies.</p> <blockquote> <p>JavaScript Library as it is about building JavaScript driven apps. React app runs in Browser so things happen instantly and don't have to wait for server response to get a new page. <br> User Interfaces are basically "What we see". And React is about using components for building things.</p> </blockquote> <h2> Why to use React ? </h2> <ul> <li>React is Flexible</li> </ul> <blockquote> <p>Learn Once , Write Everywhere.</p> </blockquote> <p>We can use react for Web Applications using React.js, Static sites using Gatsby, Mobile Applications using React Native, Desktop Applications using Electron and Server rendering using Next.js.</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftfjqnn59nuv5aijqgj6t.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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftfjqnn59nuv5aijqgj6t.png" alt="image"></a></p> <ul> <li><p>It provides great Developer Experience. It allows rapid development and API in react is simple to learn you would rarely look docs for it. Everything in React is a component which makes our code reusable. </p></li> <li><p>Large number of people use React as compared to Angular and Vue and it is created and maintained by Facebook.</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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyytaogzhak12alnvg370.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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyytaogzhak12alnvg370.png" alt="image"></a></p> <ul> <li><p>React has good performance as it uses Virtual DOM. Therefore, it allows ReactJS to know when exactly to re-render or when to ignore some specific pieces of DOM because it can detect when the data has changed.</p></li> <li><p>React is easy to test and large number of testing frameworks are present.</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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffmkl6qk6vzw26hg8hd6e.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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffmkl6qk6vzw26hg8hd6e.png" alt="image"></a></p> <ul> <li>React Library allows us to write HTML like syntax in JavaScript.</li> </ul> <h2> How we can create our first react app? </h2> <p><strong>Step 1 :</strong> <br> Download and Install your preferred Text Editor. Some text editors which you can use are Sublime Text, Visual Studio Code, Notepad++, Webstorm.</p> <p><strong>Step 2 :</strong><br><br> Local Development Environment<br> Install latest version of node.js from <a href="https://nodejs.org/en/" rel="noopener noreferrer">here</a></p> <p><strong>Step 3 :</strong> <br> Create React App<br> Run these on Command Prompt</p> <ul> <li>npx create-react-app my-app</li> <li>cd my-app</li> <li>npm start</li> </ul> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuz1m84twcq1bfscicky2.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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuz1m84twcq1bfscicky2.png" alt="image"></a></p> react javascript frontend firstpost