Day 1 — Starting to learn React

mdz
mdz
Sep 1, 2018 · 3 min read

Hello fellow, well September 1 2018, today is a very good day. I have decided to start learning React. Yeah, every front-end developer must have came across this very popular framework. Well the main objective of creating this medium post is to document all my react learning, So that i can get back to it to refresh myself with the topics i have covered.

It is never too late to be what you might have been — George Eliot

Why i chose React?

Yeah the answer is very simple. I have been learning JavaScript for over couple of months like may be more than 3 months. Since then i am hearing and came across this framework here and there. So it really hyped me over to learn and why not have the taste of using it. And React these days has gaining lots of traction, thanks to Facebook.

What i learned Today?

Setting up the machine

First i installed visual studio code and all the extensions that could be helpful for writing a productive react code. I will also list all the plugins, editor and references i use in a dedicated upcoming post so stay tuned for that.

Then i also installed the npm package manager from it official website and yarn using the below command

npm install -g yarn

And yeah the machine is ready for working on React[or may be not].

Setting up the enviroment

Created the main project folder with 2 sub-folders. one for the source files in which i will be writing down my codes and other one for public folder which will be having all the code produced by the compilers.

I installed the live-server and babel module using npm

npm install -g live-server
npm install -g babel-cli

Starting up the project and configuring it

Installing the necessary dependencies to run the react app in the browser compatible ES5 version, as i will be using many ES6, ES7 and JSX features which many browsers are incompatible.

yarn add babel-preset-react babel-preset-env

The dependencies are:

  • babel-preset-react
  • babel-preset-env

Project structure

/project
|----/node_modules
|----/public
| |----index.html
| |----/scripts
| |----app.js
|----/src
| |----app.js
|----package.json
|----yarn.lock

running the babel compiler to compile all the code in /src/app.js to /public/scripts/app.js which is the browser compatible code[ES5].

babel src/app.js --out-file=public/scripts/app.js --presets=env,react --watch

Working with codes

Importing react scripts through cdn to my html page @ /public/index.html using the following links.

<script src="https://unpkg.com/react@16/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.development.js"></script>

Now everything is all set and finally i can start writing my react code in /src/app.js file.

Rapping up

Well thats all for today, i know its not much of a code but its more of a setup.

Too much of anything is good for nothing — I don’t know who said it

Well thanks for the read . please drop a clap as it will motivate me on my journey of learning React. Thanks and i will catch you in the next post.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade