DEV Community: Aman Sharma

Week -4 Step in React

Aman Sharma — Thu, 03 Dec 2020 12:04:10 +0000

Hello, Community Today is week -4 of learning. You can visit my previous blogs Blog1 Blog2 Blog3.

In this week I learned about props it stands for property which is used for passing the value from one component to the other component. Props value cannot be changed, the value remains the same, unlike the state which can be updated!!!

Functional component: There are 2 ways through which we can define a component in react One is class-based another one is functional as reactjs is moving toward functional programming it is better to define the functional component.

Creating Multiple Components: How to create the component, how to structure the code in the react and passing the props in the multiple and understand how to make the code reusable by passing the data from one file using in the other file. Learned About ES6 Concept of arrow function, let and const, how to do destructuring.

By using all these concepts I have made two projects one is Stopwatch and the other is a portfolio website. In the Stopwatch, i have made the hours minute seconds timer and add the three buttons for stop reset and start and using the concept of javascript setInterval and clearInterval.
Used the react hooks useState for managing the state inside the component.

Portfolio in this project I have understood the react-router how to link and navigate between the pages. Difference between a href and Link and also exact keyword. In this, I have passed the data through the profiledata.js import the component in home and define and map where the data needed. It helps in understanding code reusability.

Learning from peers is very great. It makes learning fast as well helps to understand things easily. Thanks, Frontend Community Deepak and Sagar for providing me this opportunity.

You can follow me on Twitter or connect with me on LinkedIn.

Week 3 ReactJs

Aman Sharma — Thu, 26 Nov 2020 08:31:36 +0000

Let us talk what i have learnt in the previous week the HTML i.e. the structure of the WebPage. CSS concepts like the flex box and grid and JavaScript use for the BOM and DOM operation and event listener and handlers. By the learning it have made the StopWatch project in JavaScript CSS html.

What is React.js?

Reactjs is an front-end the library use for making the UI of the web page.Without the ReactJs it is possible to the make website. But Reactjs helps us in managing the folder structure of the code efficiently. ReactJs also helps us in making the code reusable. Like if I have made the Card Components in the React then we can reuses in the multiple times in another Components helping us in make the development easier.

ReactDOM

Previously, ReactDOM was a part of the ReactJS library. It is a library that provides DOM-specific methods, while ReactJS is only responsible for rendering data to the DOM.

ReactDOM helps declare the top-level of the application by using the ReactDOM.render method. It is a reference to the root component instance, and it helps control its contents.

ReactDOM.render(
< App />,
document.getElementById('app')
)

Why React.js?

There are many factors why we use reactjs.

Large Community: ReactJs has large community because it is maintained by the Facebook. Large numbers of developers are preferring the react over other framework. We can easy resolve our issue.
Learning Curve: ReactJs has simple learning curve has compared to another framework and library.It is developer friendly as new beginners adopt it easily.
Code Re-Usability : The React help us to break the component into multiple parts into small UI . It help us to make focusing into small feature of the code.

Component

ReactJS allows the composition of complex user interfaces to be rendered by small pieces of code called components. A component contains both the HTML template and the code that controls it. We can break code into small part modules
Reactjs use the JSX combination of the javascript and HTML.

Virtual DOM

Unlike in another framework there are two DOM in React
js that are Virtual DOM and Real DOM. Real Dom and virtual Dom are sync betweeen each other. Is there are any changes first it will reflected to the virtual DOM then updates to Real Dom.

You can follow me on Twitter or connect with me on LinkedIn.

Week 2 Update !!!

Aman Sharma — Sun, 15 Nov 2020 16:40:35 +0000

Hi Community, this is my second blog on this platform and my previous Blog.

After Learning HTML CSS in the first week of mentorship by Deepak sir, I have reached the second week of mentorship with high Enthu.
This week I have studied the Jest (Testing Framework of JS) and the Vanilla Javascript.
From my learning, I have made the project in JavaScript.

StopWatch --> Code

freeCodeCamp and W3Schools help me in rectifying the error I faced.

Explore More on !!!

Connect on LinkedIn and Follow on Twitter

Week 1 Documenting The Learning Journey!!!

Aman Sharma — Mon, 09 Nov 2020 10:39:36 +0000

Hello Everyone I am Frontend Developer and learner. I have started learning the MERN Tech-Stack for starting. This is my first blog in this platform. I have never thought of documenting by journey but Deepak sir has motivated me to do so.
Recently I have been selected for a mentorship from the Deepak Sir. Documenting the learning can be the best as it helps to recall the journey.
Day 1: I have learnt from the Git GitHub basis and learnt the command. GitHub is best when it comes on working on the teams.
Day 2: I have revised the concept of HTML from the freecodecamp.org and learnt about its basic.
Day 3: I have learnt about the CSS and learnt the concept of the flexbox and grid from that.
Day 4: From the learning of three days I have created my portfolio website in HTML CSS and deploy it in on GitHub
URL: - https://amansharma4.github.io/p1-portfolio
Day 5: I have learnt about the concept of the JavaScript from freecodecamp.org and learnt about the ES6 Concept
Day 6,7: Learnt about the Jest testing tool and solved the practice question in the JavaScript