REACT FOR ABSOLUTE BEGINNERS, LIKE ME

Hello,

Recently, I’ve started to learn about React JS thanks to Burçak who encourages me to learn & also suggested the idea of collecting what I’ve learned so far.

Obviously there are tons of great tutorials on the internet, as a beginner my main goal is like telling a friend who also wants to know about what I’ve learned. So, I am hoping to continue writing on my web site as long as I learn new things and have projects with React. LET’S BEGIN !!!

1- WHAT IS REACT ABOUT?

First of all, React is a Javascript library. Created and developed by Facebook team to build user interfaces. Think of your FB page, there are components like feed, left & right sidebars, navbar that you see notifications for friendship requests etc. When you get a message, it only changes the messages component not the whole FB page. This is React.

And we used the word “Component”, yes, React is component based. All elements in a web app is a component; like Homepage, Contact, About pages would be an example. In DOM (Document Object Model) every node represents a component as you see below :

If a component changes, DOM creates a virtual DOM and it only changes that node(component) instead of the whole tree. Thanks to that we experience a fast single page application.

2- ENVIRONMENT PREP

To develop beautiful React web applications, we need some tools. One of them is Visual Studio Code (VS Code).

You can download it from here, I did for Windows x64.

And other one is Node Js, go to the link and then download the latest (LTS) version which is recommended in general.

There you go! You’re ready to create your first React application now.

3- YOUR VERY FIRST REACT APPLICATION

Facebook has a base React application on Github, you get this project and start to work on your own application. You can go to Github and clone the project if you wish to.

To create a new project, basically you should open your VS Code Terminal and type :

npx create-react-app your-app-name

>cd your-app-name

>npm start

It will look like this ;

That is it ! After creating a project, you will start to edit the App.js file and create your own applications. Thank you for reading my first post about React. I will update and share new ones, don’t forget to leave your e-mail to be notified when new posts come up. See you soon.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s