
Day 1 — Starting to learn React
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 yarnAnd 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-cliStarting 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-envThe 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.lockrunning 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 --watchWorking 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.
