Day 1 of React — As a Beginner

Things that I’ve learned in a day as a beginner…

Photo by Lautaro Andreani on Unsplash

Things I have learned today

1. What is React?
2. JSX
3. Setting up React

What is React?

• React is a client-side JavaScript Library that is using components to build complex, reactive, and interactive User Interfaces (UI).
• React is used to make our websites or apps dynamically using reusable components.

What are Components?

Meaning:

1. Components in React are reusable and self-contained building blocks that represent specific elements or parts of a user interface.
2. They encapsulate the structure, behavior, and style of a UI element and can be composed together to build complex applications.

Features:

1. Reusability: Components can be reused throughout your application, reducing code duplication and promoting a modular development approach.
2. Customizability: Components accept input data (props) to customize their appearance and behavior, enabling flexible and dynamic UI elements.

Advantages:

1. Code Reusability: Components promote reusability, allowing you to build UI elements once and utilize them in multiple places, saving development time and effort.
2. Modular Development: Components break down complex problems into smaller, manageable pieces, enhancing code organization, maintainability, and team collaboration.

Disadvantages:

1. Learning Curve: Understanding and effectively working with components may require a learning curve, especially for more advanced concepts like component lifecycle and state management.
2. Performance Considerations: Poorly optimized components or excessive re-rendering can impact performance, so it’s important to optimize rendering and avoid unnecessary updates.

JSX (JavaScript XML)

• JSX (JavaScript XML) is an extension to JavaScript syntax used in React.
• It allows you to write HTML-like code within JavaScript.
• JSX is not actually HTML, but a syntax extension that gets transformed into regular JavaScript.
• JSX makes it easier to define the structure and content of React components.
• It allows you to combine JavaScript logic and HTML-like syntax together.
• JSX code is transformed into plain JavaScript before it’s executed in the browser.
• JSX provides simplicity, readability, and the ability to leverage JavaScript within component templates.
• It helps bridge the gap between JavaScript and HTML in React development.

In summary, JSX is a syntax extension in React that enables you to write HTML-like code within JavaScript, making it more convenient to define the structure and content of React components.

Setting up React

1. Go to this URL: https://create-react-app.dev/docs/getting-started
2. You can able to install the React app in just a few minutes by following the instructions available on the website.
3. There are 3 lines of code that you have to put inside the terminal which are as follows

(NOTE: If you’re a beginner like me, make sure to be in the right location, or else you might get confused to get access to your files before writing those few lines of code)

npx create-react-app my-app
cd my-app
npm start

`npm create-react-app my-app`

npm:

• allows you to run packages — which is React library as a whole — without having to install them globally on your computer.
• Why not Globally? What’s the problem with that? Well, when you globally install React, it means you install it in a way that makes it available for all your projects on your computer. This might seem convenient, but it can cause problems.
• Imagine you have two different projects, and each project needs a specific version of React. If you have globally installed React, there can be conflicts because the projects might require different versions of React. It’s like trying to use two different puzzle pieces that don’t fit together.
• To avoid these conflicts, it’s better to install React locally within each project. This means React is installed separately for each project, and each project can use the specific version it needs. It’s like having separate puzzle pieces for each puzzle, so they fit together perfectly.
• By keeping React installations separate for each project, you ensure that each project works correctly without interfering with others. It helps prevent issues and makes it easier to manage the different requirements of each project.

create-react-app

• It creates a new React application with a pre-configured setup.

my-app

• This directory or folder is where all your React files will be stored.
• This is where you’ll create React files and do stuff with React.

`cd my-app`

cd

• Short form for “Change Directory”. This means you would have to change your current file location to this React app location that you’ve just created.

my-app

• my-app is the folder or directory name in which your React files are being stored.

`npm start`

npm

• You might get confused and have wondered what’s the difference between npm and npx. So here you go 👇
• “npm”: npm is a tool that helps manage packages (libraries, frameworks, and tools) for JavaScript and Node.js. It allows you to install, update, and remove packages easily.
• “npx”: npx is a tool that comes with npm. It allows you to run packages without having to install them globally on your computer. It’s useful when you want to run a specific package for a one-time task.

start

• This just saying to start displaying or to show the output of the React code that you’ve got in your files.

So these are all the things that I’ve learned on Day 1 of React.

Hopefully you got some useful information outta this blog.

I’ll continue to publish this kind of “beginner-friendly” blogs about React for 7 Days Straight.

There are two main reasons for this:

1. I want to start learning a new programming-related skill
2. Want to stay consistent during the process and it must be doable, in other words, starting small.

Thanks for holding your eyeballs this far! It means a lot to me.

And a bonus information for the readers who have reading even now.

If you’re into reading books or want to read books and grow yourself into a better person then consider reading my articles about books and other self help stuffs which I’ve covered on SriniWhoCodes

Have a great day…🤩👋