React Fundamentals Week One

Dhruv Sharma
May 16 · 4 min read
React Learning Series, Week 1

This article is in continuation of my react learning series, where I post a weekly article of my react learning progress and share resources and material that came in handy and helped me better understand the concepts and advance my javascript skills.

This week I got the fundamentals off the table, I went through a lot of theory and articles to have a better understanding of the concepts before diving into coding. Let me give you a glimpse of my week 1 from the top down. Resources are at the bottom.

Hello World

Of course, How can I miss the norm, right?

ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);

The resource which is used to understand the basics and fundamentals of React is the one and only reactjs documentary, I learned this quite late, but if you are learning a new framework, library, or language. The official documentary is your best friend. I understand it can be very boring and some documentaries are not even updated and provide complete information, but most of the time it is your best go-to option, at least for the beginning.

Highlights of Fundamentals

JSX allows us to write HTML elements in JavaScript and place them in the DOM without any prebuild methods like createElement() and/or appendChild() methods. To be short and precise, JSX converts HTML tags into react elements.

Here is a simple example, where a constant name element is declared

const element = <h1>This is JSX</h1>

This code snippet looks familiar, but it’s neither HTML nor a string. JSX makes it so we can pass around tree structures composed of HTML or React elements as if they were standard JavaScript values.

You can put valid JavaScript expression inside curly braces in JSX

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);

In the snippet above we are embedding “name” expression which is a JavaScript string and It is completely valid and is even the norm to use JavaScript expression in your JSX.

We can write React application with JSX, but no one does that because JSX makes the code very short and easy to understand, it gives the programmer to pass around elements in Javascript.

As we all know that everything in React is a component, components let you split the UI into independent, reusable pieces. To be short and precise, a Component is nothing but a JavaScript function. There are two ways to define components in React, Class-based components, and Functional components, but since the introduction of Hooks in react (which is another week topic), people prefer to use functional components because they are easy to write, maintain, and read.

function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

This is a valid react component as it accepts a single prop (coming on next) and is returning everything inside a single JSX wrapper.

In many cases, components need to communicate with each other, to simplify exchange data with each other and the way to pass data between components is by using props.

  • Data with props are being passed in uni-directional flow.
  • Props data is read-only.
  • Props are being passed to components like function arguments.
  • When using class-based components props are declared like this.prop
  • props.childresn For any element declared between the opening and closing tag of the component.

To explain it in minimum words I can, State is a built-in object in React. It is an object where you store property values that belongs to the component, and when the state object changes, the component re-renders itself on the screen.

I will dive into the use of useState() Hook in next week's article, where I will be covering React Hooks and some intermediate topics.

Each component in React has a lifecycle that you can manipulate according to different phases of the component, which are,

  1. Mounting: means loading the element into the DOM.
  2. Updating: means updating the component in the DOM or whenever there is a change in the component’s state or props.
  3. Unmounting: This is the last phase when a component is removed from the DOM.

The actions based on user events are called events, like when the user clicks something, changes something, mouseover, etc.

Points to be noted for adding events in React.

  • React events are written in camelCase syntax like onClick
  • React event handlers are written inside curly braces.

This is the simplest part of all, There are many ways to style React with CSS, I am not gonna go into the example of each way, I will just describe the few I used and think are good to get the job done.

  • Inline styling
<h1 style={{color: "red"}}>Hello Style!</h1>
  • camelCased Property names
<h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1>
  • JavaScript Object: Declare the styles in a completely different chunk of JS code.
const mystyle = {
color: "white",
backgroundColor: "DodgerBlue",
padding: "10px",
fontFamily: "Arial"
};
  • Last but not only limited to, Stylesheet, To create a different file to maintain the styles for your components. The important part for creating different stylesheet is that, when you import and mention you class name in react component, you have to use className syntax instead of class as in regular HTML.

Upcoming week, I will be implementing small projects based on the fundamentals and will move on to intermediate topics, stay tuned in. Thanks for reading.

For the fundamentals, these two resources came in really handy. This youtube playlist is really informative, the author explains both the classed-based components and functional components plus the difference too.

[1] https://reactjs.org/

[2] https://www.youtube.com/playlist?list=PLC3y8-rFHvwgg3vaYJgHGnModB54rxOk3

Nerd For Tech

From Confusion to Clarification

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.

Dhruv Sharma

Written by

I write about Javascript | python | Mindfulness and Psychedelics.

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.