How to Create a React App

Many beginner software developers, and entrepreneurs, when they go  to build software product will have heard or come across react.

I consider React the “go to” software library for developing front-end code. 

They allow developers to reuse components within an application, preventing the need to rewrite the same code repeatedly. Another benefit of creating a react app is state management it is the easiest way for developers to handle state

The react library is also extensible. It has given birth to many other frameworks such as Vue, Angular, and Next.js. These frameworks use react in some way to support their stack or product.

Step 1: Setting Up Your Environment

Before you begin, ensure that you have Node.js and npm (Node Package Manager) installed otherwise you won’t be able to use react. You can download and install them from Node.js official website. There are many ways to install node.js

Check Node.js and npm installation:

For windows download the executable at nodejs.org

And for Linux like Ubuntu download

sudo apt install nodejs

Or install Chocolatey Software Package Manager for windows

choco install nodejs

Open your terminal and type the following commands to check if Node.js and npm are installed correctly.

node -v

npm -v

These commands should return the version numbers of Node.js and npm installed on your system. Always make sure your on the latest stable version, not the beta version or the cutting edge but generally known as stable releases of node and npm.

Step 2: Create a New React Application

We’ll use the create-react-app command-line tool, maintained by Facebook, which sets up everything you need to run a React application.

Install create-react-app:

npm install -g create-react-app

This command installs create-react-app globally on your system, allowing you to run it from anywhere in your terminal.

Create a new project:

npx create-react-app my-react-app

npx create-react-app [Insert App Name]

Replace my-react-app with whatever you want to name your project. This command creates a new folder named my-react-app with all the necessary files and dependencies.

Step 3: Navigate into Your Project

cd my-react-app

cd [App Name]

This command takes you into the project directory.

Step 4: Start the Development Server

npm start

This command runs the app in development mode. Open http://localhost:3000 to view it in the browser. The page will reload if you make edits. You will also see any lint errors in the console. More on the history of localhost.

Step 5: Understanding Your React App Structure

Once you’ve opened your project directory in a code editor (VS Code, Sublime Text, etc.), you’ll see several files and folders:

• node_modules/: Contains all the project’s npm dependencies.
• public/: Contains the static files like the HTML file.
• src/: Contains your React components, CSS, and JavaScript files.
• package.json: Lists the project dependencies and other configurations.
• README.md: A markdown file containing information about the app.

Step 6: Edit Your First React Component

Navigate to src/App.js. This is a simple React component.

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

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Hello World</h1>
      </header>
    </div>
  );
}

export default App;

This library you see us importing has to be installed, this one way to allow react to have multiple web pages in applications or redirect to other webpages. You can use it by installing via npm

npm install react-router-dom

Write this import at the top of App.js

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import logo from './logo.svg';
import './App.css';
import NavBar from './NavBar';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

function App() {
  // JSX syntax
  return (
    <Router>
    <div className="App">
      <header className="App-header">
        <NavBar/>
      <Routes> 
      <Route path="/" element={<Home />}/>
        <Route path="/contact" element={<Contact />}/>          
      </Routes>
        </header>
        </div>
      </Router>
  );
}

const Home = () => { 
  return (
    <div>
      <h2>Home Page</h2>
      <p>Welcome to the home page!</p>
    </div>
  );
}
const Contact = () => {
  return (
    <div>
      <h2>Contact Page</h2>
      <p>Contact us at XYZ </p>
    </div>
  );
}

export default App;

Then to import components into other pieces of Javascript code

In this file you can start editing the HTML, CSS, and create the web page you want. Now if you want components you can create another folder called “components” and then create files in that component like

NavBar.js

import React from 'react';
import { Link } from 'react-router-dom';
import './NavBar.css';

const NavBar = () => {
  return (
    <nav className='navbar'>
        <div className='navbar-logo'> 
        <Link to="/">MyApp</Link>
        </div>    
        
        <ul> 
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/contact">Contact</Link></li>
        </ul>
    </nav>
  )
}

export default NavBar

React is known as SPA Single Page Application this what makes it special

“In an SPA, all the necessary code (HTML, JavaScript, and CSS) is loaded once, and navigation between different views is handled on the client side, typically by dynamically updating the content without requiring a full page reload.”

There are many frameworks that used in industry like

• Next.js
• Vue.js
• Angular.js

Learning one of these frameworks is key to getting your foot in the door at a company but its essential that you learn the fundamentals of Reacts.

What’s Next?

Now after you spent sometimes building your App you are going to want to Build and Deploy.

npm run build

This command builds the app for production to the build/ folder. It correctly bundles React in production mode and optimizes the build for the best performance.

How to deploy your react?

After building, you can deploy the build/ folder contents to a static hosting service like, you can automatically deploy from your command line with these platforms. This is for another blog post.

• GitHub Pages
• Netlify
• Vercel

Some interesting history of react? and why react came to existence

The Future of JavaScript MVC Frameworks

Conclusion

There so many unique libraries with react I would explore or implement afterwards. Happy coding!

• ReactFlow
• Three.js
• Recharts
• ReactSpring
• ReactThree
• FiberFramer
• MotionReact
• RouterRedux
• Apollo
• Formik
• AntDesign
• MaterialUI
• StyledComponents
• TailwindCSS
• ReactQuery
• Gatsby
• ReactDnd
• ReactVirtualized
• ReactTable