Creating our first React App | Using create-react-app
MindCraft Frontend Web Dev - Master React JS Lecture 2
Course by: MindCraft

Welcome back! In the first tutorial, we installed the necessary tools to start working with React. Now, it's time to dive deeper and understand the structure of a React app.

Component-based Architecture of React

React allows us to build applications by dividing them into different components. Each component represents a part of the UI, which can be developed and reused independently. This modular approach simplifies development and maintenance.

Example: In the image below, we have structured our app into various components: header, footer, body, and right navigation bar.

You can design and structure your React components as per your project requirements.

Advantages of Dividing Your App into Components:

• Reusability: Components can be reused in the same or different applications.

• Maintainability: Easier to manage and debug a large codebase.

• Flexibility: Components can be modified using Props and State.

Let's Begin Creating Our App

Instead of writing the code from scratch, we'll use the create-react-app package to set up our React application efficiently.

Understanding npm and npx:

• npm (Node Package Manager): Helps in installing packages in Node.js.

• npx: An npm package that allows you to use packages without downloading them, ideal for running commands just once.

Creating a React App:

Open VS Code Terminal:
npx create-react-app textutils

1. Here, "textutils" is the name of our app. This command creates a new folder named "textutils" with the necessary files and folders.

Folder Structure of Textutils (Our React App):

• node_modules: Contains all the packages used by the React app.

• .gitignore: Lists files to exclude from GitHub pushes.

• package.json: Lists all installed packages.

• README.md: Provides basic information about your app.

Key Folders:

• "public" folder:

  • index.html: The main HTML file of our React app with an empty <div id="root"></div> where components will be rendered.

• "src" folder:

  • index.js: The entry point of the app, responsible for rendering.

  • app.js: The main component file where most of the app's code resides.

Running Your React App

Open Terminal in VS Code:
npm start

1. This command starts the React app on localhost:3000. You can make changes in App.js to see live updates.

Production Build:
npm run build

2. Use this command to create a production-ready build of your app.

What's Next?

In the upcoming videos, we'll cover more advanced concepts of React and work on exciting projects to solidify your understanding. 

You can also access the source code on our GitHub here.

Thank you for being with me throughout this tutorial. In the next lesson, we'll recap essential JavaScript concepts needed for React. Keep learning and keep coding!