Vanja's Blog

Subscribe to Blog via Email


Enter your email address to subscribe and receive notifications of new posts by email.

Social


Recent Posts


Top Posts & Pages


Categories


Tags


Share


React Baby Steps

From vanilla to modern JS.

Vanja PetreskiVanja Petreski

If you have only vanilla JavaScript / jQuery knowledge and want to learn modern JS / React, this article will help you start.

JavaScript Refresh

Let’s refresh our JavaScript memory first:

And of course – anything else you find useful / missing for you.

ES6

ECMAScript 6 (ES6) is the sixth major release of the ECMAScript language specification. ECMAScript is the “proper” name for the language commonly called JavaScript. This is what we will be using. ES6 in Depth articles explain new, modern features of ES6, I’ve found these parts important:

You will need these things, so I suggest to cover them well and anything else you find useful.

Terminology & Ecosystem

Every time when I enter into new technology, it’s confusing for the first few days, until I connect all the dots, terminology and ecosystem, let’s see:

Good thing is that for starting with React you don’t need to know a lot about these things, just to have an idea what they are and what is their purpose. So you will use npm do fetch dependencies for your project and run tasks like building, starting the app, etc; Babel serves so that you can write modern JavaScript which is then translated to old JS that can run in any browser; Webpack is bundling all small pieces / modules of your well structured app into one single JavaScript bundle.

You will use create-react-app initially to bootstrap your React app with no build configuration – Babel, Webpack and other things will be already configured and hidden from you. So you can focus on React. Later, if you need some custom configuration you can eject.

ReactJS

Before you start, you will need an IDE / editor, I suggest WebStorm, but seems like Visual Studio Code is also a good option.

Start with official docs:

After this you will have solid basic knowledge what React is and how it works, but also many questions, so it’s time to get your hands dirty and practice on your own project!

Playground Project

I had few goals with my playground project, to practice:

The result is mini app React Countries and source code on GitHub. Feel free to explore 🙂

Next Steps

My next focus will be to learn Redux:

Conclusion

This is just tip of the iceberg, but good way to start!

Software Engineer & Digital Nomad

Comments 0
There are currently no comments.