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” :

Successful installation of Node.js and npm
Fig : React – Successful installation of Node.js and npm
  • 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
Fig : React - Installing "create-react-app" - Installation in progress
Fig : React – Installing “create-react-app” – Installation in progress
React - Successfully installed "create-react-app"
Fig : React – Successfully installed “create-react-app”
  • 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
React - Creating first react app using "create-react-app" using npx command
Fig : React – Creating first react app using “create-react-app” using npx command
  • Please note the error in above fig
 React - Creating first react app using "create-react-app" using npx command - Error - react app name must be in small letter
Fig : React – Creating first react app using “create-react-app” using npx command – Error – react app name must be in small letter
React - Creating first react app using "create-react-app" using npx command - In Progress along with GIT error
Fig : React – Creating first react app using “create-react-app” using npx command – In Progress along with GIT error
React - Creating first react app using "create-react-app" using npx command - our first app "myfirstreactapp" created successfully
Fig : React – Creating first react app using “create-react-app” using npx command – our first app “myfirstreactapp” created successfully
  • 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
Fig : React – Creating first react app using “create-react-app” – Folder where our firstreactapp is created
  • 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
React - executing our first react app using command - npm start
Fig : React – executing our first react app using command – 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 - Our first react app in browser window
Fig : React – Our first react app in browser window

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

React - Creating first react app using "create-react-app" using npx command - Folder structure
Fig : React – Creating first react app using “create-react-app” using npx command – Folder structure
  • 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
React - Our first react app folder structure - src folder - App.js file
Fig : React – Our first react app folder structure – src folder – App.js file
  • 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”
 React - Our first react app folder structure - src folder - App.js file code having App component as function
Fig : React – Our first react app folder structure – src folder – App.js file code having App function component
  • 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;
React - Our first react app folder structure - src folder - editing App.js file code having App function component
Fig : React – Our first react app folder structure – src folder – editing App.js file code having App function component
  • Browser will get refreshed automatically (if not then please refresh 🙂 ) as shown in below fig
React - Our first react app folder structure - src folder - editing App.js file code having App function component - output
Fig : React – Our first react app folder structure – src folder – editing App.js file code having App function component – output
  • 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.com/?s=react

References :

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 🙂

This site uses Akismet to reduce spam. Learn how your comment data is processed.