Is it difficult to get started with React (day 1)

Curious? join me, let's figure it out….…...

I am a beginner for frontend programming with React, Maybe you are the same, or not 😉 How do we start reading? shall we purchase a crash course or watch some random videos on youtube? For me, I think the best way to get started with a new technology is following the Documentation. But I am still a beginner 🙄. Well, still the answer is the same 🙂.

You can access the Documentation through the following link

Getting Started - React

Great, what should I know before going through this? 🤔
Maybe some basics on JavaScript, HTML, CSS.

First of all, let's create a react app up and running in our local environment.
First, you might need to download and install Node.

1. Installing NodeJS
https://nodejs.org/en/download/

2. Then navigate to the folder where you want to generate the project

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

oh 😶 totally forgot, I am going to use Visual Studio Code as the code editor along with this.

3. npm start will start your local server

OK, now I am going to try the most common first step for any beginner project. You know that isn't it?😊

Let's print HELLO WORLD

first, open your project with VSCode Editor and Navigate to the index.js file

Next, replace

<React.StrictMode>
<App />
</React.StrictMode>,
with
<h1>Hello, world!</h1>,

until we got to know more about the project structure we are going to use index.js for our code editing purposes.

but why 🙁 ?? Let's see, we will get the answers.

cheers 🍻🍻🍻 we have managed to print some text in the browser. Before having some further hands-on sessions let's explore the basics, let's figure out what's happening underneath. 💡💡💡💡💡💡💡💡

Introduction to JSX

const element = <h1>Hello, world!</h1>;

Wait 😳😳😳😳😳

Are we assigning an HTML tag as a variable?

Nope, This syntax is called JSX which is used as the template language for React. For the rest of the story, we are going to use JSX.

JSX supports Embedded Expressions

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

This will print John Snow as the output

We can also use expressions as {3+3} or even calling a method inside JSX

ReactDOM.render(
<h1>Sum is {calculateSum(3,4)}</h1>,
document.getElementById('root')
);
function calculateSum(number1,number2) {
return number1+number2;
}

In the compilation, JSX is converted into JavaScript objects and at the end, we are dealing with JavaScript. So following codes are also possible with JSX

ReactDOM.render(
<div>{divide(5,0)}</div>,
document.getElementById('root')
);
function divide(number1,number2) {
if (number2 === 0){
return <h2> cannot divide by Zero</h2>
} else {
return number1/number2;
}
}

Specifying attributes with JSX

ReactDOM.render(
<img src={imagePath}/>,
document.getElementById('root')
);

According to the Documentation, JSX is converted in to React.createElement()
objects. These objects are known as elements and they will construct the DOM.So we are going to stop for today with some questions in mind. We will come up with some more in the next story and some answers to our questions.

Hope you got some heads up on how to get started with React. From the next story, let us explore more on the basic concepts of React.

Till then 👋👋👋👋👋👋👋👋👋👋👋👋👋👋👋👋👋👋👋👋👋👋