Creating Your First React Project

Introduction to React

React is an open-source JavaScript library created by Facebook's Jordan Walke to make user interfaces for both web and mobile systems. React was first used in 2011 on Facebook's newsfeed. In 2012, it was used on Instagram, and in 2013 it was made available to the public. React is best for applications that change their data quickly and dynamically. It can show the parts of the UI that are changing without re-rendering the whole page. This makes the user experience much faster. If you are still wondering what React is all about, let’s go through the introduction to React and its related aspects.

Step 1: Create a New React Application

• First open terminal and run the following command to create a new React application:

(You can use any project name instead of my-react-app)

• Now you need to change the project directory:

now you are in my-react-app directory.

Step 2: Run the React Application

• Start the Development Server and for that run the following command to start the development server:

Step 3: Structure Your React Project

• A React project structure looks like this:

'public' : Contains the public assets and the main HTML
file and you can add any images or logo of the website
'src': Contains the React application code.
'package.json': Configuration file for managing project dependencies.

• Creating Components : In the 'src/' directory, you can create React components which represent different parts of your application.
  • First create 'components' folder and in that create .js files and it is look like this:

• Styling: For styling you can create index.css file and styling your components.

You can add 'db.json' file as well

• First, you need to install JSON Server globally. Open your terminal and run:

• Create a 'db.json' file and define your data structure. For example:

-Navigate to the directory where your db.json is located and start the JSON Server by running:

This command starts the JSON Server and serves the db.json file on 'http://localhost:3001'.

• For Access Data in React, you need to fetch URL of db.json file in a React component.

Conclusion

Now you can create a new React project. You can now start building your application by adding components, implementing functionality, and customizing the design to meet your requirements.

In this blog, I have covered the basic steps to set up a React project. As you proceed on your React journey, you'll delve into more advanced concepts, explore various state management techniques, and gain insights into deploying your React applications.
Happy coding and building! 🚀