Create React App Project Step By Step

In this tutorial, you will learn How to Create React App Project with CDN and NPM. If you are a beginner, Then you will get a proper guide step by step with a complete explanation. After reading all the given steps, you can learn quickly to develop your project in React from this article.

If you make a project using React js, then It will be more attractive & user-friendly and will have a very fast loading speed. Even you feel React Project like mobile apps. Because It’s all the functionality works without reloading the web page.

Create a Simple React Application

First of all, You will have to know about the basic requirements to create a simple React application. So, here I have mentioned them with their usage & example. So that You can easily learn & understand everything that is required for building a single-page Application in React js

What’s Before

You should learn the following topic before starting this tutorial. If you have already known it, you can continue reading the next steps –

What is React Js

Requirements to Create React App

You must know about the following requirements to easily create a React App. So, Don’t skip any single point of them –

1. Node.js

  • Node.js is a JavaScript Framework and It is used to execute javascript code on the server.
  • Even Node.js available absolutely free for Windows, Linux & macOS.
  • You can download Node.js from its official website
  • You will also have to install Node.js on your local system for creating a react App.

2. NPM

  • NPM is a short form of Node Package Manager.
  • Even NPM is a Software library
  • NPM is also available absolutely free for Windows, Linux & macOS.
  • You can install NPM by running the command npm install
  • You should also install NPM on your local system to set up a react App.
  • NPM is used to install, uninstall & update React packages, React DOM packages, Bable, & Webpack

3. ECMAScript 2015 – ES 6

  • ECMA Script 2015 is a special & advanced version of javascript.
  • Javascript introduced some special functions, classes, keywords, promise, modules & more in ECMAScript 2015.
  • You can also call the ECMA Script 2015 an ES 6.

4. Webpack

  • Webpack is a Static Module Bundler
  • You can use Webpack to bundle Modern JavaScript files.

5. Babel

  • Babel is a tool that converts modern javascript into Plain JavaScript code in the background.
  • You must use Babel in React js to convert JSX to plain Javascript

6. React Root Element

You have always created a React app within a single HTML tag (eg- p, div, h1 to h6, etc) that is called React Root Element.

<div id="root">Hello react!</div>

I suggest you should use the div element for React Root Element.

7. React Elements

React Elements is a combination of HTML & javascript code that remains in the form of JSX.

Example –

const ReactElement = <p>Hello React!</p>

8. React DOM Render

React DOM Render is a React method that is used to display HTML elements in the web browser.

Syntax –

ReactDom.render()

Example –

<div id="root">Hello React!</div>
<script type="text/babel">
ReactDOM.render(
  <p>Hello Noor Khan!</p>,
  document.getElementById('root'));
</script>

9. JSX

  • JSX is a Javascript XML.
  • You can use JSX to easily write HTML with Javascript code in React js.
  • JSX is not necessary to use in React js. But if you use it, your React App will be easier to develop.

Example –

const element = <p>Hello React App</p>

10. JSX Expressions

You can cover JSX Expressions with  Curly Braces {}

Example –

<div id="root">Hello React</div>

<script type="text/babel">
const name = 'Noor Khan';
ReactDOM.render(
    <p>Hello {name}!</p>,
    document.getElementById('root'));
</script>

11. React Components

React Component is special functions & classes of ES 6 that are used to create different sections like header, menu, footer, sidebar, image gallery, & more of the web page.

Components are divided into two parts –

  • Function Component
  • Class Component

a. Function Component

If you use a function to create a component then It will be a Function Component

Example –

<div id="root"></div>

<script type="text/babel">
function FirstApp() {
  return <p>Hello React!</p>;
}

ReactDOM.render(<FirstApp />, document.getElementById('root'));
</script>

b. Class Component

If You use a class to create a component that It will be a Class Component

<div id="root"></div>

<script type="text/babel">
class FirstApp extends React.Component { 
    render() {return(<h1>Hello React!</h1>);}
}
ReactDOM.render(<FirstApp />, document.getElementById('root'));
</script>

Requirements to Run React App

You also must set up the following requirements in your system to run React App. So, Don’t ignore them –

1. Code Editor –

You must use the code editor to write React code in a beautiful syntax format

There are many code editors are available But I suggest you should use Visual studio that is absolutely free to use.

2. React Developer Tools

React Developer Tools is a chrome extension that is used to debug errors in React app. It is also available on firebox browser

3. Web Browser

Web Browser is the most impart to run React app. So, You should use it.

There are many browsers are available but I suggest you use Google Chrome

Create React App with CDN

If you want the HTML page should perform like React APP, You can integrate React code directly into your HTML page with its CDN library.

It is the basic way of creating a simple & small react App without using Node.js & NPM.

Steps to Create React an app with CDN

Now, You have to create a react app with CDN links according to the following steps

1. Create a React Root Element

React element is nothing it is just an HTML  element that displays everything of React APP  in the web browser. So, Here you can take a simple div element with id root.

<div id="root"></div>

You should keep the above code within the <body></body> that also comes with <!DOCTYPE html><html></html>.

2. Include React CDN Links

You must include React CDN links just above the </body> tag of your HTML web page. If you forget to include them, Your  React Code will not work.

You will get the two CDN links for both React & React DOM in Development & Production mode.

CDN Links in Development Mode

These links are available in Development mode that is easy to read & understand.

If you use these links then your app will take much time to load. So, You should not use these links in your project.

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

CDN Links in Production Mode

These links are available in production mode that is minified & optimized. Even these are very difficult to read & understand.

If you use these links then your app will be lightweight and load very fast within a few seconds. So I suggest you should use these CDN links in your project

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

3. Write Basic React Code

You can create a small react app by writing one of the following React Code

Write React Code using ReactDOM.rende() method-

<script type="text/babel"> 
 ReactDOM.render( <p>Hello CodingStatus!</p>, document.getElementById('root')); 
</script>

Write React code using Function Component –

<script type="text/babel">
function FirstApp() {
  return <p>Hello CodingStatus!</p>;
}
ReactDOM.render(<FirstApp />, document.getElementById('root'));
</script>

Also, Write React code using Class Component –

<script type="text/babel">
class FirstApp extends React.Component { 
    render() {return(<h1>Hello CodingStatus!</h1>);}
}
ReactDOM.render(<FirstApp />, document.getElementById('root'));
</script>

4. Run React App in Web Browser

You can run your React app by opening its path in the web browser.

Create React App with NPM

If you want to create a big or major project in React then you should create React App with NPM.

It is the advanced way to create a React APP that provides a complete project folder structure with a basic setup & code structure. You can also write new code according to your project requirement.

create-react-app

A create-react-app is a tool that is developed by the Facebook developers team. It gives you a basic react app with a complete setup & configured folder structure that contains its required features.

If you use create-react-app to create your react project, You will not need to set up & configure. Simply use it & start your development by making your own components & modules.

create-react-app Installation

You can install create-react-app globally using the following command –

npm install -g create-react-app

create-react-app for a New Project

You will have to run the following command in your terminal to create a react app. This command only works if you have already installed npm ( version> 5.2 )  in your system.

npx create-react-app project-name

Accepted projectname –

I suggest you should keep your project name like the following

  • first-app
  • first_app
  • firstapp

Rejected projectname –

You must not keep your project name that contains capital/uppercase letter and special character at begining

Example –

npx create-create-app first-app

Benefits of create-react-app

If you use the create-react-app tool, you will get the following things –

  • A basic React project structure
  • React, React DOM & React Script with the current version
  • Autoprefixed CSS – You need not declare -WebKit- & other prefixes for supporting CSS on different types of browser
  • All the installed dependencies that are required for your react project
  • ES6, TypeScript, JSX & flow syntax support
  • Configured Babel & web pack
  • Built-in testing in Jet Testing Framework
  • features to display runtime error in the browser
  • Development server
  • support windows, Linex & macOS

Steps to Create React App

I suggest you should always create react app with npm by using the following steps

1. Install Node.js  & NPM for React APP

First of all, you have to install the current version (>5.2) of Node.js in your system.

You need not install npm. It will automatically install while you installing Node.js

2. Create a New React project

  • First of all, set your full directory path in your terminal where you want to create your react app.
C:\Users\Noor Khan\Desktop>

I have set my own directory path in the above line just for showing an example. You have to set your own path.

  • Then you have to install create-react-app globally by running the following command line
C:\Users\Noor Khan\Desktop>npm install -g create-react-app
  • After that, run the following command  to create react app
C:\Users\Noor Khan\Desktop>npx create-react-app firstapp

After running the above command, you will have to wait a few minutes for finishing the installation of react app.

3. Get React Folder Structure

After successfully installed react app, you will get its folder structure below –

first-app/
    |__node_modules/
    |__public/
    |__src/
    |        |__App.css
    |        |__App.js
    |        |__App.test.js
    |        |__index.css
    |        |__logo.svg
    |        |__reportWebVitals.js
    |        |__setupTest.js
    |__.gitignore
    |__package-lock.json
    |__README.md

5. Start Development Server

First of all, go to your react app root folder first-app by running the following command

C:\Users\Noor Khan\Desktop>cd first-app

After that, run the following command to start the development server

C:\Users\Noor Khan\Desktop>first-app>npm start

6. Run React APP in Web Browser

After started the development server, React app will automatically open on the web browser. Even you can open the react app with the following local URL –

http://localhost:3000/

What’s Next –

You should also know everything about React App Folder Structure in deatils.

 

Categories ReactJS

Leave a Comment