Creating Your First React Project

edankhra — Tue, 03 Oct 2023 18:24:11 +0000

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! 🚀

A Beginner's Guide to HTML, CSS, and JavaScript

edankhra — Sun, 23 Jul 2023 22:26:33 +0000

Hello everyone! Myself Ekta, I am sharing basics of HTML, CSS and JavaScript.

Introduction:
Welcome to the world of web development! In this blog, we will explore the fundamental building blocks of the web: HTML, CSS, and JavaScript. These three technologies work together to create the dynamic and visually appealing websites you see every day. Whether you're a complete beginner or looking to brush up on your skills, this guide will introduce you to the basics of HTML, CSS, and JavaScript.

1. HTML - The Structure of the Web:
HTML (Hypertext Markup Language) forms the backbone of any web page. It provides the structure and content of a webpage. HTML uses tags to define elements, such as headings, paragraphs, images, links, and more. Let's look at a simple example:

2. CSS - Adding Style and Design:
CSS (Cascading Style Sheets) is responsible for the visual presentation of a webpage. It allows you to style HTML elements, change colors, adjust layouts, and create visually appealing designs. Here's a simple CSS example:

3. JavaScript - Adding Interactivity:
JavaScript brings life to web pages by adding interactivity and dynamic behavior. It enables you to respond to user actions, manipulate HTML/CSS, and fetch data from servers. Let's see a basic JavaScript example:

Conclusion:
HTML, CSS, and JavaScript are the foundational languages of the web. With HTML, you structure the content; with CSS, you add style and design; and with JavaScript, you create interactive and dynamic experiences. This is just the beginning of your web development journey. There's so much more to explore, including responsive design, frameworks, libraries, and server-side technologies. So keep learning and building, and soon you'll be crafting impressive websites and web applications! Happy coding!

DEV Community: edankhra