React JS for beginners – Part 3 – Creating first react app using – “create-react-app”

Hi All,

LIFE IS BEAUTIFUL 🙂 I hope we all are safe 🙂  STAY SAFE, STAY HEALTHY,  STAY HOME 🙂

In last two articles – React JS for beginners and React JS for beginners – Part 2 – Preparing environment for creating React app we discussed following points, in this article we will move bit ahead and create one more simple react app using “create-react-app” – preferable way to create react app

• What is React
• How React works 
• What are React Components
• Starting with React – created first simple React App
• Node.js introduction
• What is NPM
• Installing Node.ja

Note : You will find lots of articles on React but still I’ll be writing from my side and by my way (don’t want to reinvent the wheel :)) and in upcoming articles I need to explain react with SharePoint for SPFX component.

Take away from this article :

• What is “create-react-app”
• Starting with React – creating first simple React App with “create-react-app”
• React folder structure

Prerequisites :

• Basic knowledge of HTML
• Basic knowledge of JavaScript
• Basic programming concepts – Functions, Classes, Arrays etc.
• Basic understanding of DOM
• Node.js and NPM installed on our computer

What is “create-react-app” :

• The “create-react-app” is preferable way to create the react app
• We need to install Node.js and NPM in order to install the “create-react-app”
• Installing Node.js / What is Node.js : Please refer our previous article – React JS for beginners – Part 2 – Preparing environment for creating React app
• We could make sure whether Node.js and NPM is installed successfully by running npm command as

• Once Node.js and npm is in place, we could ready for creating our first react app using “create-react-app“
• In order to use “create-react-app” we need to install it first
• We can install “create-react-app” by using npm install command as

npm install -g create-react-app

• Above command starts the installation of “create-react-app” as shown in below Fig

• Once “create-react-app” is installed successfully, we are ready to create our first react app 🙂
• We will create our first react app using npx create-react-app <app name> command as

npx create-react-app MyFirstReactApp

• Please note the error in above fig

• As shown in above Fig, we have our first react app is ready 🙂 Now its time to testing
• Also note that we have some suggestions as well like, we could begin with by going to our folder where we have created our app (in our case – c:\Demos\myfirstreactapp) and executing command npm start

• Before going in depth of folder structure lets execute our first react app
• We need to navigate the folder in which our app is created, here c:\Demos\myfirstreactapp
• We need to execute the command npm start as shown in below code and figure

npm start

• npm start – This command runs our application in development mode. Open http://localhost:3000 in browser
• As our npm start command get executed successfully, browser window will popup with our react app as shown in below fig

React App folder structure : Here, now we don’t discuss complete in depth folder structure. We will keep discussing as we move ahead 🙂

• Please notice the folder structure which is created as shown in above fig
• node_modules folder – This folder contains all the packages installed by NPM
• public folder –
  • In this folder we have all static files.
  • This folder contains important file – indext.html because of this file this folder is treated as root folder, which browser understands
  • Also files in this folder remains with same name when those deployed in PRODUCTION. So these files are cached at client side and improves the perfomance
• If we go to src folder we have App.js file which contains the App components (either class component or function component) as shown in below Fig

• If we go to src folder we have App.js file which contains the App component
• Please have a look at below code in App.js file – having App function component which renders logo, text and link to – https://reactjs.org along with text “Learn React”

• If we notice the code in App function component, its mix of HTML and JavaScript.
• JavaScript code is in curly braces – {}, in above file it {logo}
• This mix of code which is returned by the App function component is React JSX
• In upcoming article we will discuss more about React JSX
• One more important point is to observe that React function component dont have Render() method as in React class component
• Function code is the render function which returns JSX
• Lets edit the code in this file, make it bit simple as – just return one line as shown in below code

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
     <h1>My First React App using create-react-app</h1>
    </div>
  );
}
export default App;

• Browser will get refreshed automatically (if not then please refresh 🙂 ) as shown in below fig

• All .js and .css file must go to src folder
• index.js file –
  • This file contains the our main App component call – ReactDOM.render().
  • This file indicates where to render App

We will stop here, this article is getting big. In next article we will discuss how all this work together and some best practices for our React app.

Next article – In next article we will discuss how the React App execution works

We have very good series going on React. Please have a look once – https://knowledge-junction.in/?s=react

References :

• React Getting Started
• facebook / create-react-app

Thanks for reading 🙂 Feel free to discuss / comment / questions. SHARING IS CARING 🙂

Share In Teams:

Enjoy the beautiful life 🙂 Have a FUN 🙂 HAVE A SAFE LIFE 🙂 TAKE CARE 🙂